Invariant Violation: ViewPropTypes has been removed from React Native.

[BobDev1]

Description

Recently updated react to 18 version, and since that I'm not able to build my app. At first I've received "TypeError: dispatcher.useSyncExternalStore is not a function." and fixed by updating react-native to "0.69.0-rc.0" version. But now having these errors:

`ERROR  Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Version

0.69.0-rc.0

Output of npx react-native info

OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa) CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz Memory: 1.75 GB / 15.50 GB Shell: 5.0.17 - /bin/bash Binaries: Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node Yarn: Not Found npm: 8.7.0 - ~/.nvm/versions/node/v12.14.1/bin/npm Watchman: Not Found SDKs: Android SDK: Not Found IDEs: Android Studio: Not Found Languages: Java: 11.0.15 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: ^0.69.0-rc.0 => 0.69.0-rc.0 npmGlobalPackages: react-native: Not Found

Steps to reproduce

react-native run-android

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

No response

[cortinico]

Thanks for reporting this. It's tracked here also: https://github.com/reactwg/react-native-releases/discussions/21#discussioncomment-2680240

[chrisbobbe]

I think maybe the error is new in 10199b158138b8645550b5579df87e654213fe42 ? And a deprecation warning was added some time before that, in 3f629049ba9773793978cf9093c7a71af15e3e8d .

[cipolleschi]

Hi @BobDev1, is this issue still happening or can we consider the issue closed?

[ngondat97]

same issue

[incleaf]

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

[goguda]

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?

[CHANDRAMOHANnegi]

[psycheangel]

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;

      }

    }]

[Bilal-Abdeen]

Still an issue in 0.69.1. see my comments #33557

[ajp8164]

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;

      }

    }]

I'm interested in this solution but I'm not very familiar with how to use the module resolver. Could you please provide a sample complete solution with filename/locations? Would be very helpful! Thank you..

UPDATE:

I got the resolver implemented and running but it doesn't seem to be use the deprecated-react-native-prop-types. Still getting the following on app start.

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

UPDATE 2:

I removed the last check on the filtering 'if' statement "currentFile.includes("node_modules\react-native\") === false" and it stopped complaining about prop types. Now the complaint is..

TypeError: undefined is not an object (evaluating '_reactNative.StyleSheet.create')

[lorenzogatti]

I'm having this issue on iOS (not Android) with library @alessiocancian/react-native-actionsheet which doen't even import prop-types but contains a TypeScript source file. I suspect many other libraries are in the same situation.

• Can the babel-plugin-module-resolver trick affect React's internal checks, or only actual imports of ViewPropTypes etc.?
• How can prop type checks upon module import be disabled? I guess the use of Typescript or some project-level configuration in react-native-actionsheet is responsible, but where is the documentation?

[psycheangel]

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.

[CaptainJeff]

@psycheangel

Thanks for the help! Would you mind explaining where that first code segment is getting saved where you sub out the missing prop types and how its getting referenced by the module-resolver?

My understanding was saving it in resolver/react-native.js

Then

[
  "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")
      }

      return undefined
    }
  }
]

In babel.config.js

And in the .babelrc having an

"extends": "./babel.config.js"

Is this correct?

[psycheangel]

@CaptainJeff

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

[shreypdev]

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

[hicath]

@ajp8164 Hi, I'm facing the exact same issue like you. have you resolved it already?

[psycheangel]

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

I create a readme file in the GitHub example link

[jpike88]

I tried the link, but it it broke my alias configuration. Looks like I'll need to keep looking

[ngondat97]

I tried the link, but it it broke my alias configuration. Looks like I'll need to keep looking

same issue

[thanhdevapp]

@psycheangel not working with alias

[thanhdevapp]

@jpike88 Have you found a solution to work with alias?

[jpike88]

I used 'deprecated-react-native-prop-types' instead

[esegebart]

Can you tell me what files and where this is written? I am a little confused where this code should go. Thank you.

[jpike88]

you'd use it wherever you're importing the ViewPropTypes property, usually you're importing it directly from 'react-native', so you'd just replace 'react-native' with 'deprecated-react-native-prop-types'. If the ViewPropTypes are being imported by a 3rd party library you'll need to fork that library and fix it accordingly

[imekinox]

I tried @psycheangel solution here, It fixes the deprecated dependencies issues, but introduces new issues on different external libraries and on iOS.

I updated the resolver to work on more use cases:

resolvers/react-native/index.js

import PropTypes from "prop-types";
import * as StandardModule from 'react-native';

// Text.propTypes is deprecated too... react-native-multiple-select uses this as of Jul/18/2022
StandardModule.Text.propTypes = PropTypes.shape(StandardModule.TextStyle);

const deprecatedProps = {
  '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'),
};

// Had to use a proxy because ...StandardModule made think react-native that all modules were 
// being used and was triggering some unnecessary validations / native dep checks. 
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
  get(obj, prop) {
    if (prop in deprecatedProps) {
        return deprecatedProps[prop];
    }
    return StandardModule[prop];
  }
}); 

module.exports = objProx;

babel.config.js:

Added a replace on the currentFile path so it works across Unix / windows machines.

    ["module-resolver", {
      "root": ["."],
      resolvePath(sourcePath, currentFile, opts) {
        // Replace unix paths to windows paths... 
        const currFile = currentFile.replace(/\//g,'\\');
        if(sourcePath === 'react-native' && currFile.includes("node_modules\\react-native\\") === false && currFile.includes('resolver\\react-native\\') === false){
          // console.log('testing',sourcePath, currentFile)
          return  path.resolve(__dirname, 'resolver/react-native');
        }
        return undefined;
      }
    }],

With these updates, I was able to run our app on RN 0.69.1 and 0.69.2, with Android and iOS working.

Thank you @psycheangel for the help!

[goguda]

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:

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

5. 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.

[psycheangel]

I tried @psycheangel solution here, It fixes the deprecated dependencies issues, but introduces new issues on different external libraries and on iOS.

I updated the resolver to work on more use cases:

resolvers/react-native/index.js

import PropTypes from "prop-types";
import * as StandardModule from 'react-native';

// Text.propTypes is deprecated too... react-native-multiple-select uses this as of Jul/18/2022
StandardModule.Text.propTypes = PropTypes.shape(StandardModule.TextStyle);

const deprecatedProps = {
  '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'),
};

// Had to use a proxy because ...StandardModule made think react-native that all modules were 
// being used and was triggering some unnecessary validations / native dep checks. 
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
  get(obj, prop) {
    if (prop in deprecatedProps) {
        return deprecatedProps[prop];
    }
    return StandardModule[prop];
  }
}); 

module.exports = objProx;

babel.config.js:

Added a replace on the currentFile path so it works across Unix / windows machines.

    ["module-resolver", {
      "root": ["."],
      resolvePath(sourcePath, currentFile, opts) {
        // Replace unix paths to windows paths... 
        const currFile = currentFile.replace(/\//g,'\\');
        if(sourcePath === 'react-native' && currFile.includes("node_modules\\react-native\\") === false && currFile.includes('resolver\\react-native\\') === false){
          // console.log('testing',sourcePath, currentFile)
          return  path.resolve(__dirname, 'resolver/react-native');
        }
        return undefined;
      }
    }],

With these updates, I was able to run our app on RN 0.69.1 and 0.69.2, with Android and iOS working.

Thank you @psycheangel for the help!

thanks for the addition, nice idea. @imekinox can you answer on the return object why not use reflect?

[imekinox]

@psycheangel Haven't used Reflect, can you point me into how to use it for this?

[psycheangel]

@psycheangel Haven't used Reflect, can you point me into how to use it for this?

based on my understanding needed the reflect instance to prevent method stub issue

import * as StandardModule from 'react-native';

const deprecatedProps = {
  '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'),
};

// Had to use a proxy because ...StandardModule made think react-native that all modules were 
// being used and was triggering some unnecessary validations / native dep checks. 
// This prevents that from happening.
const objProx = new Proxy(StandardModule, {
  get(obj, prop) {
    if (prop in deprecatedProps) {
        return deprecatedProps[prop];
    }
    return Reflect.get(...arguments);
  }
}); 

module.exports = objProx;

[xiaoketeng]

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

[jpike88]

@xiaoketeng use deprecated-react-native-prop-types

[349989153]

@xiaoketeng use deprecated-react-native-prop-types

What if the issue was caused by dependencies?

[jpike88]

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

[Chicooz]

is there a way to get this fixed ?

[Chicooz]

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

[MohammadAyazSheikh]

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:

4. Save and run npx patch-package react-native to save the patch.
5. 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

[goguda]

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:

4. Save and run npx patch-package react-native to save the patch.
5. 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.

[MohammadAyazSheikh]

still not working.

[luizrcs]

@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: https://github.com/facebook/react-native/issues/26687#issuecomment-643281500.

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.

[MohammadAyazSheikh]

@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" } }

[luizrcs]

@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.

[desenvolvimento02jocc]

@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" } }

+1, having same issue and the call stack doesnt even tells where it comes from.

[luizrcs]

@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" } }

+1, having same issue and the call stack doesnt even tells where it comes from.

Try searching on node_modules and you'll quickly find out some library that hasn't been updated. Alternatively, if possible, you may use patch-package to replace the old references with the ones on deprecated-react-native-prop-types.

[KianooshSoleimani]

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:

4. Save and run npx patch-package react-native to save the patch.
5. 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.

Thank you... this work for me but its temproraily 👍

[HughxDev]

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;
   },
 };

[luizrcs]

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.

[goguda]

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;
   },
 };

Can also confirm working on 0.69.4 🙏

[TaheriSDE]

react-native start —reset-cache

Thank you it works for me

[TaheriSDE]

@KianooshSoleimani Could u plz explain why it's temporarily? Thx

[mukti107]

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 {};
  },
});