I have a React Native application that I recently updated.
However, on the majority of my modules, I have this error:
#<WeakSet> could not be cloned.
For example, on the module : #react-native-mapbox-gl
When I launch my application, I get the error :
node_modules\#react-native-mapbox-gl\maps\javascript\modules\snapshot\snapshotManager.js: #<WeakSet> could not be cloned.
I also have it on my react-native-vector-icons module.
Is this a common problem?
Thank you!
stop metro
reset repo
reinstall node_packages
run pod install --repo-update
Try deleting node_modules and reinstall with npm install or yarn install again, and then:
IOS:
pod update SDWebImageWebPCoder
pod install --repo-update
build project in Xcode
Android:
Open in Android Studio and Refresh Gradle Dependencies.
build project in Android Studio
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
So I'm opening my the existing React Native project. This is the procedure on how I opened my existing React Native project. 1st step, type the location of my project which is in the "D:\rnprojects\firstproject\". 2nd step, "react-native-start". 3rd step, I opened another cmd then locate it again into my project directory then typed "npm start".
Why when I created this project I didn't get this error just when runnning/opening my existing project.
This the error that I got: (with versions)
There is only simple steps can solve your particular scenario issue quickly.
1) Install the React native cli in your project or globally.
npm install -g react-native-cli
OR
npm install react-native --save
then start your project by using this command
npm start
If any dependencies issue please follow the second solution
2) Please make sure you're installed all dependence
yarn install
OR
npm install
under your project directory
I'm pretty sure your issue will fix by using 1st solution Thanks.
it is simple:
1.npm install
2.react-native run-android
Here I guess you have the RN environment to run already on your side.
cd path_to_project
install packages(there are two following ways to install packages).
2.1 yarn install
2.2 npm install
react-native link(optional - you need to run this command if existing project use RN packages which need to link such as
react-native-vector-icons)
optional(if project use pods) cd ios pod install
react-native run-ios or react-native run-android according to the platform which you want to run on.
I don't think above is perfect instruction give you how to run the existing react-native project, But I am pleasure if give me some hints or help to you.
You can find official guide here
Sometimes npm's cache gets confused and need to reset it by using below command:
npm cache clean --force
Also try below command:
npm install --save-dev react-native-cli
Hope it will help you.
I am Android Developer, I am new to react native development. For this, I followed bellow React Native Document
https://facebook.github.io/react-native/docs/getting-started.html
I did the following steps
1, I have installed node
2, I Have already installed JDK
3, I have installed Android studio
4, set the ANDROID_HOME path in environment variables
And in command prompt, I did run the following commands
npm install -g react-native-cli
Then create a new application, for this
react-native init AwesomeProject
Then successfully created the application, then go to that folder and run the application.
cd AwesomeProject
react-native run-android
Then getting the following error
And this is the node js error
So please help me, Thanks In Advance.
Try to follow the workarounds here : https://github.com/facebook/react-native/issues/4968.
Kill the bundler process, delete your modules folder, run npm install, rm -rf $TMPDIR/metro-cache-*, also rebuild your android project.
If this doesn't work, you can as well try to create your app using create-react-app toolchain which should be working fine : https://github.com/facebook/create-react-app .
This is a bug within Windows environment for React Native 0.56 you may need to upgrade/downgrade your React Native version. I encountered it, made even worse when I tried to use Typescript.
What I would is run a new project using the latest version 0.57 and just build, if it doesn't build straight away - then use 0.55 until the issue is resolved.
Try this solution, it was worked for me.
Steps to create New React Native project:
react-native init projectName (ProjectName: eg.HelloWorld)
cd HelloWorld
npm start
Open another node command prompt and goto the project path and then run your project with below given command.
react-native run-android
I think you missed 3rd step i.e to start npm.
And if you are again getting same error, follow these steps:
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-*
rm -rf /tmp/haste-map-react-native-packager-*
react-native run-android
When I run react-native link on my RN project, I got below error:
$ react-native link
rnpm-install ERR! ERRPACKAGEJSON No package found. Are you sure it's a React Native project?
Cannot read property '_text' of undefined
I have searched that some people say run react-native upgrade will resolve this issue. I have tried but no lock. My react version is shown as below:
$ react-native --version
react-native-cli: 2.0.1
react-native: 0.39.2
How can I solve this issue?
Follow below steps in order -
npm cache clean or yarn cache clean
rm -rf node_modules
yarn install or npm install
react-native upgrade ( You can choose no in all steps)
react-native link
If you get permission related error use sudo with all commands.
A little late but this may help someone else. My problem was large commented out copies of <manifest> ... </manifest> in android/app/src/main/AndroidManifest.xml. Once I removed commented out copies, link worked as expected.
It seems xmldoc had touble parsing the manifest even though the AndroidManifest.xml was valid XML. Calling react-native link uses ../node_modules/react-native/local-cli/core/android/index.js. To debug such issues in future I would start with putting debugging statements in ../node_modules/react-native/local-cli/core/android/index.js and narrow down to the root cause of the issue. Similar logic should work for ios.
For me cleaning the gradle did the trick.
1- Go to the root directory of the project.
2- Run cd android
3- Run gradlew clean
4- Run cd..
and then run the link commands
i had this problem. i fixed it with following way:
1- edit "/android/app/src/debug/AndroidManifest.xml"
2- add package="com.YOUR PACKAGE NAME" inline manifest tag. like:
<manifest package="com.YOUR PACKAGE NAME"
note: replace "YOUR PACKAGE NAME" with your package. you can find it in "/android/app/src/main/AndroidManifest.xml"
3- cd android
4- ./gradlew clean
5- cd ../
6- react-native link
try to go android -> src -> main -> AndroidManifest.xml and delete all comments here. After that rerun react-native link, and all is working for me. Good luck!