React Native ViewPropTypes Migration

Problem

React Native has deprecated PropTypes, including ViewPropTypes, and will eventually remove them completely. You might see this warning even if you haven't directly used ViewPropTypes in your code:

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'

This typically occurs because one of your dependencies is still using the deprecated PropTypes from React Native rather than importing them from the dedicated package.

Solutions

Option 1: Update Dependencies (Recommended)

The cleanest solution is to identify and update any dependencies that use deprecated PropTypes.

# Search for packages using ViewPropTypes
grep -r "ViewPropTypes" node_modules/

Once identified, check if newer versions of these packages exist that have migrated away from the deprecated PropTypes. Update your dependencies and run:

npm install
# For iOS projects
npx pod-install

Option 2: Manual Import Replacement

If a dependency hasn't been updated, you can manually fix the import:

# Install the deprecated prop-types package
npm install deprecated-react-native-prop-types

Then locate the problematic file in node_modules/ and change:

import { ViewPropTypes } from 'react-native';

To:

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

WARNING

Modifying files in node_modules directly is temporary and will be overwritten on reinstalls. Use patch-package (Option 3) for a more permanent solution.

Option 3: Use Patch-Package

For a persistent solution that survives reinstalls:

1. Install required packages:

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

2. Add a postinstall script to your package.json:

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

3. Modify node_modules/react-native/index.js:

Find the deprecated prop types section (around line 436) and replace:

get ViewPropTypes(): $FlowFixMe {
  invariant(
    false,
    'ViewPropTypes has been removed from React Native. Migrate to ' +
      "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
  );
},

With:

get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},

4. Create and apply the patch:

npx patch-package react-native

Option 4: Module Resolver (Advanced)

For complex projects with multiple dependencies using deprecated PropTypes:

1. Install required packages:

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

2. Create resolver/react-native/index.js:

import * as StandardModule from "react-native";

const deprecatedProps = {
  ImagePropTypes: require("deprecated-react-native-prop-types/DeprecatedImagePropType"),
  TextPropTypes: require("deprecated-react-native-prop-types/DeprecatedTextPropTypes"),
  ViewPropTypes: require("deprecated-react-native-prop-types/DeprecatedViewPropTypes"),
  ColorPropType: require("deprecated-react-native-prop-types/DeprecatedColorPropType"),
  EdgeInsetsPropType: require("deprecated-react-native-prop-types/DeprecatedEdgeInsetsPropType"),
  PointPropType: require("deprecated-react-native-prop-types/DeprecatedPointPropType"),
};

const objProx = new Proxy(StandardModule, {
  get(_, prop) {
    if (prop in deprecatedProps) {
      return deprecatedProps[prop];
    }
    return Reflect.get(...arguments);
  },
});

module.exports = objProx;

3. Update babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      "module-resolver",
      {
        alias: {
          'react-native': './resolver/react-native',
        },
      },
    ],
  ],
};

Option 5: Warning Suppression (Temporary Fix)

As a last resort, you can suppress the warnings:

import { LogBox } from "react-native";

LogBox.ignoreLogs([
  "ViewPropTypes will be removed from React Native",
  "exported from 'deprecated-react-native-prop-types'",
]);

DANGER

This approach only hides the symptoms and doesn't fix the underlying issue. Use it only as a temporary measure.

Best Practices

1. Prioritize dependency updates - This is the most sustainable solution
2. Use TypeScript - Migrate from PropTypes to TypeScript for better type safety
3. Create PRs for dependencies - Help maintainers by submitting fixes for deprecated PropTypes
4. Monitor React Native changes - Stay informed about upcoming deprecations

Conclusion

The ViewPropTypes warning indicates that React Native is moving away from PropTypes. The optimal solution is to update dependencies or help maintainers migrate to the dedicated deprecated-react-native-prop-types package. For immediate fixes, use patch-package or module resolution, but plan for a permanent solution by migrating to TypeScript where possible.