it’s really unprofessional when someone just decides to break up the whole react-native community because he decided to deprecate a functionality that he doesn’t like

Same issue here after upgrading to 0.69, there are a lot of external libraries still using ViewPropTypes. Perhaps an unpopular opinion, but maybe it’s too early to deprecate ViewPropTypes completely?

Nice discussion going on here, inspired me to implement a workaround in our app using patch-package.

1. Install patch-package into your project, as per the instructions.

2. Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.

3. The invariant seems to be enforced in node_modules/react-native/index.js, starting at line 436:

So, change these lines to return the corresponding Prop Types from deprecated-react-native-prop-types instead:

1. Save and run npx patch-package react-native to save the patch.

2. Rebuild and the app should launch.

Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.

Hey all, as mentioned in https://github.com/facebook/react-native/issues/33557, back in 2018 we started to remove PropTypes from React Native. Last year, in 0.68 we introduced a deprecation warning which notified users that the change is coming, and in 0.69 we removed the PropTypes entirely…

Because of this it is not recommended to ignore the warning as some comments above suggest (I’ve hidden those comments as outdated to prevent confusion). If you ignore the warning then in a future version you will hit issues like https://github.com/facebook/react-native/issues/33734 when we fully remove the deprecated code.

It’s also not recommend to use patch-package on the React Native file because this will only mask the issue.

Recommended Fix

The recommended fix is to switch from PropTypes to a type system like TypeScript.

If you need to continue using PropTypes, the fix is to find the code that is using PropTypes and switch the import from:

import { ViewPropTypes } from 'react-native';

to:

import { ViewPropTypes } from 'deprecated-react-native-prop-types';

Sometimes, a library you depend on may be using the PropTypes. In that case, it’s recommended to submit an issue or PR to the library and/or update to the latest version. In extreme cases (like the library you’re using is unmaintained) you may need to fork the library, or use patch-package for that library itself to replace the types until it’s fixed upstream.

This is a big issue for anyone that wants to upgrade react-native. It will be great if we can find a workaround, as going manually and looking for the hundreds of places in which a 3rd party package requires a correction, and patching the correction, is just not feasible.

Hey all, as mentioned in #33557, back in 2018 we started to remove PropTypes from React Native. Last year, in 0.68 we introduced a deprecation warning which notified users that the change is coming, and in 0.69 we removed the PropTypes entirely…

Because of this it is not recommended to ignore the warning as some comments above suggest (I’ve hidden those comments as outdated to prevent confusion). If you ignore the warning then in a future version you will hit issues like #33734 when we fully remove the deprecated code.

It’s also not recommend to use patch-package on the React Native file because this will only mask the issue.

Recommended Fix

The recommended fix is to switch from PropTypes to a type system like TypeScript.

If you need to continue using PropTypes, the fix is to find the code that is using PropTypes and switch the import from:

import { ViewPropTypes } from 'react-native';

to:

import { ViewPropTypes } from 'deprecated-react-native-prop-types';

Sometimes, a library you depend on may be using the PropTypes. In that case, it’s recommended to submit an issue or PR to the library and/or update to the latest version. In extreme cases (like the library you’re using is unmaintained) you may need to fork the library, or use patch-package for that library itself to replace the types until it’s fixed upstream.

Any suggestion how to know which dependencies were affected by this issue?

Same here after bumping up to “0.69.0”

System:
    OS: macOS 12.1
    CPU: (10) x64 Apple M1 Max
    Memory: 636.61 MB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 3.1.0 - ~/Projects/toss-vietnam-app/node_modules/.bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
    Watchman: Not Found
  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: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8139111
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Still an issue in 0.69.1. see my comments #33557

There is no easy fix for this. It’s a problem in react-native library. How can this be closed? You have to make a lot of weird shady changes to your code so you can run it.

Hi,

this issue can be solved using babel-plugin-module-resolver

you can alias react-native module, with example like bellow

import * as StandardModule from 'react-native';

// And let's stub out everything that's missing!


delete StandardModule['ViewPropTypes'];

delete StandardModule['ColorPropType'];

delete StandardModule['EdgeInsetsPropType'];

delete StandardModule['PointPropType'];


module.exports = {

    ...StandardModule,

    get ViewPropTypes(){

        return require('deprecated-react-native-prop-types/DeprecatedViewPropTypes');

    },

    get ColorPropType(){

        return require('deprecated-react-native-prop-types/DeprecatedColorPropType');

    },

    get EdgeInsetsPropType(){

        return require('deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType')

    },

    get PointPropType(){

        return require('deprecated-react-native-prop-types/DeprecatedPointPropType');

    }

}

saved the code to javascript file to use in babel config, and you need to set up a proper resolver for allowlist/blocklist certain library that can result in a conflicting file. for the example see bellow,

 ["module-resolver", {

      "root": ["."],

      resolvePath(sourcePath, currentFile, opts) {

        if(sourcePath === 'react-native' && currentFile.includes('node_modules') && currentFile.includes("react-native-gesture-handler") === false  && currentFile.includes("node_modules\\react-native\\") === false){

     

          return  path.resolve(__dirname, 'resolver/react-native');

        }

        /**

         * The `opts` argument is the options object that is passed through the Babel config.

         * opts = {

         *   extensions: [".js"],

         *   resolvePath: ...,

         * }

         */

        return undefined;

      }

    }]

Created a file rn-polyfill-depricated-proptypes.js, and imported at top of index.js. Solved the issue for me

you may also change the get function to return from deprecated-react-native-prop-types

/**
*File:  rn-polyfill-depricated-proptypes.js
**/
const reactnative = require('react-native');

Object.defineProperty(reactnative, 'ColorPropType', {
  configurable: true,
  get() {
    return {};
  },
});

Object.defineProperty(reactnative, 'EdgeInsetsPropType', {
  configurable: true,
  get() {
    return {};
  },
});

Object.defineProperty(reactnative, 'PointPropType', {
  configurable: true,
  get() {
    return {};
  },
});

Object.defineProperty(reactnative, 'ViewPropTypes', {
  configurable: true,
  get() {
    return {};
  },
});

For those who don’t use hermes, you can solve the _reactNative.textInput.propTypes.style error using the method of @mukti107 and @psycheangel only that I have added a new option that has neither of the 2 forms.

They must create a file in the root with the name they like in my case rn-polyfill-depricated-proptypes.js and they will place it in the index.js of the project at the top like this

after this add the following to the created file

` /** *File: rn-polyfill-depricated-proptypes.js **/

const StandardModule = require(‘react-native’); const dpProps = require(‘deprecated-react-native-prop-types’);

const txtImputProx = new Proxy(StandardModule.TextInput, { get(obj, prop) { if (prop === ‘propTypes’) return dpProps.TextInputPropTypes; return Reflect.get(…arguments); }, });

Object.defineProperty(StandardModule, ‘ColorPropType’, { configurable: true, get() { return dpProps.ColorPropType; }, });

Object.defineProperty(StandardModule, ‘EdgeInsetsPropType’, { configurable: true, get() { return dpProps.EdgeInsetsPropType; }, });

Object.defineProperty(StandardModule, ‘PointPropType’, { configurable: true, get() { return dpProps.PointPropType; }, });

Object.defineProperty(StandardModule, ‘ViewPropTypes’, { configurable: true, get() { return dpProps.ViewPropTypes; }, });

Object.defineProperty(StandardModule, ‘TextPropTypes’, { configurable: true, get() { return dpProps.TextPropTypes; }, });

Object.defineProperty(StandardModule, ‘TextInputPropTypes’, { configurable: true, get() { return dpProps.TextInputPropTypes; }, });

Object.defineProperty(StandardModule, ‘TextInput’, { configurable: true, get() { // return dpProps.TextInputPropTypes; return txtImputProx; }, });

// Object.defineProperty(StandardModule, ‘TextStylePropTypes’, { // configurable: true, // get() { // return dpProps.TextInputPropTypes; // }, // });

// Object.defineProperty(StandardModule, ‘ImagePropTypes’, { // configurable: true, // get() { // return require(‘deprecated-react-native-prop-types/DeprecatedImagePropType’); // }, // });

// Object.defineProperty(StandardModule, ‘ImageStylePropTypes’, { // configurable: true, // get() { // return require(‘deprecated-react-native-prop-types/DeprecatedImageStylePropTypes’); // }, // });

// Object.defineProperty(StandardModule, ‘ViewStylePropTypes’, { // configurable: true, // get() { // return dpProps.ViewPropTypes; // }, // });

// console.log("StandardModule–> ", StandardModule.ColorPropType); `

This way it will work for them and the app will run perfectly, but in my case FETCH() doesn’t work for me, does anyone have an idea why fetech doesn’t work in react-native 69.4

very thankful.

I hope the contribution helps you.

Here is the diff for @goguda’s solution. You can just paste this into a file called react-native+0.69.3.patch so you don’t have to copy the screenshot edits manually:

diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..1bc8c9d 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;
   },
 };
 

Don’t forget to mention it must be inside a patches folder and you need the patch-package dependency for it to run automatically on every yarn/npm install command.

Here is the diff for @goguda’s solution. You can just paste this into a file called react-native+0.69.3.patch so you don’t have to copy the screenshot edits manually:

diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
index d59ba34..1bc8c9d 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;
   },
 };
 

Same problem, just downgrade and wait for someone to fix it

You’ll need to either convince the maintainer to fix it, or fork the dependency and fix it. There’s no other way to remove that error

Hi,

I use babel-plugin-module-resolver based on experience dealing with the same issue to ‘overrides’ certain native components inside the react-native package which not working in web implementation (react-native-web).

@ajp8164 Based on my setup of a project the resolver needs to be excluded from node_modules/react-native, because it will break the importing use inside the react-native package. you only need to replace other packages/project files besides the node_modules/react-native to use the resolver file when importing the react-native package.

@CCB-cerivera It would be nice if that polyfill module just implemented your solution.

It’s much simpler than using babel or any of the other solutions, and should work everywhere. Hopefully most dependencies will have this problem fixed soon, but your code could be a useful NPM package if you’re feeling ambitious.

Either way, it’s working well for me. Thanks!

@MohammadAyazSheikh did you manage to solve it ?

no 😐

same issue here version 0.69.4

Have you resolved this problem, other than patching? I tried the patch option but it returns the following:

I have already done cd android && gradlew clean react-native start --reset-cache npm cache clean --force

and it keeps sending the same error.

I would like to use version 69.4 but I have many third party libraries that use propsType so it is not working.

I’ve been using this resolver solution for a while and it works very well. No intrusion.

@MohammadAyazSheikh I was literally having this issue a few minutes ago. It is really not related to the issue in this page, but this thread describes many reasons for it: #26687 (comment). In my case, it was a race condition of some old library (that I haven’t identified, nor do I intend to) and AppRegistry is initialized way too late.

i was my updating my existing project from react native 0.68.2 to 0.69.3 i correctly reinstalled all the packages and replace source file in the new project after moving to new version i was getting errors related to Invariant Violation: ViewPropTypes has been removed from React Native and Invariant Violation: Module AppRegistry is not a registered callabel module after following all the instructions as described by @goguda invariant Violation: ViewPropTypes has been removed from React Native error has gone but it is throwing new error now TypeError: undefined is not an object (evaluating ‘_reactNative.TextInput.propTypes.style’) i’m completely lost why i’m getting all these errors here my package.json file

{ “name”: “thenextcut”, “version”: “0.0.1”, “private”: true, “scripts”: { “android”: “react-native run-android”, “ios”: “react-native run-ios”, “start”: “react-native start”, “test”: “jest”, “lint”: “eslint .”, “postinstall”: “patch-package” }, “dependencies”: { “@gorhom/bottom-sheet”: “^4.3.2”, “@react-native-async-storage/async-storage”: “^1.17.6”, “@react-native-community/geolocation”: “^2.1.0”, “@react-native-community/netinfo”: “^9.0.0”, “@react-native-community/push-notification-ios”: “^1.10.1”, “@react-native-masked-view/masked-view”: “^0.2.6”, “@react-navigation/bottom-tabs”: “^6.3.1”, “@react-navigation/material-top-tabs”: “^6.2.1”, “@react-navigation/native”: “^6.0.10”, “@react-navigation/stack”: “^6.2.1”, “deprecated-react-native-prop-types”: “^2.3.0”, “lottie-ios”: “^3.2.3”, “lottie-react-native”: “^5.1.3”, “moment”: “^2.29.3”, “moment-range”: “^4.0.2”, “react”: “18.0.0”, “react-native”: “0.69.3”, “react-native-animatable”: “^1.3.3”, “react-native-calendar-strip”: “^2.2.6”, “react-native-calendars”: “^1.1275.0”, “react-native-chart-kit”: “^6.12.0”, “react-native-confirmation-code-input”: “^1.0.4”, “react-native-date-picker”: “^4.2.2”, “react-native-flatlist-alphabet”: “^1.1.2”, “react-native-geocoding”: “^0.5.0”, “react-native-geolocation-service”: “^5.3.0-beta.4”, “react-native-gesture-handler”: “^2.4.2”, “react-native-image-crop-picker”: “^0.37.3”, “react-native-image-picker”: “^4.8.4”, “react-native-linear-gradient”: “^2.5.6”, “react-native-maps”: “^0.31.1”, “react-native-open-maps”: “^0.4.0”, “react-native-pager-view”: “^5.4.24”, “react-native-paper”: “^4.12.1”, “react-native-push-notification”: “^8.1.1”, “react-native-ratings”: “^8.1.0”, “react-native-reanimated”: “^2.8.0”, “react-native-safe-area-context”: “^4.3.1”, “react-native-screens”: “^3.13.1”, “react-native-simple-toast”: “^1.1.3”, “react-native-svg”: “^12.3.0”, “react-native-tab-view”: “^3.1.1”, “react-native-toast-notifications”: “^3.3.0”, “react-native-uuid”: “^2.0.1”, “react-native-vector-icons”: “^9.1.0”, “react-redux”: “^8.0.2”, “redux”: “^4.2.0”, “redux-logger”: “^3.0.6”, “redux-thunk”: “^2.4.1” }, “devDependencies”: { “@babel/core”: “^7.12.9”, “@babel/runtime”: “^7.12.5”, “@react-native-community/eslint-config”: “^2.0.0”, “babel-jest”: “^26.6.3”, “eslint”: “^7.32.0”, “jest”: “^26.6.3”, “metro-react-native-babel-preset”: “^0.70.3”, “react-test-renderer”: “18.0.0” }, “jest”: { “preset”: “react-native” } }

Yes, I also had this problem with the Text props. In my case, if I’m not mistaken, it was because of react-native-credit-card-input, which is just way too old. I think the error contains the file where it happened. If so, I don’t think you should find a workaround to make the library work and, instead, look for a new one, updated more often.

Nice discussion going on here, inspired me to implement a workaround in our app using patch-package.

1. Install patch-package into your project, as per the instructions.
2. Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.
3. The invariant seems to be enforced in node_modules/react-native/index.js, starting at line 436:

So, change these lines to return the corresponding Prop Types from deprecated-react-native-prop-types instead:

1. Save and run npx patch-package react-native to save the patch.
2. Rebuild and the app should launch.

Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.

i was facing the same issue after following all these instructions i’m getting new error related to _reactNative.TextInput.propTypes.style

my project info

Try running react-native start —reset-cache and rebuilding.

有什么好的解决办法么，我也遇到了，升级RN，从0.64到0.69.1会报这个错

@psycheangel will you be able to explain exactly what needs to be changed? Thanks!

I create a readme file in the GitHub example link

@CaptainJeff

I create an example GitHub repo using the standard init project, here is the link