ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. #33557

kodeandoec · 2022-04-03T02:26:11Z

Description

Recentrly update React ANtive Version to
"react-native": "0.68.0",
and have this issue

WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN EdgeInsetsPropType will be removed from React Native. Migrate to EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'. WARN EdgeInsetsPropType will be removed from React Native. Migrate to EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'. WARN PointPropType will be removed from React Native. Migrate to PointPropType exported from 'deprecated-react-native-prop-types'. WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

Version

0.68.0

Output of `npx react-native info`

System:
OS: macOS 12.3.1
CPU: (8) x64 Apple M1
Memory: 30.51 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 17.8.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.5.5 - /usr/local/bin/npm
Watchman: 2022.03.14.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 30, 32
Build Tools: 30.0.2, 32.0.0, 32.1.0
System Images: android-30 | Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

npx react-native start

Snack, code example, screenshot, or link to a repository

WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN EdgeInsetsPropType will be removed from React Native. Migrate to EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.
WARN EdgeInsetsPropType will be removed from React Native. Migrate to EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.
WARN PointPropType will be removed from React Native. Migrate to PointPropType exported from 'deprecated-react-native-prop-types'.
WARN ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

The text was updated successfully, but these errors were encountered:

Adnan-Bacic · 2022-04-05T13:03:45Z

i got the same warning with ColorPropType:

ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'.

for my project i dont use this directly, but when i search in node_modules/ it appears in some of the libraries i use.

so the only solution i see is for those libraries to be updated.

for example, i had this error from react-native-maps. and i found that someone had already made a pr earlier:
react-native-maps/react-native-maps#4096

seems like a simple fix. but the work seems to fall on the libraries changing the import, instead of the react-native library.

wimil · 2022-04-06T19:16:53Z

same

nibblesnbits · 2022-04-07T02:36:03Z

Same, but I don't actually know what it's referring to. I don't use anything by that name directly in my code.

Poplizal · 2022-04-07T07:02:59Z

i also get this errro. brush!

petrishevalexander · 2022-04-07T09:57:23Z

saaaaaame! :(

viniibp · 2022-04-07T20:07:33Z

same..

nibblesnbits · 2022-04-08T16:05:10Z

So now we just ignore deprecation messages now instead of learning what we actually need to fix? Sounds like a great practice...

Gnative · 2022-04-08T16:38:41Z

So now we just ignore deprecation messages now instead of learning what we actually need to fix? Sounds like a great practice...

@nibblesnbits Obviously if you see this warning you should update your application or handle that how you like. As mentioned above, an issue was about sub packages not having changed to 'deprecated-react-native-prop-types and those throwing the error.

Thanks for your comment to make a clarification.

nibblesnbits · 2022-04-08T16:41:35Z

@Gnative, obviously if there is no documentation on what ViewPropTypes actually is within https://reactnative.dev/, no one will know what to update.

Gnative · 2022-04-08T16:42:13Z

@nibblesnbits - did you read the warning

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

nibblesnbits · 2022-04-08T19:44:19Z

Okay so this is referring specifically to prop-types like in normal react. That's what I needed clarification on. Thanks.

…

________________________________ From: Gnative ***@***.***> Sent: Friday, April 8, 2022 12:50:42 PM To: facebook/react-native ***@***.***> Cc: Stephen Collins ***@***.***>; Mention ***@***.***> Subject: Re: [facebook/react-native] ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. (Issue #33557) @nibblesnbits<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnibblesnbits&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=weSGgF0ApS2iNr%2FU66pnqy02XpqQNd3%2FBSxh%2BmAJPHw%3D&reserved=0> Sorry some clarification: PropTypes was a type checker used by React Native before Flow or TypeScript. Some older packages might be still using this. Even some newer ones as its a simple type checker. if you are seeing these warning and don't specifically use PropTypes in your application then you can, if you wish, add the ignoreLogs above to quieten the warnings until sub packages are updated. — Reply to this email directly, view it on GitHub<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ffacebook%2Freact-native%2Fissues%2F33557%23issuecomment-1093083115&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=7aaq%2B3SxNnH06nWJXHqt%2B4SyntZFskqdGtZ1gurdB74%3D&reserved=0>, or unsubscribe<https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FABODKJJULRA62M3SS4DXBB3VEBPWFANCNFSM5SMQA42Q&data=04%7C01%7C%7C52a3b81329f54c5618ed08da197febee%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637850334464326312%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=YW6lVKWd6lEXce4NUrMopwNo468KKQjTk2ZgqDeKLtU%3D&reserved=0>. You are receiving this because you were mentioned.Message ID: ***@***.***>

PAAPII10 · 2022-04-15T16:15:04Z

Same Problem here.. Anyone got solution?

GitForAndrey · 2022-04-17T17:26:31Z

how i solved the same problem.
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
i got this error after install react-native-camera
The course of my solution, I went to the node-modules folder -> the react-native-camera folder and found the main file RNCamera.js
find ViewPropTypes import

import {
findNodeHandle,
Platform,
NativeModules,
requireNativeComponent,
View,
ViewPropTypes,
ActivityIndicator,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native';

delete import this file from 'react-native'
and create new import
import {ViewPropTypes} from 'deprecated-react-native-prop-types';

and its work good

as I understand it, this is a mistake of the old npm packages, and if the project is alive, then the developers fix it in new versions. And maybe this error will go away when you update the package to a newer one.

The 'ViewPropTypes' is not being used directly in this application, it's coming from some lib. So, it could be safely ignored ref: facebook/react-native#33557

hssrrw · 2022-04-22T10:13:26Z

Does anybody know why those types became deprecated? Yes, we can import them from 'deprecated-react-native-prop-types' but what are non-deprecated alternatives now?

kockok · 2022-04-26T08:53:03Z

Up until now, is that the best solution is to just IGNORE the warning? I think they should deprecate it in the underlaying codebase! Or at least provide us a config option to dismiss the warning!!

Gnative · 2022-04-26T09:01:02Z

If you have fixed the depreciation in your own codebase and the warning is coming from installed packages then I guess yes ignoring the warning is an option.

You could make a pull request for those packages that are causing the warnings.

jrhager84 · 2022-05-02T05:02:52Z

Something tells me this warning is going to LINGER for quite some time with some of the older packages.

yonitou · 2022-05-06T13:00:22Z

I tried your solutions to ignore the warnings but this is really weird, it doesn't work. I already used LogBox plenty of times to ignore some warnings and it worked perfectly well but I just kept trying for 2 hours to ignore these ones and it's not working doesn't matter what

I tried :

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'." ]);
LogBox.ignoreLogs([ "ColorPropType will be removed from React Native" ]);
LogBox.ignoreLogs([ "exported from 'deprecated-react-native-prop-types'." ]);

Could you help ? Thx !

Adnan-Bacic · 2022-05-06T13:10:37Z

I tried your solutions to ignore the warnings but this is really weird, it doesn't work. I already used LogBox plenty of times to ignore some warnings and it worked perfectly well but I just kept trying for 2 hours to ignore these ones and it's not working doesn't matter what

I tried :

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native. Migrate to ColorPropType exported from 'deprecated-react-native-prop-types'." ]);

LogBox.ignoreLogs([ "ColorPropType will be removed from React Native" ]);
LogBox.ignoreLogs([ "exported from 'deprecated-react-native-prop-types'." ]);

Could you help ? Thx !

It looks like you have spaces at the end of the sentences.
Also i think you can write each string in the same array, you dont have to LogBox.ignoreLogs() multiple times

goxr3plus · 2022-05-06T16:07:01Z

Okay for the time talking because this warning is a ball breaker until all the libraries using it update i am dong the following.

If you like to see the errors just don't use this solution but for me i need to see important stuff on the console not warnings spam. Gave you two extra warnings types in case you are using NativeBase and React-Native-Gesture-Handler version 2.2.0 ++ that comes with expo 45

import { LogBox } from 'react-native'
import ignoreWarnings from 'ignore-warnings';

ignoreWarnings('warn',['ViewPropTypes','[react-native-gesture-handler]'])

LogBox.ignoreLogs([
	'ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from \'deprecated-react-native-prop-types\'.',
	'NativeBase: The contrast ratio of',
	"[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
])

yonitou · 2022-05-09T09:08:18Z

Thanks for the help @Adnan-Bacic but unfortunately, I don't have any spaces at the end of my sentences. I copied and pasted almost all of the variants that had been posted on this thread and the warning is always here. I don't get how this is possible since I succeeded to make it work with other warning messages.

itorres-1 · 2022-05-11T04:27:32Z

Can someone explain this in a react native noob friendly way? Where am I supposed to put the LogBox.ignoreLogs(...) statements? No matter where I've put it, these warnings pop up (app.config.js, my first screen that shows up, wherever). Is there a central place to put it? I don't like the idea of polluting my code with these statements due to dependencies. Could someone please explain in simple terms how to fix this? Or do I just deal with it until dependencies fix this?

codeplaygoa · 2022-05-11T06:44:52Z

facing same issue. ignore logs has no effect on warnings

FatmaMahmoud698 · 2022-05-11T08:07:00Z

I face the same error

eduardoschneider · 2022-12-07T19:17:56Z

So now we always have to do the patch-package everytime we install packages?
The problem are not just the warnings, without it the whole application slows down X_X

omaryoussef · 2022-12-07T23:41:54Z

Yea this seems like a weird solution, there's tons of libraries out there that use this option and the expectation to patch every single one of them manually is bad, is there a more automated solution/configuration we can use?

qdanik · 2022-12-09T03:02:03Z

Yea this seems like a weird solution, there's tons of libraries out there that use this option and the expectation to patch every single one of them manually is bad, is there a more automated solution/configuration we can use?

You should patch just react-native package like to back some things to the lowest version. You shouldn't patch every library just react-native package.

vinaciotm · 2022-12-12T20:14:20Z

👍🏻 ✅ Hi, devs

So, edit the node_modules is bad way to solve the problem

I am using React Native with Expo CLI (RN 0.70.5, EXPO 47.0.8)

👉🏻 Follow step by step and be happy!

🚀 LETS GO!!

STEP 1:

run yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types

STEP 2:

in your root project create folder resolver, inside this create another folder react-native, inside this create index.js file.
looks like: ./resolver/react-native/index.js
open the file and paste this:

import * as StandardModule from "react-native";

const deprecatedProps = {
  ImagePropTypes: require("deprecated-react-native-prop-types/DeprecatedImagePropType"),
  TextPropTypes: require("deprecated-react-native-prop-types/DeprecatedTextPropTypes"),
  ViewPropTypes: require("deprecated-react-native-prop-types/DeprecatedViewPropTypes"),
  ColorPropType: require("deprecated-react-native-prop-types/DeprecatedColorPropType"),
  EdgeInsetsPropType: require("deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType"),
  PointPropType: require("deprecated-react-native-prop-types/DeprecatedPointPropType"),
};

const imgProx = new Proxy(StandardModule.Image, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.ImagePropTypes;
    return Reflect.get(...arguments);
  },
});

const txtProx = new Proxy(StandardModule.Text, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.TextPropTypes;
    return Reflect.get(...arguments);
  },
});

const objProx = new Proxy(StandardModule, {
  get(_, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    if (prop === "Image") {
      return imgProx;
    }
    if (prop === "Text") {
      return txtProx;
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

STEP 3:

Edit babel.config.js file:
add in presets array this string: "module:metro-react-native-babel-preset".
add in plugins array this array:

[

       "module-resolver",
       {
         root: ["."],
         resolvePath(sourcePath, currentFile) {
           if (
             sourcePath === "react-native" &&
             !(
               (
                 currentFile.includes("node_modules/react-native/") || // macos/linux paths
                 currentFile.includes("node_modules\\react-native\\")
               ) // windows path
             ) &&
             !(
               currentFile.includes("resolver/react-native/") ||
               currentFile.includes("resolver\\react-native\\")
             )
           ) {
             return path.resolve(__dirname, "resolver/react-native");
           }
           return undefined;
         },
       },
     ]

STEP 4:
run expo r -c

🎉 CONGRATULATIONS, YOU ARE WELCOME 😉🇧🇷

vinaciotm · 2022-12-12T20:16:45Z

This is the solution for error/warning WORKS! But, looks like wrong way. Edit node_modules and run patch it?!

Why react-native doesn't import "deprecated" module by default in case it is installed?

Why expo-cli doesn't import "deprecated" module by default in case it is used by default template?

someone have another solution that not need to edit "node_modules" folder?
Hello everyone!
I would like to share my solution and hope it will be helpful for you. let me know if you know a better solution :)
We are needed following packages: https://www.npmjs.com/package/patch-package https://www.npmjs.com/package/deprecated-react-native-prop-types
Steps:

yarn add patch-package deprecated-react-native-prop-types

Set up patch package (ref to the doc above)

Open node_modules/react-native/index.js

Find // Deprecated Prop Types and replace deprecated types below with these:
// Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },
execute cmd from the project root: npx patch-package react-native

Let's try to find [project]/patches/react-native.patch

Congrats!

My patch file looks like this:
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..4a640e3 100644
--- a/node_modules/react-native/index.js
+++ b/node_modules/react-native/index.js
@@ -435,32 +435,16 @@ module.exports = {
   },
   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'ColorPropType has been removed from React Native. Migrate to ' +
-        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ColorPropType;
   },
   get EdgeInsetsPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
-        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
   },
   get PointPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'PointPropType has been removed from React Native. Migrate to ' +
-        "PointPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').PointPropType;
   },
   get ViewPropTypes(): $FlowFixMe {
-    invariant(
-      false,
-      'ViewPropTypes has been removed from React Native. Migrate to ' +
-        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ViewPropTypes;
   },
 };

I find solution without edit NODE_MODULES, look here: #33557 (comment)

iPachDev · 2023-01-03T16:14:03Z

Other Solution

the package "react-native-slider" is based from "@react-native-community/slider".

step 1: Remove react-native-slider

npm uninstall --save react-native-slider

step 2: Install slider community.

npm install --save @react-native-community/slider

step 3: Edit files:

.../node_modules/react-native-media-controls/dist/react-native-media-controls.cjs.development.js
var RNSlider = _interopDefault(require('react-native-slider'));
to var RNSlider = _interopDefault(require('@react-native-community/slider'));
.../node_modules/react-native-media-controls/dist/react-native-media-controls.cjs.production.min.js
Here find text react-native-slider and change with @react-native-community/slider

With simples steps you can should run the proyect

tiagomsmagalhaes · 2023-01-03T18:28:29Z

STEP 3:

Edit babel.config.js file:
add in presets array this string: "module:metro-react-native-babel-preset".
add in plugins array this array:

[

       "module-resolver",
       {
         root: ["."],
         resolvePath(sourcePath, currentFile) {
           if (
             sourcePath === "react-native" &&
             !(
               (
                 currentFile.includes("node_modules/react-native/") || // macos/linux paths
                 currentFile.includes("node_modules\\react-native\\")
               ) // windows path
             ) &&
             !(
               currentFile.includes("resolver/react-native/") ||
               currentFile.includes("resolver\\react-native\\")
             )
           ) {
             return path.resolve(__dirname, "resolver/react-native");
           }
           return undefined;
         },
       },
     ]

STEP 4: run expo r -c

🎉 CONGRATULATIONS, YOU ARE WELCOME 😉🇧🇷

@vinaciotm where does path come from?

laitlhadj · 2023-01-05T08:55:07Z

@tiagomsmagalhaes
var path = require('path');

niloriver · 2023-01-12T05:49:08Z

Thanks. After hours trying to solve with patch this solution seems to be the best.

After I applied "resolvePath()" my "alias" stopped working so I had to adapt.

resolvePath(sourcePath, currentFile, opt) { if ( sourcePath.includes("@utils") || sourcePath.includes("@components") || sourcePath.includes("@scenes") || sourcePath.includes("@theme") || sourcePath.includes("@modules") ) { const fullPath = path.resolve( __dirname, "src", sourcePath.replace("@", "") ); return fullPath; } return undefined; }

tult-rk · 2023-01-13T10:17:16Z

@niloriver my "alias" stopped working too. How do you resolve that?

with this code? I have edited my babel.config.js like this but still not working.

resolvePath(sourcePath, currentFile, opt) { if ( sourcePath.includes("@utils") || sourcePath.includes("@components") || sourcePath.includes("@scenes") || sourcePath.includes("@theme") || sourcePath.includes("@modules") ) { const fullPath = path.resolve( __dirname, "src", sourcePath.replace("@", "") ); return fullPath; } return undefined; }

@vinaciotm I using yarn not expo, so how can I use it with yarn?

STEP 4:
run expo r -c

karimessouabni · 2023-01-16T12:46:06Z

If you are facing this problem because you installed this package recently, I recommend installing https://www.npmjs.com/package/react-native-floating-action instead

SiddigHope · 2023-01-29T15:31:55Z

👍🏻 white_check_mark Hi, devs

So, edit the node_modules is bad way to solve the problem

I am using React Native with Expo CLI (RN 0.70.5, EXPO 47.0.8)

👉🏻 Follow step by step and be happy!

rocket LETS GO!!

STEP 1:

* run `yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types`

STEP 2:

* in your root project create folder `resolver`, inside this create another folder `react-native`, inside this create `index.js` file.
  _looks like: `./resolver/react-native/index.js`_

* open the file and paste this:

import * as StandardModule from "react-native";

const deprecatedProps = {
  ImagePropTypes: require("deprecated-react-native-prop-types/DeprecatedImagePropType"),
  TextPropTypes: require("deprecated-react-native-prop-types/DeprecatedTextPropTypes"),
  ViewPropTypes: require("deprecated-react-native-prop-types/DeprecatedViewPropTypes"),
  ColorPropType: require("deprecated-react-native-prop-types/DeprecatedColorPropType"),
  EdgeInsetsPropType: require("deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType"),
  PointPropType: require("deprecated-react-native-prop-types/DeprecatedPointPropType"),
};

const imgProx = new Proxy(StandardModule.Image, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.ImagePropTypes;
    return Reflect.get(...arguments);
  },
});

const txtProx = new Proxy(StandardModule.Text, {
  get(_, prop) {
    if (prop === "propTypes") return deprecatedProps.TextPropTypes;
    return Reflect.get(...arguments);
  },
});

const objProx = new Proxy(StandardModule, {
  get(_, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    if (prop === "Image") {
      return imgProx;
    }
    if (prop === "Text") {
      return txtProx;
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

STEP 3:

* Edit `babel.config.js` file:

* add in `presets` array this string: `"module:metro-react-native-babel-preset"`.

* add in `plugins` array this array:

[

       "module-resolver",
       {
         root: ["."],
         resolvePath(sourcePath, currentFile) {
           if (
             sourcePath === "react-native" &&
             !(
               (
                 currentFile.includes("node_modules/react-native/") || // macos/linux paths
                 currentFile.includes("node_modules\\react-native\\")
               ) // windows path
             ) &&
             !(
               currentFile.includes("resolver/react-native/") ||
               currentFile.includes("resolver\\react-native\\")
             )
           ) {
             return path.resolve(__dirname, "resolver/react-native");
           }
           return undefined;
         },
       },
     ]

STEP 4: run expo r -c

tada CONGRATULATIONS, YOU ARE WELCOME winkbrazil

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

Usama-Saud · 2023-02-01T12:53:06Z

I was having the same error and was lucky to resolve it within a short time. In my case, I followed the following steps:

Install the patch-package by going to this website.

https://www.npmjs.com/package/patch-package

Install deprecated-react-native-prop-types –

npm install deprecated-react-native-prop-types

OR

yarn add deprecated-react-native-prop-types

Go to node_modules/react-native/index.js and change this starting from:

// Deprecated Prop Types get ColorPropType(): $FlowFixMe { invariant( false, "ColorPropType has been removed from React Native. Migrate to " + "ColorPropType exported from 'deprecated-react-native-prop-types'.", ); }, get EdgeInsetsPropType(): $FlowFixMe { invariant( false, "EdgeInsetsPropType has been removed from React Native. Migrate to " + "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.", ); }, get PointPropType(): $FlowFixMe { invariant( false, "PointPropType has been removed from React Native. Migrate to " + "PointPropType exported from 'deprecated-react-native-prop-types'.", ); }, get ViewPropTypes(): $FlowFixMe { invariant( false, "ViewPropTypes has been removed from React Native. Migrate to " + "ViewPropTypes exported from 'deprecated-react-native-prop-types'.", ); },

With this:

// Deprecated Prop Types get ColorPropType(): $FlowFixMe { return require("deprecated-react-native-prop-types").ColorPropType }, get EdgeInsetsPropType(): $FlowFixMe { return require("deprecated-react-native-prop-types").EdgeInsetsPropType }, get PointPropType(): $FlowFixMe { return require("deprecated-react-native-prop-types").PointPropType }, get ViewPropTypes(): $FlowFixMe { return require("deprecated-react-native-prop-types").ViewPropTypes },

Save patch by running this command

npx patch-package react-native

Rebuild App

Note: If you upgrade react-native, you will need to reapply this patch.

tult-rk · 2023-02-02T07:08:35Z

@SiddigHope

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

path is missing. add

var path = require('path')

@niloriver after adding the resolvePath my alias is stopped working too, so i update the resovelvePath with:

    resolvePath(sourcePath, currentFile, opt) {
        var path = require('path')
        if (
          sourcePath === 'react-native' &&
          !(
            (
              currentFile.includes('node_modules/react-native/') || // macos/linux paths
              currentFile.includes('node_modules\\react-native\\')
            ) // windows path
          ) &&
          !(
            currentFile.includes('resolver/react-native/') ||
            currentFile.includes('resolver\\react-native\\')
          )
        ) {
          return path.resolve(__dirname, 'resolver/react-native')
        }
        var resolve = require('babel-plugin-module-resolver').resolvePath(sourcePath, currentFile, opt)
        return resolve
      },

jongha · 2023-02-05T08:47:19Z

I had this problem with lottie-react-native. Resolved after library upgrade. I recommend checking the other libraries you depend on.

Eshtreeli · 2023-03-02T15:02:29Z

i face the same issue i tried every solution even i tried developers on freelancer no one could know what is wrong idont use PropTypes any where after i have done the react native index file solution another problem showed TypeError: undefined is not an object (evaluating '_reactNative.Text.propTypes.style') i am really frustrated please any help!

grkemtneri · 2023-04-13T14:27:42Z

@SiddigHope

it gives and error saying "app-root/App.js: path is not defined"
how can I fix this?

path is missing. add

var path = require('path')

@niloriver after adding the resolvePath my alias is stopped working too, so i update the resovelvePath with:

    resolvePath(sourcePath, currentFile, opt) {
        var path = require('path')
        if (
          sourcePath === 'react-native' &&
          !(
            (
              currentFile.includes('node_modules/react-native/') || // macos/linux paths
              currentFile.includes('node_modules\\react-native\\')
            ) // windows path
          ) &&
          !(
            currentFile.includes('resolver/react-native/') ||
            currentFile.includes('resolver\\react-native\\')
          )
        ) {
          return path.resolve(__dirname, 'resolver/react-native')
        }
        var resolve = require('babel-plugin-module-resolver').resolvePath(sourcePath, currentFile, opt)
        return resolve
      },

TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[4], "C:\Users\gorke\Desktop\projects\mobile\resolver\react-native").UIManager.getViewManagerConfig')

I started getting such an error, how can I solve it?

version 0.71.6

ArcherLucky · 2023-05-22T08:26:29Z

Just look at the log and stacktraces

Summary: ## Overview When I implemented `ignoreLogs` it was originally just to move `console.ignoreYellowBox` over to LogBox. When I did that, I also added filtering for console messages too. My thought process was: Developers probably don't want to configure hiding logs twice, so the LogBox method can handle both. This was a mistake. We should never hide console errors and warnings, because it completely silences important feedback to the users such as deprecation warnings. These issues should be fixed, not silenced, and since adding the silencing behavior it's clear that this feature is being abused to ignore legitimate warnings that need address. Issue facebook#33557 is a great reason why - the correct fix for this is not to ignore the errors, it's to address the deprecation / removal of the API. Allowing an easy `ignoreLog` method to hide the problem made this migration much more painful. Thus, we're reverting back to the pre-logbox behavior of always showing console logs, even if they're ignored by LogBox in the app UI. Hopefully, this results in more of these issue being addressed instead of ignored. Changelog: [General] [Changed] - Do not filter errors/warnings from console Reviewed By: yungsters Differential Revision: D40724661 fbshipit-source-id: de3d2db1b0c32dee96acf92c9b1ca07ba0f4e218

yigitGoldtag · 2023-07-04T11:34:07Z

This is the solution for error/warning WORKS! But, looks like wrong way. Edit node_modules and run patch it?!

Why react-native doesn't import "deprecated" module by default in case it is installed?

Why expo-cli doesn't import "deprecated" module by default in case it is used by default template?

someone have another solution that not need to edit "node_modules" folder?
Hello everyone!
I would like to share my solution and hope it will be helpful for you. let me know if you know a better solution :)
We are needed following packages: https://www.npmjs.com/package/patch-package https://www.npmjs.com/package/deprecated-react-native-prop-types
Steps:

yarn add patch-package deprecated-react-native-prop-types

Set up patch package (ref to the doc above)

Open node_modules/react-native/index.js

Find // Deprecated Prop Types and replace deprecated types below with these:
// Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },
execute cmd from the project root: npx patch-package react-native

Let's try to find [project]/patches/react-native.patch

Congrats!

My patch file looks like this:
diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..4a640e3 100644
--- a/node_modules/react-native/index.js
+++ b/node_modules/react-native/index.js
@@ -435,32 +435,16 @@ module.exports = {
   },
   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'ColorPropType has been removed from React Native. Migrate to ' +
-        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ColorPropType;
   },
   get EdgeInsetsPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
-        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
   },
   get PointPropType(): $FlowFixMe {
-    invariant(
-      false,
-      'PointPropType has been removed from React Native. Migrate to ' +
-        "PointPropType exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').PointPropType;
   },
   get ViewPropTypes(): $FlowFixMe {
-    invariant(
-      false,
-      'ViewPropTypes has been removed from React Native. Migrate to ' +
-        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
-    );
+    return require('deprecated-react-native-prop-types').ViewPropTypes;
   },
 };

Thank you bro , it works for me <3

* ViewPropTypes were removed from react-native when from 0.68.0 * reference link: facebook/react-native#33557

tech-shamp · 2024-03-08T06:53:05Z

how i solved the same problem. WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. i got this error after install react-native-camera The course of my solution, I went to the node-modules folder -> the react-native-camera folder and found the main file RNCamera.js find ViewPropTypes import

import { findNodeHandle, Platform, NativeModules, requireNativeComponent, View, ViewPropTypes, ActivityIndicator, Text, StyleSheet, PermissionsAndroid, } from 'react-native';

delete import this file from 'react-native' and create new import import {ViewPropTypes} from 'deprecated-react-native-prop-types';

and its work good

as I understand it, this is a mistake of the old npm packages, and if the project is alive, then the developers fix it in new versions. And maybe this error will go away when you update the package to a newer one.

I updated all library files having ViewPropTypes and PropTypes from "prop-types"
I changed my terminal directory to library folder (react-native-snap-carousel)
Problem I faced while updating was this package took so long to install. Might be my internet issue.

But it actually worked for me!

Thanks!!!

kodeandoec added the Needs: Triage 🔍 label Apr 3, 2022

This comment was marked as outdated.

Sign in to view

ianthetechie mentioned this issue Dec 5, 2022

Migrate from JS to TS maplibre/maplibre-react-native#4

Closed

sarahsporck mentioned this issue Jan 17, 2023

IGAPP-1061: Upgrade react and react native digitalfabrik/integreat-app#843

Merged

This was referenced Feb 21, 2023

chore/nowarnings Solve some of the warnings we have on LLM LedgerHQ/ledger-live#2732

Closed

support/nowarnings Address some of the warnings on LLM dev builds LedgerHQ/ledger-live#2733

Merged

madhus1025 mentioned this issue May 16, 2023

Migrated ViewPropTypes to deprecated-react-native-prop-types BigThinkcode/AdaptiveCards#119

Closed

pragadeeshk mentioned this issue May 24, 2023

Reactnative/release 2.2.34 BigThinkcode/AdaptiveCards#121

Merged

wjmoh-alticast added a commit to altimobility/react-native-check-box that referenced this issue Jul 17, 2023

Remove the dependency of "ViewPropTypes"

e011e64

* ViewPropTypes were removed from react-native when from 0.68.0 * reference link: facebook/react-native#33557

cortinico mentioned this issue Oct 3, 2023

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'., js engine: hermes #39772

Closed

CarlaHuichaman mentioned this issue Oct 17, 2023

UI DetalleArticulo italosky/TeloCambio#52

Merged

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. #33557

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. #33557

Comments

kodeandoec commented Apr 3, 2022

Description

Version

Output of npx react-native info

Steps to reproduce

Snack, code example, screenshot, or link to a repository

Adnan-Bacic commented Apr 5, 2022 • edited

wimil commented Apr 6, 2022

nibblesnbits commented Apr 7, 2022

Poplizal commented Apr 7, 2022

petrishevalexander commented Apr 7, 2022

viniibp commented Apr 7, 2022

This comment was marked as outdated.

nibblesnbits commented Apr 8, 2022

Gnative commented Apr 8, 2022 • edited

nibblesnbits commented Apr 8, 2022

Gnative commented Apr 8, 2022

This comment was marked as outdated.

nibblesnbits commented Apr 8, 2022 via email

PAAPII10 commented Apr 15, 2022

GitForAndrey commented Apr 17, 2022 • edited

hssrrw commented Apr 22, 2022

kockok commented Apr 26, 2022

Gnative commented Apr 26, 2022

jrhager84 commented May 2, 2022

yonitou commented May 6, 2022

Adnan-Bacic commented May 6, 2022

goxr3plus commented May 6, 2022 • edited

yonitou commented May 9, 2022

itorres-1 commented May 11, 2022 • edited

codeplaygoa commented May 11, 2022

FatmaMahmoud698 commented May 11, 2022

eduardoschneider commented Dec 7, 2022

omaryoussef commented Dec 7, 2022

qdanik commented Dec 9, 2022

vinaciotm commented Dec 12, 2022 • edited

vinaciotm commented Dec 12, 2022

iPachDev commented Jan 3, 2023

tiagomsmagalhaes commented Jan 3, 2023

laitlhadj commented Jan 5, 2023

niloriver commented Jan 12, 2023

tult-rk commented Jan 13, 2023 • edited

karimessouabni commented Jan 16, 2023

SiddigHope commented Jan 29, 2023

Usama-Saud commented Feb 1, 2023 • edited

tult-rk commented Feb 2, 2023

jongha commented Feb 5, 2023 • edited

Eshtreeli commented Mar 2, 2023

grkemtneri commented Apr 13, 2023 • edited

ArcherLucky commented May 22, 2023

yigitGoldtag commented Jul 4, 2023

tech-shamp commented Mar 8, 2024

Output of `npx react-native info`

Adnan-Bacic commented Apr 5, 2022 •

edited

Gnative commented Apr 8, 2022 •

edited

GitForAndrey commented Apr 17, 2022 •

edited

goxr3plus commented May 6, 2022 •

edited

itorres-1 commented May 11, 2022 •

edited

vinaciotm commented Dec 12, 2022 •

edited

tult-rk commented Jan 13, 2023 •

edited

Usama-Saud commented Feb 1, 2023 •

edited

jongha commented Feb 5, 2023 •

edited

grkemtneri commented Apr 13, 2023 •

edited