Good Day, I am pretty new to react native and I ran into an issue, my metro bundler starts and gets stuck at loading dependency graph with ('...'), not moving forward or backwards
I have tried using yarn start, changing the ports although my port 8081 is free.
Any other suggestions would be appreciated.
EDIT: any other alternatives to metro bundler?
Screenshot:Its just stuck here
Screenshot II: Emulator
Turns out it was my node version, was using v12, I downgraded to v10.
Thanks for your suggestions.
Did you run react-native run-ios or react-native run-android as well?
because react-native start only runs metro and usually when dependency graph is done it stays there hanging until you connect a simulator/device but it is working as expected.
You can try with react-native --reset-cache to clean up metro after some bad start, but in any case this only starts metro bundler. To get device running use the methods above
For the latest version of RN 0.62, there could be two things that could be wrong.
Make sure your node version is < 12.15 since there is a memory leak issue and you would have few issues running the bundler.
If you are in MacOs Catalina , just go to the Security & Privacy -> files & folders in the system preferences and change the permissions for watchman.
The simplest way to debug this issue is running the bundler in sudo
sudo react-native start
And if you have permission issue with watchman then you should see bunch of errors in your console.
Always getting white blank screen when running the app on the physical device in android case. Using react-native-navigation can't able to detect the bug please help!
I have created a fresh react-native project and integrated the react-native-navigation library into it and when I am running the app in my physical device by running the command yarn run android it runs but shows blank white screen in android. Once it runs successfully but now it won't.
run react-native start in a separate terminal and then run react-native run-android.
i recently faced two kind of white screen problem
1.always showing white screen (due to bundling..)
solutions is
react-native start
and then
react-native run-android
2.it shows white screen some particular seconds or suddenly always shows white screen in properly working app
due to app cache or traffic
solutions is
Androidmanifest.xml
android:usesCleartextTraffic="true"
If Debug JS Remotely is on then also we see the blank screen. I have recently come across this issue. So check if you are already running Debug JS Remotely. If you are running it already then just stop remote debugging. And it will work.
Running ./gradlew clean on android folder and then uninstalling the app from the phone worked for me.
In my case, was using my Phone to test and develop, and suddenly white screen issue appeared.
The app was not loading at all, no error, no code update only white screen comes up after npx react-native run-android.
My solution was to clear the phone cache as it was loading from cache.
I restarted my phone then cleared all cache and then it worked for me.
Use "react-native init" command for the creating the project as it only build react-native not expo and the other node modules for you and then build for the particular platforms for eg. in my case "react-native run-android" and it works.
There is step-by-step what I do to run app on physical android device:
Open 'android' folder from app folder in IntelliJ
Run in IntelliJ, target: USB device
After .apk finish installing, shift-right click in app folder, run PowerShell, type 'react-native run-android'
After it finish, open app on physical device, shake it to open developer menu, and hit 'Reload'
you can also hold menu button on your device to open developer menu(while app is running)
I also faced same issue in the emulator. So the way I solved it is by going into Android settings - Apps - select the app, and force stop it. Then I tried opening the app again and it worked.
Before I did this, I removed the 'build' folder under /android/app/ and re-ran. Did not work.
One thing that often resolves this problem for me is re-installing your node_modules folder and cleaning your gradle build. You can do this manually, however, if you've run into this problem once or many times, consider running a shell script to automate this process.
Create a file called clean.sh and paste this inside:
echo "Removing node modules from $1 then reinstalling..."
cd $1
rm -rf node_modules
yarn install
echo "Cleaning gradle project..."
cd android
./gradlew clean
cd ..
If using npm, change "yarn" above to "npm".
Put the file above in the parent directory of your project (if your project is located at C:\Users\your.name\projects\project1 put the clean.sh file at C:\Users\your.name\projects\).
To run the script, inside of Git Bash or your Unix terminal run this (make sure to change the name of the directory below to the parent directory of your project):
cd C:/Users/your.name/projects
./clean.sh <project-name>
Now when restarting your app, try also reset the packager's cache.
With yarn:
yarn start --reset-cache
yarn android
With npm:
npx react-native start --reset-cache
npx react-native run-android
In my case I had a metro terminal running from my previous project. closing it and running the new project again solved the issue.
Use react-native-splash-screen. I try many ways to fix this issue but it's not working and i think this is the best way.
For me my wifi was disconnected on my test device.
I had to make sure both my computer running the react packager/server and my device were connected to the same wifi network.
I have recently faced this kind of white screen problem
1.always showing white screen after Release
"npx react-native start"
and then
"npx react-native run-android"
2.it shows white screen some particular seconds or suddenly always shows the white screen in a properly working app
due to app cache or traffic and android Newer version also in some case when you are using API with HTTP instead of HTTPS
The reason is that newer android versions are more secure and they try to restrict HTTP request
solutions are
add this line in path project\android\app\src\main\androidmanifest.xml:
android:usesCleartextTraffic="true"
In my case:
1: I tried npx react-native start to run metro.
2: Then write npx react-native run-android in cmd, there was still a white blank screen.
3: I still faced the same issues, then I always comment on every single component, and automatically, I resolve the error. This is the best technique I ever used.
If you are trying to get it working on a Android device, make sure you have first tried to clear cache for the App, doesn't matter if reinstalled.
Try the other answers only after you have cleared cache.
It can not find its navigation's route. You should check the navigation.
After reload the project in simulator, suddenly I am getting this error again and again:
Requiring unknown module "607". If you are sure the module is there, try restarting Metro bundler. You may also want to run 'yarn', or 'npm install' (depending on your environment).
Close all your terminal and restart your simulator and run . run it again it works for me.
Try clearing the metro cache. Did you update your package.json or link anything recently? Try deleting the app on your phone and reinstalling ... Sorry, I've seen errors like this and I know they can be frustrating!
Just an addition to the correct answer, that you should restart terminal AND delete app from simulator or physical device
I am on Windows.
Here are the specs
react-native-cli: 1.0.0
react-native: 0.32.0
Starting react-native using
react-native start
it will take upto 3-4 mins to start serving JS bundle, but after initial run it won't detect changes made in different files.
Reloading the bundle from device or simulator always return the bundle of the first run. I've to kill and restart the react-native.
It was happening now frequently, previously it only happens if the react-native has been started and stayed idle for sometime.
If your changing only JS file and you want to see changes immediately, enable hot/live reloading. Note this works only for development build, if your doing production build you should use Codepush.
react-native's runing command has upgraded for a while, and it uses caches to run faster,but it also cause a problem that cache is not cleaned after you change your code.so sometimes(may be always),it's runing the cache.
my solution is cacel the runinng process, and restart react-native.
ctrl+C & react-native start
looking for a better solution.
I just started looking into react-native for android development and setup the environment in windows. Then it turns out there's no watchman release for windows.
The react native packager runs without watchman but the app reloads or live reloads doesn't work and I needed to restart react native packager every time I make changes to the code. This takes at least 1 minute for some reason.
Is there anyway to make this more bearable? For e.g. trigger file changes to packager manually or alternative to watchman that works with react native packager.
Thanks in advance
hot/manual reloads should work on windows, you should not have to restart the packager too often