ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from ‘deprecated-react-native-prop-types’

by | May 30, 2023 | Uncategorized | 0 comments

Since the ViewPropTypes has been removed from ‘react-native’ and the packages using it didn’t update. this error appears after building the app

ERROR  Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.   
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

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
  },
  1. Run npx patch-package react-native to save the patch.
  2. Rebuild the app.

Case : react-native-snap-carousel

Step 1: npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types.

Step 2: open all of these 4 files which is exists in the directories

node_modules\react-native-snap-carousel\src\carousel\Carousel.js

and

node_modules\react-native-snap-carousel\src\pagination\Pagination.js

and

node_modules\react-native-snap-carousel\src\pagination\PaginationDot.js

and

node_modules\react-native-snap-carousel\src\parallaximage\ParallaxImage.js

Step 3: delete all ViewPropTypes which is imported from react-native and import it from deprecated-react-native-prop-types which is the module we installed at the Step 1, and put it in a separated line like this

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

Step 4: add this line "postinstall": "patch-package", in package.json in scripts section. example:

"scripts": {
    "start": "expo start",
    "postinstall": "patch-package"
  },

Step 5: run this command npx patch-package react-native-snap-carousel.

Step 6: run this command npm run postinstall

Ref:
https://stackoverflow.com/questions/72755476/invariant-violation-viewproptypes-has-been-removed-from-react-native-migrate-t
https://stackoverflow.com/questions/71702392/viewproptypes-will-be-removed-from-react-native-migrate-to-viewproptypes-export