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.
Env:
Mac OS X
nodejs 8.9.1
Xcode installed
using boilerplate generated by https://github.com/react-community/create-react-native-app
Symptom:
React Native stuck on Loading dependency graph, done and when go to localhost:8081, I see React Native packager is running.
Also the command line after I did npm start what I got is Loading dependency graph, done. and just stay there, even after I waited for almost 5min.
Actually I found the answer myself.
There is actually nothing wrong. I forgot to start the React Native in the simulator! lol Silly right?
So basically let say if you want to start the iOS simulator in a MacOS, you can just do react-native run-ios --simulator="iPhone 5s" in your project root. Then boom! your project started!
Note that React Native can't really run in the browser, it has to be running inside a phone simulator either iOS or Android.
See official doc for more https://facebook.github.io/react-native/docs/running-on-simulator-ios.html
Have fun!
To fix it, I also update iphone to the latest version.
Is it an issue with react-native-azure-ad OR expo ?
Getting below error:
If you get this error:
ScrollView has no propType for native prop RCTScrollView.onScrollAnimationEnd of native type BOOL
If you haven't changed this prop yourself this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
It's very likely that your device is trying to run JS code that doesn't correspond to the native code on your device. The first thing to do is look at your Expo SDK version. In app.json, you should see a field called "sdkVersion" -- for example, it might be "21.0.0" -- which tells the Expo client which version of the native code to run.
Using the correct version of React Native
We highly recommend that you use a release of React Native that has been tested to work with Expo. In the case of SDK 21, you'd put this in your package.json's "dependencies" section:
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
The above snippet works only for Expo SDK 21! If you are using a different SDK version, you must use a different version of React Native!
Clearing your caches
We also want to ensure that your device doesn't try to run a stale copy of your code. There are several caches with Expo and React Native, so let's clear them just to be safe:
Stop the React Native packager. Close exp or XDE.
Force quit the Expo client on your device
Clear the Watchman cache (if you are using Watchman): watchman watch-del-all
Clear the Metro bundler cache: rm -fr $TMPDIR/react-*
Make sure your npm dependencies are rebuilt and installed correctly: yarn --force
Start up exp (exp start --clear to make sure we clear the Metro bundler cache for good) or XDE
Open your project on your device in the Expo client
I'm trying to run a boilerplate react-native app and the packager seems to stall out right at the beginning when the javascript bundle is requested. Eventually the iOS simulator gives up and throws Could not connect to development server.
Here is the terminal output:
[01/17/2017, 10:48:00] <START> Initializing Packager
[01/17/2017, 10:48:00] HMR Server listening on /hot
React packager ready.
[01/17/2017, 10:48:47] <START> Requesting bundle
bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
I haven't been in react-native for a few months but I used to be able to specify whether the app should load from a bundle or just load the js directly. I would load directly when the xCode project was in debug mode or from a bundle when in release mode.
Again this is just straight boilderplate - no external packages or anything. Just using react-native init TestProj and then cd TestProj/ && react-native run-ios
I'm using the last version of react-native 0.40.0 and the expected react dependency of react#~15.4.0-rc.4.
Thanks for any help on this.
I'm not sure what the issue was but it was fixed after I restarted my computer. I also had issues getting the code to refresh once the app was loaded. That was fixed by uninstalling nodemon globally.
I have some issues with React Packager on Windows
Loading
After loading (long long wait), my application is lauching well on AVD Android. But when i change a file and i reload on my app, i see no change. I can do that 10X and no change. (I'm talking about the welcom react base app and i change index.android.js file so nothing very exotic)
Some times, the change on *.js file are detected and my app update well. When it work, it work all the time until i stop the packager. When it doesn't work, it doesn't working until i restart packager.
So for too work, i have to launch, try, launch, try, launch try until it is ok. As you can see, the loading can take 3min so it's not cool.
I tried to activate, desactivate hot reload but no change.
I don't think it's a network issue because after reboot packager, sometimes i have the old version. So i use --clear-cache option. And when i reload the app in android, i can see that packager catch the request but don't send the good version.
So i've conclued that Packager didn't detect very well the file change.
I know on Windows Watchman does not existe maybe there is a work around !!! If you have a solution for slow loading i'm ok too :-)
Can you help me ?
npm -v react-native : 2.15.1
npm -v : 2.15.1
node -v : v4.4.4
Thank you !!!
I had the same problem with nodejs 4. But when I installed nodejs 6 and make run-android init again the problem is fixed. Try to uninstall node 4 and install node 6.
After deleting .expo and node_modules folders and running yarn install changes detection started working again