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
- Install patch-package, this will later be used to make the changes more persistent.
- Install deprecated-react-native-prop-types by running
npm install deprecated-react-native-prop-types
oryarn add deprecated-react-native-prop-types
- 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
},
- Run
npx patch-package react-native
to save the patch. - 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
Recent Comments