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

I can recommend doing the steps outlined in this github discussion.

Steps

1. Install patch-package, this will later be used to make the changes more persistent.

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. Now you have to hack the node_modules. Go to node_modules/react-native/index.js starting around line 436 and change this:

   // 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'.",
    );
   },
   

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

4. Run npx patch-package react-native to save the patch.

5. Rebuild the app.

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.

Props to goguda for providing this answer.

I had the same error I followed the following steps and I resolved it. It arises because react-native has removed the view prop types from the library but still some external modules require the use of it.

1. Run the command in the terminal

npm i deprecated-react-native-prop-types@2.2.0

2. Go to the node modules and find the module that you are using in my case it was "react-native-camera"

3. Navigate into the src folder of the module file (in my case it was in RNCamera.js) and look for

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

In the following code remove the ViewPropTypes and paste the following command below this

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

save the file and run it again, Hope it helps <3

I had the same error using react-native-camera. I fix it by installing npm i deprecated-react-native-prop-types@2.2.0 and replacing in node_modules/react-native-camera

all imports in files.

import { ViewPropTypes } from 'react-native'; 

for

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

I had the same issue after upgrading to the new RN v0.69. Changing node_modules/react-native-camera would solve the problem locally. However, we know that when the node dependencies need to be installed from scratch - in a CI/CD process for example - the changes at 3rd party library need to be done over again. So, a better solution I suggest is to intercept the react-native-camera component at build runtime level using the babel-plugin-module-resolver as suggested here https://github.com/psycheangel/deprecated-with-module-resolver. I did another way because this solution did not work for me since it's more generic and got conflict with other stuffs I have on my project. Still using the same babel resolver plugin but to address the specific problem with react-native-camera component, this is the way I did based on the above solution by psycheangel:

Step 1

Install the babel resolver plugin and the turn around dependency:

npm install --save-dev babel-plugin-module-resolver deprecated-react-native-prop-types

or

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

Step 2

create resolver/react-native/index.js with this code:

import * as ReactNative from 'react-native'
import * as DeprecatedPropTypes from 'deprecated-react-native-prop-types'

delete ReactNative['ColorPropType']
delete ReactNative['EdgeInsetsPropType']
delete ReactNative['ImagePropTypes']
delete ReactNative['PointPropType']
delete ReactNative['TextInputPropTypes']
delete ReactNative['TextPropTypes']
delete ReactNative['ViewPropTypes']

module.exports = {
  ...ReactNative,
  ...DeprecatedPropTypes,
}

Step 3

add module resolver plugin config to babel.config.js:

const path = require('path')
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        resolvePath(sourcePath, currentFile) {
          if (
            sourcePath === 'react-native' &&
            currentFile.includes('react-native-camera/src/RNCamera.js')
          ) {
            console.log('resolver', sourcePath, currentFile)
            return path.resolve(__dirname, 'resolver/react-native')
          }
        },
      },
    ],
  ],
}

I had the same error using react-native-snap-carousel. I fix it by replacing in node_modules/react-native-snap-carousel

Check All files and change this import

import { ViewPropTypes } from 'react-native'; 

with this and this error gone

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