Related
I am getting RNSScreen error even though I have installed all related packages and followed react-navigation guide (https://reactnavigation.org/docs/getting-started#installation) but nothing worked for me.
Faced the same issue while implementing Navigation. Run following commands
npm install #react-navigation/native
React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.
In your project directory, run:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
This will install versions of these libraries that are compatible.
If you're on a Mac and developing for iOS, you need to install the pods to complete the linking.
npx pod-install ios
Now run
react-native run-ios
That usually happens when you install all packages to add navigation without terminating the running build. Make sure to stop the running process for ( android or IOS ) then run it again after installing them and adding the routing components
I think you are missing to install react-native-screens components. That is required part in install react navigation guideline.
Dont forget to run pod install in ios folder after install package from npm.
stop all the terminal servers and then run
npx react-native run-android
if it still does not work,
npm i react-native-screens
and then
npx react-native run-android
Close Metro and run npx run android to rebuild your code
This solution (source) always works for me, here is the exact solution:
If you're facing with this error
Invariant Violation: requireNativeComponent: "RNSScreen" was not found
in the UIManager.
Follow these steps:
1. Make sure in your `package.json` file if you have the following packages:
#react-native-community/masked-view#react-navigation/native#react-navigation/stackreact-native-gesture-handlerreact-native-reanimatedreact-native-safe-area-contextreact-native-screens
2. Next ensure if you have pods up-to-date (For iOS only) by making sure cd ios --> pod install --> cd ..
3. And finally cancel the current build by pressing Ctrl+C (twice/thrice) and then do npx react-native run-ios
RNSSCreens error because the react-native-screens isn't installed on the your project
just run npm install react-native-screens react-native-safe-area-context or if your using yarn run 'yarn add install react-native-screens react-native-safe-area-context'
As I don't have enough reputations to upVote the answer, I am mentioning the answer which worked out to me here
Solution mentioned by #Gurjinder Singh , worked smoothly..
Recapturing:
Issue : With Expo, Sanity.io app was working on device in dev, but once apk was generated using "eas build -p android --profile preview" , build was successful but when I tried opening the app in my mobile, after splash screen app was crashing.
Adblogcat showed : com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.
Solution worked:
npm install #react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
thanks to community and #Gurjinder Singh (top voted)
Hey i was also facing same problem . Just use
npm install react-native-screens
.
This was happening to me on both iOS and Android. I managed to get Android working again by updating the package:
"react-native-screens": "^3.18.1"
Then adding this to dependencies in: android/app/build.gradle
implementation project(':react-native-screens')
Then adding this to protected List getPackages() in: android/app/src/main/java/com/myapp/MainApplication.java
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new com.swmansion.rnscreens.RNScreensPackage());
return packages;
}
NOTE: Make sure you don't already have an import for com.swmansion.rnscreens otherwise the app will keep rebooting due to duplicate screen views
Then finally adding this to android/settings.gradle
include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
Make sure you clean gradle before running the app, for example navigate to android folder and run:
./gradlew clean
As for iOS, just add this to target 'myapp' do in: ios/Podfile
pod 'RNScreens', :path => '../node_modules/react-native-screens'
Make sure you delete your Podfile.lock and then run pod install --repo-update in your iOS folder before running the app.
Happy Update: react-native-screens 3.18.2 is out with a fix for this, if you were impacted by the 3.18.1 release that caused compile problems (which you can check by seeing the message below, if needed)
So, mostly obsolete now answer preserved below, but just updating packages should get you moving. Cheers
Nowadays if this is happening it is because react-native-screens 3.18.1 includes new configuration that is only compatible with react-native 0.69+
If you are using an older react-native you need to make sure your react-native-screens dependency is exactly 3.18.0:
"react-native-screens": "3.18.0",
then likely a npx react-native start --reset-cache to restart your javascript bundler with a fresh cache.
You will know if this is your problem if you see something like this when you say npx react-native run-android:
warn Package react-native-screens has been ignored because it contains invalid configuration. Reason: "dependency.platforms.android.componentDescriptors" is not allowed
There may be a 3.18.2 soon with a fix - reference: https://github.com/software-mansion/react-native-screens/issues/1614#issuecomment-1276245207
I've encountered the same problem, and solved it.
You can just close the terminal and app on Android Emulator(or device), and just run npm run android or react-native run-android again.
I think they might have some cache and occur the error.
I hope you can fix the problem.
Close the Metro and IOS simulator.
Ensure you go to your ios folder run pod install
Reopen your simulator
This should solve the problem. I also use quite a while to figure it out
I worked on this problem for several days and this is want worked for me:
In the android\app\src\main\java(your project name)\MainApplication.java
add to Imports:
import com.swmansion.rnscreens.RNScreensPackage;
Then add new RNScreensPackage() to the ReactPackage List:
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
...
new RNScreensPackage()
);
}
Edit: This was after I tried everything else here.
This helped me. install this package
npm i react-native-screens
and add
import { enableScreens } from 'react-native-screens';
enableScreens();
You go into the ios folder of your project folder and run the following command.
pod install
Then run the simulator.
You must have react-native-screens installed and I'm guessing that you have done it. So, I will just you a Problem that maybe is not really clear in the documentation.
So you probably just Install React Navigation on your app.
Once you installed it, you need to restart you app.
So close your app, run react-native run-ios or react-native run-android again.
React navigation Install some native modules. Thus, you need to restart that app as I mention.
This is really clear on their documentation.
I also came across the same problem. For Android, I uninstall the app from the emulator then build the app again.Problem solved. Assuming that you already installed packages you need.
Just stop running your node server and build the app again from Xcode/Android Studio or using command react-native run-ios or react-native run-android
In case you are on android, you need to rebuild using npx run android or react-native run-android
The new installed apk will work fine
I also get this error and after doing these steps my app starting running
cd android
./gradlew clean (for windows or linux)
npm install react-native-screen
react-native start & react-native run-android
worked for me yarn add react-native-reanimated
"#react-navigation/native": "^6.0.10", "#react-navigation/native-stack": "^6.6.2", "react": "17.0.2", "react-native": "0.68.2", "react-native-reanimated": "^2.8.0", "react-native-safe-area-context": "^4.3.1", "react-native-screens": "^3.13.1", "styled-components": "^5.3.5"
you must clear the Metro bundler cache
run the following command :
expo start -c
Finally found the solutions, first by creating new project and secondly re-setup of the react-google-maps library.
Workaround Solution: Created new project, installed all dependencies from scratch, followed step-by-step installation guidelines of react-native screens, and finally moved all my code files into a newly created project. This worked for me :D
After digging into the project code and compared project code with newly generated code, here are my findings:
Actual Problem: We had integrated react-native-google-maps library some time ago, for which I and other developers followed step-by-step guidelines and made changes in the MainActivity.java file in the android folder. There were some misconfigurations due to which RNSScreen issue was getting thrown.
Actual Solution Removed react-native-google-maps completely (uninstalled npm packages) and removed Google Maps configuration and did set up the react-google-maps library again
In conclusion, if any of the developers, try to set up google maps in react native, please check the version of react native and react-native-google-maps library and then follow the steps carefully.
Hopefully, this would answer your queries.
In my case, the following code block helped!
npm install react-native-screens
npm run android/ ios
(It Workes For Me..!)
for React-native developers..
Some times the changes of packages Not reflacted in xcode so follow this steps for Solution..
Open Project in xcode ->
Clean Buid Folder ->
(Rebuid Your Project)Run on any Simulator and wait for Build..
->Once Build either You can run again by Terminal or continue work by xcode..
none of the recommended answers worked until I tried what I found in this comment plus restart my steps:
deleting the node_modules directory
turn Metro and actually quit the simulator completely
yarn to install again
start metro via npx react-native start
install pods via npx pod-install ios
run simulator again via npx react-native run-ios
Make sure the below plugin install and linked with android & ios?
npm install react-native-screens
If not linked then perform the below command
react-native link react-native-screens
after successfully linked for android and ios, "Sync Gradle" from android studio and "pod install" for ios
Now close the terminal and again build and run app
I updated Expo to 45.0.0. That fixed the error and solved a problem with the app crashing after launch in production mode but working fine on device with QR code or simulator.
You need to do a few things:
Open android/app/src/main/java/MainApplication.
Replace the function getPackages() with:
#Override protected
List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new ReactNativeFirebaseAuthPackage());
return packages;
}
yarn start --reset-cache or npm start -- --reset-cache
Clean:
cd android
./gradlew clean
Does anyone experience this issue?
After pointing to the default page in index.js, an error occurred with the following error code:
Requiring unknown module "1". If you are sure the module exist, try restarting Metro.
The screenshot:
And here's the exact code from index.js:
import {AppRegistry} from 'react-native';
import App from './src/components/LoginPage';`// import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
And my landing page:
Found the answer here
Basically it asks you to terminate the processes running on a specific port.
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
Then run the following to terminate the process:
$ kill -9 <PID>
Try to remove 'node_modules' folder and re-install modules with yarn or npm install
I hope it's can help you
This is my solution. It works for me. go through the following steps. check the emulator or your device reloading at each of the steps whether it is work or not.
wipe out your emulator or delete the app from your device and run it again.
run nmp install in your terminal and then restart metro bundler by running react-native start.
run your app in react native CLI -> npx react-native run-android or in expo CLI -> expo start.
cheers!
This problem can be faced from multiple sources. The one I faced was with Stack Navigation I used in my case.
It was use of 'react-native-gesture-handler' and 'react-native-reanimated' here.
For that we need to do 2 things without fail -
Adding import 'react-native-gesture-handler'; as the very first line in wither index.js or App.js which ever present in code.
Adding plugins: ['react-native-reanimated/plugin'], in bable.config.js along with presets there.
try npx react-native run-android or react-native run-ios to rebuild and install app.
TLDR:
If you are using yarn, switch to npm.
I used yarn before and used to get this error at almost every change I did to the app. I have used npm on other projects without having these headaches so decided to switch back to npm just to try and it worked. I still get the error when I introduce bigger changes to the app like reorganizing navigation or installing new packages, but that's it.
Just close the server and open it again
That solved to me
I have just created new React Native App and when I try to run it on iOS it's ruining without any problem but when I run it on android it is showing me an Error says
undefined is not a function (evaluating 'Object.getOwnPropertyDescriptors(arguments[i])') (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:3573)
This error shown in the (Red screen) React Native Error Screen after the app has been installed on the device.
its worked for me install this dependency
npm i object.getownpropertydescriptors
link
Unbelievable solution but worked for me 🎯
I guessed that the problem was some kind of dependency upgrade, and because React Native does not come locked to working versions, something got published and broke it.
I grabbed a yarn.lock from a project from over the weekend, pasted that into my project's yarn.lock file and then did yarn at the command line to have it automatically prune/lock things back up. Somewhere in that mess, it grabbed the right stuff and now I can use Android again. Not a great fix, but hopefully it helps!
Copy this yarn.lock contents
Past it over your project's yarn.lock contents
run yarn in the CLI
Note: I got this solution from here.
temporary Fix:
Add the following to your package.json:
"resolutions": {
"#babel/helpers": "7.2.0",
"#babel/runtime": "7.2.0"
}
Then run rm -rf node_modules && yarn && yarn start --reset-cache
For some reason when I want to start my React Native project, it's stucks at 'Starting Packager...' part. I tried to delete the node packages, and reinstall them, intall them via yarn, npm, but no luck. I got no idea how should I fix this :/ (so awkward)
I had the same issue. I solved it by changing react-native-scripts version from "^1.14.1" to "1.14.0" and run npm install again.
after a long search I found a solution for this problem:
this problem is caused by another watchman process, to solve it you have to turn off the watchman process
first,check react,react-native,and expo version are they compatible, goto here
Then you must install watchman, goto https://facebook.github.io/watchman/docs/install.html.
Check watchman has installed by:
watchman -v
result:
4.9.4
After that, type in terminal or cmd:
watchman watch-del-all
result:
{
"version": "4.9.4",
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
}
look in the "roots" section:
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
if "roots" not empty, you must shutdown watchman process, typing this in terminal or cmd:
watchman shutdown-server
result:
{
"version": "4.9.4",
"shutdown-server": true
}
run again watchman watch-del-all
you will get result with empty roots like this:
{
"version": "4.9.4",
"roots": []
}
after that you can run npm start or yarn start or other command to start your react-native project.
if the problem still occurs, repeat the above method several times, make sure the "roots" are empty! in my case, even I had to repeat it up to 3 times.
There could be multiple reasons for the issue. For the most recent version of react-native (Aug 2018), what you might need to do is just press 'q', it will displays the QR code.
After that, you use the expo app scan the QR code, it should start to bundle the scripts and load it to your phone.
If not, you might have another issue which is caused by the incompatibility among React-Native, React and Expo. If you are using Expo 27, you should use reactive-native 0.55.
There is a complete matrix here, https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Anyone who face problem after running
npm audit fix, that is because it will try to install react-native 0.56 which doesn't work with Expo 27 well. So don't run npm audit fix. Just run npm install react-native#0.55.0. (As time progress, the version might be different. Make sure you follow the link above to find out the compatible versions.)
There's a fastest way that worked for me:
When it says "Starting packager..."
press the "q" key. To show QR code
In my case (React Native 0.62.2) however, yarn ios equivalent to react-native run-ios was stuck (silently) as the dedicated port (8081) was reserved by previously running process.
I only found that out when I tried running yarn startequivalent to react-native start
I had to kill it kill -9 $(lsof -t -i:8081 -sTCP:LISTEN) and run yarn ios to get ios simulator back and running.
Every case is different and I Hope this helps someone.
Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
Getting the following message when I init a new project and then launch the Xcode emulator:
React-Native Version Mismatch
Javascript Version 0.50.1
Native version: 0.50.0
Make sure you have rebuilt the native code. ...
Does anyone know what is going on here and can help me?
This is what I've done with it:
Close all terminals and run build again.
You may forget to close nodejs terminal from another project, and they happen to have installed different react version.
So the code fetches from nodejs server conflicts with the native one.
In case you created your react-native app using create-react-native-app. You should have a app.json (expo). and a package.json file, check if the expo versions match and change accordingly. For example in my case the problem was that in the app.json file I had a 25.0.0 version for the expo sdkVersion attribute, I change that to 23.0.0 and everything worked.
package.json:
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "^0.50.4"
}
app.json:
{
"expo": {
"sdkVersion": "23.0.0" // before was 25.0.0
}
}
Just go to your android/app/build.gradle and then add to the dependencies section:
dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true }
}
/// the react native version can be found in package.json
For Android developers who couldn't get it fixed by just closing and rebuilding, Manually uninstall the app on the emulator/device.
just force react native version in your android's app level gradle file, in the dependencies section.
compile ("com.facebook.react:react-native:0.52.0") { force = true }
worked for me
If you're running your React Native app through Expo, upgrading React Native is liable to cause this error (as noted at https://github.com/expo/expo/issues/923).
If that's your scenario, your options are:
Bump Expo (which is listed in your package.json) to a version that is compatible with your React Native version (if one exists, which may not be the case - judging by the linked issue, I figure that Expo support trails React Native releases).
Discard your changes, delete and reinstall your Node modules, Eject from Expo, and then (after checking that you can still run your app post-ejection) try your upgrade again.
I've never seen this error before, but whenever I can't get Xcode and React-Native to play well together, I do a couple of things. Check what version of Xcode I'm working with. If it needs to be updated, I update it. Then clearing watchman and the cache are the second place I go. I don't use the reset cache command. It always says that I need to verify the cache, so I skip that (you can do it though, I just get confused). I use rm -rf $TMPDIR/react-* to get rid of any cached builds. If that doesn't work, I try to build the app in Xcode, then work my way from there, to build it with react-native run-ios. With this error message, it seems you might start by trying to build it with Xcode. Hope that helps...let me know your progress with it. Good luck! (Also, you could update to RN 0.51 as another attempt to get your versions synced.)
I had this problem for the longest time and none of the above solutions helped. I was in the middle of upgrading react native in a create-react-native-app project until I found out that not all versions of Expo support the latest React Native.
Found this page linked in the documentation that shows which version combinations of React Native, React, and Expo are officially supported:
Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Editing the app.json and package.json files to match the corresponding versions and running npm install got everything working again.
I am using a physical device, in my case this solved the problem:
Uninstall the app
lsof -i :8081
kill -9 PID
Rebuild the app (react-native run-android or react-native run-ios)
In your build.gradle file add the following
implementation ("com.facebook.react:react-native:0.51.0") {
force = true;
}
replace 0.51.0 with the version in your package.json
Try installing the dependencies again. That worked for me-
1.) yarn/npm install
2.) yarn/npm start --reset-cache
For me it was due to react-native version in dependency section of package.json file. It was:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}
I chaged it to:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}
Now it works fine.
In my case installing a new virtual device helped. Now I am using 1 device per app.
It happens sometimes when you try to run without closing the node server, in which the previous app was running, so try restarting React.To do so, just run the following commands:
1. To kill current processes
killall node -9
2. To Start React Native
react-native start
3. Then Run android
react-native run-android
For my case I'm facing it on iOS, and I've tried to reset and clear all cache using below command but failed too, despite many comments saying that the root cause is there is react packager running somewhere accidentally, I've restarted my mac and the problem still remained.
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache
The solution is, to delete the build folder # /ios/build, then execute react-native run-ios solved it
I have tried the solutions above but adding this to AndroidManifest.xml seems to fix it.
android:usesCleartextTraffic="true"
For others with the same problem on iOS with CocoaPods:
I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn't automatically get upgraded by using react-native-git-upgrade.
The fix is to upgrade all installed pods, by running cd ios && pod install.
Expo users - make sure your app.json sdk version and package.json expo version are (may be equal) compatible to each other.
The fix we did was to make sure the ANDROID_HOME and PATH variables were set up prior to the build.
First, run the below two commands then the build the app for the device.
export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
This is working for me :
react-native start --reset-cache
I also had this issue using Expo and iOS Simulator. What worked for me was erasing the Simulator in Hardware > Erase All Content and Settings...
I have got the same issue while building my react native app for android and I did the following which worked for me.
The "JavaScript version 0.50.1" in the error console is the react-native version in your package.json file. Make sure it is the same version as "Native version 0.50.0" in the error console.
I have Updated the react-native version to the "Native Version 0.50.0" as prompted in the error console.
Rebuild the app react-native run-android.
Possible Fix:
Delete the package-lock.json
Run: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install
If the problem persists, try to execute the project directly from the Xcode
This worked for me.
In my case (NOT using expo & Android build)
package.json
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.2"
}
And app.json
{
"sdkVersion": "27"
}
resolved the issue
I was trying to build and run a React Native app from WebStorm and ran into this problem. The simple solution for me was:
watchman watch-del-all
On macOS, if watchman is not already installed, install it using Homebrew:
brew install watchman
In my case, I changed the expo version manually. I got the same issue because I forgot to update sdkVersion in app.json and babel-preset-expo in package.json
After that run: expo r -c to clear cache and start the app.
This Answer is Published in 2020,
Fix this Error in 3 steps:
First step: I changed the value of expo in package.json file to the latest supported version, according to expo documents(visit here).
Second step: I changed the value of sdkVersion in app.json file to the same value of expo in package.json.( equal number to last step).
Third step : I changed the value of react-native in package.json file to the same value of React Native Version , according to expo documents(visit here).
now your ready to go.
use npm install to install specified version of dependencies and then npm start to run the project
I got this classing when TypeScript type definitions mismatched.
E.G react-native at 0.61.5 in dependencies and #types/react-native at 0.60.0 in devDependencies.
As soon as I updated devDependencies it worked. Didn't have to restart anything.
edit your package.json for your javascript version
"react-native": "^0.50.1",
after run
npm install
For me, who is running with a monorepo, there was a hidden react-native version inside yarn.lock. It was not present in any package.json, but was never deleted.
I removed that particular react-native version from yarn.lock, and did a
yarn install
This cleaned out alot of old stuff and made sure that things was working fine.