React Native screen stuck at loading screen - react-native

I am creating a simple app. It was working smoothly in emulator but after running on real physical android device it is not working on both emulator and device.
I am using react-native-cli.
After running
npm start android
I am getting below screen.
And in device it showing loading please check the below image. I patiently waited but still no luck its on the same loading screen.

Have you tried to run it on Android Studio itself after this command:
npx react-native start --reset-cache

Restart your phone.
That's all I had to do and the issue fixed itself.

Related

"New update available, downloading..." on Expo

After opening my React Native project in Expo, I get a "New update available, downloading..." infinite loading on the Android emulator.
I tried restarting the server and restarting the emulator, expecting to see the actual content of my React Native application.
I managed to solve this problem by following these steps:
Stop the server.
Uninstall Expo on Android emulator.
Run npm start.
Reopen the application on Android emulator.

Android simulator is not loading on react-native application (Expo)

After the npm start, when the android simulator is open and running with Pixel3, if I 'click' a (for Android emulator), this error appears and the app does not open on the emulator
Trying to open the project on Android...
Installing Expo on device
-Couldn't start project on Android: Error running adb: Failed to install C:\Users\Atif\.expo\android-apk-cache\Exponent-2.16.1.apk:
Expo Press ? to show a list of all available commands.
|
This download is taking longer than expected. You can also try downloading the clients from the website at https://expo.io/tools
I also tried uninstalling and install again. Also I Tried Opening the emulator then run npm start.
Hope Someone Help me. But for whoever helped me i will appreciate their help. Thanks in Advance !!!
first, turn off AVD , then restart start the system, and open AVD and expo project. it will work mostly. If not delete the previous Pixel3 device , restart the system and take a new device and try.
This is because of access issue to open the emulator. Can you manually start a emulator device open, and check react-native run- android. Hopefully if the app is happy, it will install on the emulator.

React Native Expo app - unable to open app in iOS emulator

I want to run my React Native app in the iOS emulator. Here is what I done so far:
I installed XCode, along with its command line tools, and can bring up the emulator without issue.
I created an empty React Native app using the Expo CLI, per the instructions here. https://facebook.github.io/react-native/docs/getting-started. I am running on Node v10.0.0 on a Mac.
Afterwards I install all the necessary dependencies.
I then run "sudo npm run ios". This fires up the Metro Bundler as well as the iOS simulator. The Simulator loads up after about 5 minutes of waiting, but my app does not start up.
What am I missing here?
I should note that I prefer to stick with Expo, so I'd prefer not to have to eject.

React Native white blank screen issue

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.

IOS emulator app stay in background

I have a problem when running react-native run-ios on my project.
The IOS emulator launch well.
Then the application start (react-native white splash screen) and immediately after that, it return me to the Iphone home screen.
If I Cmd-Shift-H (with pressing H two times) I saw the app in the background (still with the react-native white splash screen).
When I click on it, it return me to the home screen again.
If I launch the Xcode project and run the app, it work fine and I can navigate in my application.
I've had some troubles with my app before, the IOS version was 'abandoned' and I've installed a lot of modules and changed the name of the project in the mean time, before trying to make it work on IOS.
Then I've decided to create a new project with react-native init myNewProject (because I couldn't figured out how to fix the IOS, something with a workspace not configured) and copy paste my old src and index.ios/android.js inside.
So now Android is still working and IOS is only working if I launch the app from Xcode.
I've tried to reset the emulator but it don't change anything.
I don't have any logs about app crash or something.
The Android app version is working fine.
Any idea ?
Logs
I've put the device logs after running react-native run-ios on a gist
https://gist.github.com/ansmonjol/f6fa1e71a20b944bf67429c57d081165
Additional Information
React Native version: 0.35
Platform: IOS
Operating System: macOS El capitan
Xcode: Version 8.0
I ran into this problem, and solve it:
In my case i install third-party native component in my project and link it using command react-native link <component-name>. Than i have a problem about you wrote:
Running project by Xcode - works fine. Bundling start, after loading dependency graph.
But runnig project by react-native run-ios app hide immediately and bundling not started after loading dependency graph. And not any errors happened.
I tried reinstall all, clean npm cache, react-native upgrade, delete build folder, delete derived data... nothing helped.
I found one way that helped me:
I remove that problem library not manyally from Xcode, but from terminal using command react-native unlink <component-name>. Its way to resolve this problem for me, maybe for you too.
Sorry for my english.