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: reactwg/react-native-releases#21 (comment)

[chrisbobbe]

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

[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

[maznanfb]

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?

[nes123]

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.

[giovabiancia]

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

[ajp8164]

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

[CCB-cerivera]

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.

[CCB-cerivera]

@MohammadAyazSheikh did you manage to solve it ?

[CCB-cerivera]

@mukti107 you can place a complete example that has worked for you, when I run your example it returns the following message.

[MursiDirect]

same issue here version 0.69.4

[evgeniy-skakun]

any news ?

[MohammadAyazSheikh]

@MohammadAyazSheikh did you manage to solve it ?

no 😐

[klcantrellsep]

Just wanted to share our experience regarding this issue in case it helps anyone (this probably won't help people who are stuck with old dependency versions).

We were seeing this error and simply needed to update 2 of our dependencies (expo from 44.0.6 to 45.0.6 and expo-barcode-scanner from 11.2.1 to 11.3.0) and the issue went away for us. If there's anyone new to this issue, it would be worth checking into updating your dependencies before trying out any of the patch solutions suggested in this thread.

[ijhar8]

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

it doesn't seems working .

babel.config

var path = require('path');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
sourceMaps: 'inline',

plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
"react-native-reanimated/plugin",

[
  'module-resolver',
  {
    root: ['.'],
    extension:['.ts','.tsx','.js'],
    resolvePath(sourcePath, currentFile, opts) {
      // if(sourcePath === 'react-native' && currentFile.includes("node_modules\\react-native\\") === false && currentFile.includes('resolver\\react-native\\') === false){
      //   console.log('testing',sourcePath, currentFile)
      //   return  path.resolve(__dirname, 'resolver/react-native');
      // }
      console.log('in resoleve');

      // macos/linux paths
      if (
        sourcePath === 'react-native' &&
        currentFile.includes('node_modules/react-native/') === false &&
        currentFile.includes('resolver/react-native/') === false
      ) {
        console.log('testing', sourcePath, currentFile);
        return path.resolve(__dirname, 'resolver/react-native');
      }
      console.log('not found');
      /**
       * The `opts` argument is the options object that is passed through the Babel config.
       * opts = {
       *   extensions: [".js"],
       *   resolvePath: ...,
       * }
       */
      return undefined;
    },
  },
],

],
};

[CCB-cerivera]

@mukti107 your solution sends the following error message, you know how to fix it:

_reactNative.TextInput.propTypes.style

[rickhanlonii]

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

There should be a stack trace and/or component stack trace that points to the component/library causing the issue. If you think it's in your application, and not a library, you could grep for all usages of the deprecated prop types.

If you can share a repo, I'm happy to take a look to help debug what's using the PropTypes.

[Julien-Molina]

If I understand well the revolver solution only works for babel so people using hermes still have the issue. Anyone knows the equivalent of that solution on hermes ?

[rahmanharoon]

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.

Did you solve this issue

[Julien-Molina]

For me I used the "temporary" solution with patch-package : #33734 (comment)

The solution with the resolver only works if you use babel, but if you use hermes like me this solution will not have any effect. So the patch-package can be temporary solution will waiting for the dependencies to publish an update.

[teamseamive]

We were using RN 0.67.2 with React 17.0.2 and upgraded to RN 0.69.4 and React 18.0.0 and got this error even with Hermes.

What would be the easiest fix for this?

[Swampi995]

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.

[CCB-cerivera]

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.

[CCB-cerivera]

In my case, the app is working but the fetch only works after about 10 minutes, someone will know what's going on.

[CCB-cerivera]

Fixed issue for 69.4 and the fetch() issue is because it was using react-native-cli and should be removed.

[traviswimer]

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

[CCB-cerivera]

@ha-abdou please use the above solution it will work for you without having to patch.

#33734 (comment)

[rickhanlonii]

Locking this to prevent confusion as the recommended fix is getting buried.

The recommended fix is [here](#33734 (comment).

[rickhanlonii]

Hey all, just to re-iterate, 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.

Improving the error reporting

We've heard feedback that it can be hard to find the source of the component that is using the deprecated types. We've shipped two fixes to address this issue.

Code frames for the source of the issue

First, we added better stack frame collapsing to internal React Native frames so that LogBox shows you where the type is being used:

This fix is available in 0.70, but you may need to bump the CLI version with the instructions here.

Reporting crashes in the app

Second, we found an issue where propTypes errors could crash the app without reporting any errors other than the console. This makes it really difficult to find which component or library are using propTypes because the console doesn't report the stack trace.

This is being addressed by #34649, which will display the error in LogBox instead of the white screen. This will land in the next release a the latest, but as a workaround you can add:

require('../ReactNative/AppRegistry');

To line 47 in /node_modules/react-natve/Libraries/Core/InitializeCore.js as done here.

Summary

The correct fix here is to switch to deprecated-react-native-prop-types or a type system like Typescript.

Please do not patch or ignore warnings to work around this issue.

If you have any trouble finding the source of the prop type usage, please file a new issue with repro steps so we can help you find the source and fix the error reporting to make it easier to find the source.