Solving the Common React Native Migration Headache: ViewPropTypes Removal Made Easy

 

Introduction: 

When upgrading your React Native project from an older version to a newer one, you might encounter the common and annoying "Invariant Violation: ViewPropTypes has been removed from React Native" error. This error often arises when components in your project still use ViewPropTypes, which has been deprecated. In this article, we'll walk you through a step-by-step solution to address this issue effectively.

Solution: Using patch-package

To get started, install the patch-package tool in your project. Depending on your package manager, you can use either npm or yarn:

    if using NPM

        npm install --save-dev patch-package

    or if using yarn

        yarn add -D patch-pakage

Step 2: Configure the Post-Install Script 

Once patch-package is installed, add a post-install script to your project's package.json file. This script will automatically run after you install or update dependencies: (eg:- below Image)

  "scripts": {  "postinstall": "patch-package"}

Step 3: Make Necessary Component Changes 

now edit "node_modules/react-native/index.js" file

Find below code

get ViewPropTypes(): $FlowFixMe {

invariant(

false,

'ViewPropTypes has been removed from React Native. Migrate to ' +

"ViewPropTypes exported from 'deprecated-react-native-prop-types'.",

);

},

and replace with below

get ViewPropTypes(): $FlowFixMe {

console.warn(

'ViewPropTypes has been removed from React Native. Migrate to ' +

"ViewPropTypes exported from 'deprecated-react-native-prop-types'.",

);

},

Once done, your issue is resolved.

Step 4: Generate and Apply Patches

After making code changes, you can generate patches for the modified components using `patch-package`. Run the following command to create patches for your changes:

npx patch-package react-native

This command will create .patch files in a patches directory within your project.

Step 5: Commit and Share Patches 

Commit the generated patches along with your project's code changes. Now whenever you'll recreate node modules, postinstall script will patch the fix autometically.

Conclusion: 

The 'ViewPropTypes removed' error can be a common hurdle during React Native version upgrades, but with the help of patch-package, you can efficiently address this issue and ensure your components are compatible with the latest version of React Native. This solution streamlines the process of patching and sharing changes, making it easier to manage upgrades and keep your React Native project up to date.

By following these steps, you can migrate your React Native project smoothly while resolving the 'ViewPropTypes has been removed' error.