ERROR ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-react-native-prop-types' package.

If you are a React Native developer, you've likely encountered the 'ViewPropTypes' deprecation warning. This error only means that RN is encouraging its users to use more of a robust type system like TypeScript, therefore let us explore how we could fix this issue by migrating to the 'deprecated-react-native-prop-types' package, ensuring your project remains functional as you plan for a more permanent switch."

Why is RN pushing for migrating onto its type system?

RN is planning on removing the ProtoTypes completely as there is a need for a more reliable and robust type-checking system like TypeScript.

Step-by-Step Guide to Resolve the Deprecation Warning

1. Begin by installing patch-package and deprecated-react-native-prop-types if you haven't already. These tools will help you modify and maintain changes within your node modules:

npm install patch-package deprecated-react-native-prop-types

2. Modify Your React Native Code:
   
   Navigate to 'node_modules/react-native/index.js' file where changes are required onto the deprecated ProtoTypes.

Before

// Deprecated Prop Types
  get ColorPropType(): $FlowFixMe {
    console.error(
      'ColorPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using ColorPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    console.error(
      'EdgeInsetsPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using EdgeInsetsPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    console.error(
      'PointPropType will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using PointPropType, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    console.error(
      'ViewPropTypes will be removed from React Native, along with all ' +
        'other PropTypes. We recommend that you migrate away from PropTypes ' +
        'and switch to a type system like TypeScript. If you need to ' +
        'continue using ViewPropTypes, migrate to the ' +
        "'deprecated-react-native-prop-types' package.",
    );
    return require('deprecated-react-native-prop-types').ViewPropTypes;
  },

After

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

3. Apply the Patch:
   
   To ensure the changes on index.js and persist the modifications when performing an installation or update onto the package, the following command is run in the terminal:

npx patch-package react-native

4. And boo-boom!..

In order to apply the changes, restart your application

And that's it! You've successfully solved the PropTypes issue without any warnings.

About Me

I am Zaahra, a Google Women Techmakers Ambassador who enjoy mentoring people and writing about technical contents that might help people in their developer journey. I also enjoy building stuffs to solve real life problems.

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer