This issue keeps coming and going and i'm really confused. I have used the command expo-cli start to start all of my react-native projects but sometimes it will run and i'll connect my phone to only find it displays the splash screen and then just an empty white screen. If I go into my other projects the same thing happens. This happened before and just fixed itself randomly but it has seemed to happen again and I don't know what to do. No error displays and the console says the javascript bundle has built successfully and my phone has connected. I am using the latest version of expo-cli
if for android just type this in terminal to see the error message that you'd be able to more easily see in Android Studio:
adb logcat | grep ReactNativeJS
or
change http urls to https in your project (preferred)
Related
After 5 days I have been able to fix the issue with initializing a react native cli project. Now I can set it up successfully.
The issue now though, is when I try to run npm run ios in order to run the ios simulator. Of course this is done in the 2nd terminal tab, the 1st tab is where I npm start to start the react native metro server.
Basically after npm run ios, my ios emulator successfully opens up by itself. However, straight after, VScode gives me a long error. I have put all the error into pastebin: https://pastebin.com/egnLA9ei
I ran npx react-native doctor and fixed the issues. Here is the screenshot
Even though it is all green ticks, the same error is still there. (Lets focus on ios for now, ignore android for now)
I feel so close to finally being able to continue my learning. If you could offer some help, please do.
Thank you for your time.
Just updated my Mac to the official release of Ventura, and I cannot launch my application via react-native run-ios.
Expected behavior:
running react-native run-ios will launch an Xcode simulator and a terminal window with Metro running.
Current behavior:
Xcode simulator opens, main terminal says app was built successfully, but an error is thrown instead of the metro terminal opening:
“launchPackager.command” can’t be opened because (null) is not allowed to open documents in Terminal.
The simulator just shows a white screen and can't be interacted with.
What I've tried:
manually opening node_modules/react-native/scripts/launchPackager.command
opens Metro terminal but is not connected to the app
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Reloading app...
giving Terminal full disk access (no change)
This happened to me after upgrading to macOS Ventura. I happen to use iTerm as my main terminal, not the built-in Terminal.app so the following fix only applies to that scenario:
Set iTerm as the Default Handler for *.command Files
Open node_modules/react-native/scripts/ in Finder (open node_modules/react-native/scripts/)
Right-Click on launchPackager.command and click Open With then choose Other...
In your Applications directory, select iTerm and click Always Open With
After this, you might need to run npm run ios again from this terminal window. However, from now on, Metro will open in a new iTerm tab instead of trying to open the command in a new Terminal window.
For me, this was the desired behaviour and it removed this warning.
Note In future, any *.command files will now open with iTerm instead of Terminal.
I encountered the same problem as you, I installed another terminal (iTerm2), then randomly found a .command file, and in the display introduction, changed the default opening method to iTerm2enter image description here
I'm having this issue after upgrading my MacOS to Ventura 13.1.
If you don't want to use iTerm as the accepted answer suggest, the workaround I found was to look for the launchPackager.command file inside node-modules/react-native/scripts/ and open this file manually every time you run your app for the first time (specifically when the error pop-up appears). This will open the terminal with metro running already.
I know that manually processes are not the best, but I don't want to use iTerm :)
Using Intel version of apps (Webstorm, Android Studio, other IDE etc...) fixed my problems. I encountered the same issue and thanks to Intel version of Webstorm and Xcode on Rosetta I can able to pod install and other operations.
Note: I'm using Intel version of Android Studio, WebStorm. Also Xcode uses Rosetta 2. No problem detected and everything works perfect. I can able to develop React-Native & Native Android & iOS and Flutter apps without problem. Before that I was using Silicon version of WebStorm and almost no function worked.
Config: MacBook Air, macOS Ventura 13.2 on Apple M1 processor.
For Most of the case you just have to delete node_modules and install modules again (npm i). This happens when project was copied from old mac which had node_modules folder created by the old user, or if the system thinks so
This happened to me after i configured my terminal for the look and feel - but with iterm2, oh my zsh, and powerlevel10k
App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
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.
I am knew in react native and I need to run a project. I used the following command in the folder of my project:
1- npm start
2- react-native run-android
However, I have a strange problem. Whenever I change any thing in the code, nothing happen in emulator and the emulator show me the previous thing!
I have done it with cell phone connected to the PC and see the same result!
I even stop the emulator and start it again but, I see the same problem. The emulator do not show any changes in the code and show a constant project. Can you help me?
Update:
As I shake the cell phone and reload it, I see the following red screen error:
Could not connect to development server.
You need to enable either Live Reload or Hot Reloading. Within the simulator, you can access the menu with the Cmd+M combination or click the icon (see screenshot) then just choose the option you want.