Fix: ViewPropTypes has been removed from React Native

In most cases the error: "ViewPropTypes has been removed from React Native" occurs in situations where you upgraded your project to React Native version >0.70. In the post you will find a proper solution for this problem and we explain what the cause is of this problem.

Related problems

Instead of the above error you can get the following errors:

• "EdgeInsetsPropType has been removed from React Native"
• "PointPropType has been removed from React Native"
• "ColorPropType has been removed from React Native"

This post helps you solve this problem too!

Problem cause

In the new version of React Native, the ViewPropTypes, EdgeInsetsPropType, PointPropType and ColorPropType got deprecated and are removed. However, if you use these types in the code of your app, the error will occur. But, in most cases, it is caused by outdated dependencies (in your node_modules), that make use of these types. Even dependencies that cannot be updated.

Solution 1

The first thing, and best thing you can try is to update all your dependencies to the latest version. This can be done by inspecting your package.json in the root of your project and verify all versions. Use yarn to update the old versions to the latest.

Solution 2

If solution 1 does not help you out. You probably have dependencies that require an older version of React Native. To downgrade your React Native version is a hassle and not the best solution. So we skip that for now.

What you have to do is, follow the next steps:

Step 1 - Install the following dependency: deprecated-react-native-prop-types.

1yarn add deprecated-react-native-prop-types

Step 2 - Persist the package modification

Source code in the modules directory will be overwritten when yarn install or yarn add ... is run again. This can be prevented by installing the patch-package dependency:

1yarn add patch-package

Step 3 - Now modify the react-native source code in the file node_modules/react-native/index.js

 1// Deprecated Prop Types
 2get ColorPropType(): $FlowFixMe {
 3  invariant(
 4    false,
 5    "ColorPropType has been removed from React Native. Migrate to " +
 6      "ColorPropType exported from 'deprecated-react-native-prop-types'.",
 7 );
 8},
 9get EdgeInsetsPropType(): $FlowFixMe {
10  invariant(
11    false,
12    "EdgeInsetsPropType has been removed from React Native. Migrate to " +
13      "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
14  );
15},
16get PointPropType(): $FlowFixMe {
17  invariant(
18    false,
19    "PointPropType has been removed from React Native. Migrate to " +
20     "PointPropType exported from 'deprecated-react-native-prop-types'.",
21 );
22},
23get ViewPropTypes(): $FlowFixMe {
24 invariant(
25   false,
26   "ViewPropTypes has been removed from React Native. Migrate to " +
27     "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
28 );
29},

With the following code:

 1// Deprecated Prop Types
 2  get ColorPropType(): $FlowFixMe {
 3    return require("deprecated-react-native-prop-types").ColorPropType
 4  },
 5  get EdgeInsetsPropType(): $FlowFixMe {
 6    return require("deprecated-react-native-prop-types").EdgeInsetsPropType
 7  },
 8  get PointPropType(): $FlowFixMe {
 9    return require("deprecated-react-native-prop-types").PointPropType
10  },
11  get ViewPropTypes(): $FlowFixMe {
12    return require("deprecated-react-native-prop-types").ViewPropTypes
13  },

Step 4 - Create a patch for the change

We have changed the React Native source code. The change need to be stored in a patch file. We can achieve that in the following way:

1npx patch-package react-native

Now the patch is added to the patches directory in the root of the project.

Step 5 - Run the patch everytime yarn has changes

The React Native dependency must be patched everytime a change is made to the dependencies. This happens everytime a dependency is added, updated or removed. Add the following row to the package.json to achieve that:

1  {
2  ...  
3  "scripts": {
4    "prepare": "patch-package",
5    ...
6  }
7 ...

Finished

Now the problem is solved. The source code of React Native is modified to use the deprecated types. The change in the module is persisted by using the patch-package module.

Keep in mind that installing a newer version of React Native will make the patch outdated. Each patch is bound to a specific version of a module. So you need to follow the steps above again.

Happy coding!