React Native project not opening Metro Bundler in Browser - react-native

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

Related

Expo doesn't show Logs

When I run my react-native app I can't see my logs.
The device where I started it doesn't even show up in the list. I tested it with iOS, android and an simulator. Any suggestions?
I use the following expo versions:
"expo": "^40.0.0",
"expo-cli": "3.28.6",
You can override console functions like console.log and that can completely change the way they work, it can also intend to do nothing and just disable the log in these cases just remove the libraries you installed recently or restore your project to the point the console worked then find the problem and fix it.
In my case I was running the app on an emulator on my local machine.
What solved it for me was changing the connection setting from LAN to LOCAL.
Either change it through the expo developer tools or just run expo start --localhost instead of expo start
Change a device name to English!

What to enter in the Devcert Password asked during expo project...?

I am using Expo-cli and React Native for project and i have a project named as "Formik" when i start the project in VS Code Terminal and type expo start all process is good.
But the problem arise when i click on the button Run in web Browser it prompts a message that starting your project in web broswer but when i see the VS Code Terminal it is asking me for a Devcert password which i don't know what password i should type in that particular field.
Please help me out in this and how i can able to run my project again in web browser.
Thanks in advance..!!
i am enclosing the message and i am using the following versions of software
Expo-cli : 3.20.1
React-native : 2.0.1
This issue is described here, on expo-cli GitHub. What worked for me was running expo with this parameter.
expo start --no-https

how to connect app to development server and makes it sensitive to changes?

I'm working on an app that was developed by someone else and referred to me for debugging. I downloaded the project from git and now when I install it on my android device using the react-native run-android command and change the codes and save it, nothing happens in the app and I have to reinstall using "react-native run-android" to see the changes. what should I do to see the changes online?
The solution was quite simple. The only thing I had to do was to shake the device and click on "enable hot reloading" in the opened menu.
Try to clean the Gradle and run again. and also check are you able to get developer menu by clicking ctrl/command + m.

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.

Could not install the app on the device - react native on windows 10

Everytime I try to launch a react native project I got this error
Could not install the app on the device, read the error above for
details. Make sure you have an Android emulator running or a device
connected and have set up your Android development environment
I reinstalled nodejs, python and jdk using choco as suggested on official docs. Every single packages is installed as well as sdk 23.0.1
I can see my virtual device if I run adb devices USB debugging is activated and it's running android 6.
I setup ANDROID_HOME path in environment variables, I'm using same sdk path as you can see in the picture. I also setup another one for JAVA_HOME and Python.
My PATH looks like this:
I just don't understand what I'm supposed to do. I'm using a surface pro 4, Windows 10. I can run projects using expo. I literally tried everything, restart computer, start cmd using admin, create new virtual devices, uninstall everything and start from scratch, it just don't work.
You have pointed out two issues; first, make sure you have an android emulator running. To do that, you run adb devices and you say you can see you device.
The other issue is with the environment. To make sure your environment is setup properly for android, go to the root of your react-native project. Open the android project using android studio.
All errors with your environment will show up, use the automatic fixes provided by android studio. Clean the project in android studio. Close studio and go back to command line, run react-native run-android
Everything should work now.
When doing react-native start it will intentionally hang at "Loading dependency graph" (its not really hanging, its just waiting to receive build/bundle signals). This is correct. You have to open a second terminal then do react-native run-android.
If you get errors, then cd android in your project folder then run ./gradlew clean, then after that do another react-native start then react-native run-android.
Solution is to delete all java JDK and reinstall v8 / change JAVA_HOME to the new path.
Also changing gradle-wrapper.propertiesfile for each project you want to run
# update gradle to latest version
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4.1-all.zip
Sometimes it dosen't compile with v4 so I have to use v3. React native is definitely confusing.
after install dan update environment JDK now I can install app on my device