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.
packages I'm using:
"#react-native-clipboard/clipboard": "^1.10.0",
"#react-native-community/checkbox": "^0.5.12",
"#react-native-firebase/app": "^14.11.0",
"#react-native-firebase/auth": "^14.9.4",
"#react-native-firebase/database": "^14.11.0",
"#react-native-firebase/firestore": "^14.11.0",
"#react-native-google-signin/google-signin": "^7.2.2",
"#react-native-masked-view/masked-view": "github:react-native-masked-view/masked-view",
"#react-native-picker/picker": "^2.4.1",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"base-64": "^1.0.0",
"num-words": "^1.2.2",
"numeral": "^2.0.6",
"pdf-lib": "^1.17.1",
"react": "17.0.2",
"react-native": "^0.69.0",
"react-native-blob-util": "^0.16.1",
"react-native-country-picker-modal": "^2.0.0",
"react-native-date-picker": "^4.2.2",
"react-native-fbsdk-next": "^8.0.5",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-html-to-pdf": "^0.12.0",
"react-native-pdf": "^6.5.0",
"react-native-picker-select": "^8.0.4",
"react-native-progress": "^5.0.0",
"react-native-radio-input": "^0.9.4",
"react-native-ratings": "^8.1.0",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1",
"react-native-share": "^7.5.0",
"react-native-signature-canvas": "^4.3.1",
"react-native-vector-icons": "^9.1.0",
"react-native-webview": "^11.21.2",
"react-scripts": "^5.0.1"
Any solution?
I can recommend doing the steps outlined in this github discussion.
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 or yarn 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.
Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.
Props to goguda for providing this answer.
I had the same error I followed the following steps and I resolved it. It arises because react-native has removed the view prop types from the library but still some external modules require the use of it.
Run the command in the terminal
npm i deprecated-react-native-prop-types#2.2.0
Go to the node modules and find the module that you are using in my case it was "react-native-camera"
Navigate into the src folder of the module file (in my case it was in RNCamera.js) and look for
import {
findNodeHandle,
Platform,
NativeModules,
ViewPropTypes,
requireNativeComponent,
View,
ActivityIndicator,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native';
In the following code remove the ViewPropTypes and paste the following command below this
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
save the file and run it again, Hope it helps <3
I had the same error using react-native-camera. I fix it by installing npm i deprecated-react-native-prop-types#2.2.0 and replacing in node_modules/react-native-camera
all imports in files.
import { ViewPropTypes } from 'react-native';
for
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
In case anyone is getting the error with react-native-snap-carousel this is another way to fix it:
npm i --save react-native-snap-carousel#4.0.0-beta.6
github issue
I had the same error using react-native-snap-carousel. I fix it by replacing in node_modules/react-native-snap-carousel
Check All files and change this import
import { ViewPropTypes } from 'react-native';
with this and this error gone
import { ViewPropTypes } from 'deprecated-react-native-prop-types';
I was facing this problem (Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable.) when I used drawer navigation
so I follow this step
I hope this will help someone
EDIT -
For me.. This error represented a mismatch violation with an older version of Expo Go in the simulator and the version of Expo Cli I was running. It was important that I upgraded each version of Expo one version at a time. It had nothing to do with my React or React Native code. As of Expo 46, expo upgraded the ios simulator with a prompt so the fix below i only relevant below version 46.
In my case, I am using Expo managed Workflow and this error popped up after I upgraded Expo Go on the ios simulator, which prompted me to have to upgrade Expo because the simulator wouldn't allow the version of Expo I was using (43) . After upgrading Expo, and running the simulator, I was greeted with this error, which sent me down a rabbit hole, (where this question is one of the only relevant search results) of trying to upgrade react native to be compatible with the new Expo version and so on. However, this error persisted no matter what version of react native I was using. So finally I tested a different project on the same simulator and found that the actual simulator was throwing the same error on a new project with all the latest versions.
My solution was too simple.
Install a new Simulator with the version of Expo the project is running on. While in the root of the Expo project, in the terminal, I ran
expo client:install:ios
After that, for this project these exact errors completely went away and the Simulator ran fine. I know that this is probably not a long-term fix for the actual error and that upgrading Expo and React Native is going to be necessary and this may not be the issue for many people, but in order to keep working on the project, this allowed me to move forward.
This works for me, just installed these packages. Try it, it might help you as well.
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
I had the same issue after upgrading to the new RN v0.69. Changing node_modules/react-native-camera would solve the problem locally. However, we know that when the node dependencies need to be installed from scratch - in a CI/CD process for example - the changes at 3rd party library need to be done over again. So, a better solution I suggest is to intercept the react-native-camera component at build runtime level using the babel-plugin-module-resolver as suggested here https://github.com/psycheangel/deprecated-with-module-resolver. I did another way because this solution did not work for me since it's more generic and got conflict with other stuffs I have on my project. Still using the same babel resolver plugin but to address the specific problem with react-native-camera component, this is the way I did based on the above solution by psycheangel:
Step 1
Install the babel resolver plugin and the turn around dependency:
npm install --save-dev babel-plugin-module-resolver deprecated-react-native-prop-types
or
yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types
Step 2
create resolver/react-native/index.js with this code:
import * as ReactNative from 'react-native'
import * as DeprecatedPropTypes from 'deprecated-react-native-prop-types'
delete ReactNative['ColorPropType']
delete ReactNative['EdgeInsetsPropType']
delete ReactNative['ImagePropTypes']
delete ReactNative['PointPropType']
delete ReactNative['TextInputPropTypes']
delete ReactNative['TextPropTypes']
delete ReactNative['ViewPropTypes']
module.exports = {
...ReactNative,
...DeprecatedPropTypes,
}
Step 3
add module resolver plugin config to babel.config.js:
const path = require('path')
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
resolvePath(sourcePath, currentFile) {
if (
sourcePath === 'react-native' &&
currentFile.includes('react-native-camera/src/RNCamera.js')
) {
console.log('resolver', sourcePath, currentFile)
return path.resolve(__dirname, 'resolver/react-native')
}
},
},
],
],
}
I'm using the new expo-dev-client and EAS workflow to attempt development with expo, while also including native dependencies (react-native-firebase in my case).
I've managed to build and install a preview of my app with EAS:
eas build --platform ios --profile staging
Where my "staging" profile is setup in eas.json like so:
{
"cli": {
"version": ">= 0.35.0"
},
"build": {
"production": {
"releaseChannel": "prod-v0",
"node": "14.17.4",
"ios": {
"cocoapods": "1.11.2",
"autoIncrement": "buildNumber"
}
},
"staging": {
"extends": "production",
"releaseChannel": "staging",
"distribution": "internal"
},
...
},
...
}
Note the releaseChannel is set to "staging" too.
So far so good. The app is building and I can install it on my device and confirm the releaseChannel using the expo-updates module with Updates.releaseChannel
Now I'd like to publish a pure javascript change, so I run...
expo publish --release-channel staging
But this gives the following warning (which I assume is why I don't see the update on my device):
ios: Expo.plist key: "EXUpdatesReleaseChannel": The value passed to the
--release-channel flag is to "staging", but it is set to "default".
So what/where is "Expo.plist", why isn't it in-sync, and how can I update it?
Update:
So I deleted the iOS folder from a previous expo run:ios build. The warning is now gone when running expo publish --release-channel staging. But still nothing seems to happen on my app - it still doesn't update.
I'm new to react-native and am in the early stages of creating an app with Expo. I had a working app until installing redux. Currently I am getting the following error from the XDE:
Problem checking node_modules dependencies: Unexpected end of JSON input
and the following from the ios simulator:
Building JavaScript bundle: error
TransformError: ../app/main.js: Couldn't find preset "babel-preset-expo" relative to directory "../app/"
I believe my node modules contain valid JSON. It should be noted that I'm using a more current version of react-native than expo.
I experienced this issue when I tried moving to expo version 21.0.0.
You should try to delete your node modules and use yarn to install.
package.json
dependencies:{
"babel-preset-expo" : "^4.0.0",
"expo": "^21.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-21-0.2.tar.gz"
}
my .babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
hi i am building video streaming app through telerik platform. My app structure looks like :
my-project
app
- package.json
- app.js
node_modules
package.json
server.js
I have added firebase and bitmovin player plugin to my node_modules. Now the Telerik platform documentation says : to add require references to package.json file.
I do not get which package.json file needs to be opened . There are two files. The first one in the Project root which looks like:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The other package.json file is in the app folder looks like :
{
"name": "tns-template-blank",
"main": "app.js",
"version": "2.5.0",
"author": "Telerik <support#telerik.com>",
"description": "Nativescript blank project template",
"license": "Apache-2.0",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"url": "https://github.com/NativeScript/NativeScript/commit/30aca890749e9e3fb9bd0f5ddc9de5b6995859bc"
}
}
and the app.js file looks like :
var application = require('application'),
mainModule = 'navigation/navigation';
application.start({
moduleName: mainModule
});
I do not get in which package.json file needs to be configured and where to enter the require reference for the module (like bitmovin player & firebase ) as mentioned in the telerik platform documentation which is shown in the picture above step no. 8.
please guide.
The first package.json (i.e. root package.json) is where any plugins go. If using the CLI, you can do tns plugin add nativescript-dom and it would then modify the package for you to be:
{
"dependencies": {
"tns-core-modules": "2.5.1",
"bitmovin-player": "7.2.0-rc6",
"firebase": "4.1.2",
"nativescript-dom": "2.0.0"
},
"devDependencies": {
"nativescript-dev-android-snapshot": "0.0.6",
"#types/firebase": "2.4.31"
}
}
The dependencies section is what needs to be changed; it needs the plugin name and the version you will be using. It that your package.json file is already correct for what you installed. You can also use http://plugins.nativescript.rocks for a list of plugins and their current versions.
A couple notes; based on you saying you needed bitmovin-player and firebase but using NativeScript; this won't work. The firebase and bitmovin-player you have referenced are not NativeScript plugins, so they won't work. To my knowledge bitmovin does not have NativeScript version (but my NativeScript-ExoPlayer plugin might be a good replacement) and then the NativeScript-Firebase I believe is the plugin you want for Firebase support in NativeScript.
I also see that you are using tns-core-modules 2.5.x; this means you want to get plugins that are 2.x compatible; the 3.x plugins will NOT work with TNS 2.x (and a large number of 2.x plugins won't work in 3.x).
When using a plugin (for example using my nativescript-dom) you do a var dom = require('nativescript-dom'); (or you can use const dom = ... as NativeScript can use ES6 grammer). You do not have to point to the actual js file inside the plugin. If the plugin is built correctly; it will automatically use the correct js file inside the plugin.
Finally in NativeScript the DevDependancies are for anything that is not being put into the application. In this case the android-snapshot plugin runs some build code during the build phase of the application.
I want to integrate relay with react native.
I am getting following error:
getBabelRelayPlugin is not defined while processing preset
I used following steps to integrate react native with relay
1.Back up your project.
2. Make sure you have your GraphQL server ready and your schema.json at hand too. For more details about the latter two visit the React-Relay project page.
Ensure that you’re using npm version 3 or greater.
3.If React Native's packager (react-native start) is running somewhere in the background, you should stop it now.
4.Run: watchman watch-del-all
5.Delete the ./node_modules directory from your project.
6.Edit your package.json file, make sure it has the following:
"dependencies": {
"react": "^0.14.7",
"react-native": "facebook/react-native",
"react-relay": "^0.7.3"
},
"devDependencies": {
"babel-core": "^6.6.4",
"babel-preset-react-native": "^1.4.0",
"babel-relay-plugin": "^0.7.3"
}
Babel version is especially important. Make sure that your project uses babel 6.5 or later, we need it for the passPerPreset feature in .babelrc file.
7.Create a new file .babelrc and place it in your project's directory:
{
"presets": [
"./scripts/babelRelayPlugin",
"react-native"
],
"passPerPreset": true
}
8.Create a new file in your project's directory called babelRelayPlugin.js with the following content:
const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');
module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };
9Copy your schema.json file to the project's directory too.
10.Run: npm install