Related
I'm a beginner React Native developer. In order to create apps faster, I use Expo 6.0.1 on Mac OS. I've installed it easily (with Yarn) and I can run my apps in browser and emulators. But I have an issue with Metro Bundler.
In the terminal, when I type w in order to access the web interface, the browser opens the app itself on port 19006. I should also be able to access the Metro Bundler UI on port 19000. But rather than having this expected UI on http://localhost:19000, I have the following kind of json displayed in the browser:
{"name":"project","slug":"project","version":"1.0.0","orientation":"portrait","icon":"./assets/icon.png","userInterfaceStyle":"light","splash":{"image":"./assets/splash.png","resizeMode":"contain","backgroundColor":"#ffffff","imageUrl":"http://127.0.0.1:19000/assets/./assets/splash.png"},"updates":{"fallbackToCacheTimeout":0},"assetBundlePatterns":["**/*"],"ios":{"supportsTablet":true},"android":{"adaptiveIcon":{"foregroundImage":"./assets/adaptive-icon.png","backgroundColor":"#FFFFFF","foregroundImageUrl":"http://127.0.0.1:19000/assets/./assets/adaptive-icon.png"}},"web":{"favicon":"./assets/favicon.png"},"_internal":{"isDebug":false,"projectRoot":"/Users/me/Documents/projects/project","dynamicConfigPath":null,"staticConfigPath":"/Users/me/Documents/projects/project/app.json","packageJsonPath":"/Users/me/Documents/projects/project/package.json"},"sdkVersion":"45.0.0","platforms":["ios","android","web"],"developer":{"tool":"expo-cli","projectRoot":"/Users/me/Documents/projects/project"},"packagerOpts":{"scheme":null,"hostType":"lan","lanType":"ip","devClient":false,"dev":true,"minify":false,"urlRandomness":null,"https":false},"mainModuleName":"node_modules/expo/AppEntry","__flipperHack":"React Native packager is running","debuggerHost":"127.0.0.1:19000","logUrl":"http://127.0.0.1:19000/logs","hostUri":"127.0.0.1:19000","bundleUrl":"http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false","iconUrl":"http://127.0.0.1:19000/assets/./assets/icon.png","id":"#anonymous/project-bc40e47a-ee01-4104-9895-13fa07b1c8f4"}
I work on Mac OS with expo-cli version 6.0.1 (installed globally with Yarn) and working on Node 16.16.0.
I have already tried :
to uninstall then reinstall. With node 18.x.y and then node 16.16.0
delete the metro folder in the node_modules of the project and reinstall everything with Yarn
But no matter what I try, I can't get the UI :(
Any idea ?
Just came across your post as have the same issue but have now found out it is now excluded!
expo-cli#6.0.0 has been released with the web UI removed. The last release to include the web UI is expo-cli#5.5.1.206
React Native app debug on real device has some problems;
My metro bundler console gives warn:
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.
warning and that cause real IOS device connection problem.
When I try to reload my react native app from Chrome React Native Debugger, it gives above warning and I can not debug my code from on Chrome
react-native: 0.62.2,
IOS: 13.6
It happens on Real device connection. When I work with IOS simulator, there is not problem.
NOTE: My phone and macbook on SAME wi-fi network.
So problem is not related to different wi-fi network usage.
⚠️ For iOS users :
Check that your build target is Debug :
Xcode Product => Scheme => Edit Scheme => Debug (and not release ! )
⚠️ For Android users :
I have found a solution that I posted on github.
Not the best but it could be useful:
First, you have to open MainApplication.java
and remove import com.facebook.react.BuildConfig;
Next, follow these steps :
# Reset metro bundler cache :
`npx react-native start --reset-cache`
# Remove Android assets cache :
`cd android && ./gradlew clean`
# Relaunch metro server :
`npx react-native run-android`
And see the magic 🎉
See here :
https://github.com/facebook/react-native/issues/29396
Running this worked for me for a Physical Android Device.
adb reverse tcp:8081 tcp:8081
or
npm run android-connect
If you face an error saying 'More than two devices are running', make sure that the emulators like BlueStacks are not running.
Your iPhone has to be connected to the same network (WiFi for example) as your Mac, because they have to communicate with each other (React Native Doc).
If it's already the case, then fill in the DCHP server manually on your iPhone and Mac, using Google's server (8.8.8.8), because it could be due to DHCP problems.
You may need to disconnect and reconnect to your Wifi.
For me I need to set the bundler location in my app from "localhost:8081" to "192.168.1.XX:8081" which is my computer's local IP address where Metro bundler runs on and the port is 8081.
If you don't know which port your bundler runs on you can specify it as a parameter like:
npx react-native start --port 8081
Then you need to specify the location in your development app. To do that:
Shake your device
Click change bundle location (I am on RN 0.64 it may differ in yours)
Give the bundler location of your computer's IP and port where Metro bundler runs on like:
and they started to communicate with each other.
My problem was that I was not connected to the same WiFi on my Mac and Iphone.I turned the wifi off and back on on both devices, and made sure both the mac and Iphone was connected to the same WiFi. Annoying, but true!
Your iPhone & mac must be connected to the same network. If both device connected to same network you must check local network availability for your app. (this happened to me on a iOS 14.0 running device).
check local network - iOS 14
Settings -> Privacy -> Local Network
On Android, this may also happen due to a problem with the network security config. If you do use the network security config, try removing the line android:networkSecurityConfig="#xml/network_security_config" from AndroidManifest.xml
My problem was that the emulator I was using had airplane mode turned on (because I tested related functionality). The problem resolved when I turned it off, thus enabling network to operate as usual.
My problem is that the device is not connected to the internet. Throws the error. Try connecting stable internet connection.
When I remove network_security_config.xml and remove the following:
`android:networkSecurityConfig="#xml/network_security_config"`
It works
I work on IOS environment, testing on an IPad that is USB connected.
I managed to fix this issue by adding the bundler address (127.0.0.1) in the ipad to reconnect
Shake the device (opens react native debug menu) > Configure Bundler > "127.0.0.1" in the first field
Hope this helps someone !
What did the trick for me was the following:
In Xcode go to Debug/Detach from YourAppName
Then reattach it by going to Debug/Attach to Process, select your app from the list (usually the first entry at the top).
I tried everything and after running
adb reverse tcp:8081 tcp:8081
yarn android
it worked.
What worked for me in this scenario was these steps
run server with --reset-cache
run npx jetify
open the project in adroid studio
go to refactor -> Migrate to AndroidX (this was the step that i was missing earlier)
start your emulator
run the app from android studio and it should work
Sometimes it's a firewall / router issue - see if that's your problem:
Find out the local IP address of your computer (where your Metro bundler / server is running).
Open a browser from your phone.
Open the IP address from #1 with port 8081 (e.g. http://192.168.0.42:8081).
If it's not loading -> it's a firewall / router issue.
A simple solution would be to connect the computer to the phone's hotspot.
yarn start web
you can use this command to scan the QR code and see the app in you EXPO app at you mobile
You musk permit local network in the application setting in iOS. Otherwise, Metro can not find your app even in the same network.
For iOS on Xcode:
Go to Window > Devices and Simulators, Go to "Installed Apps" section, Click on +, Pick your app , Run your code.
(This issue happened to me when I run the app after I uninstalled it from the device)
For me the solution was to remove the installed app and build run in Xcode again.
Oh, I had the same problem with RN - for me - there was a problem with connecting iphone to macbook server on localhost - and it solved if I just turned off wifi on macbook and then turned it on again. (Yes, it sounds weird - but it's a common problem)
For me, on IOS, Xcode would be stuck in debugging, a breakpoint is active and Metro can't reload because no apps are connected. To solve this:
open Xcode
In the left-hand side panel, click from the top row on Debug navigator (if it's not already focused and in the view like it was for me)
In the bottom pane (which can be minimized fully, in which case you have to hold and drag from the bottom of Xcode to expand it into view) you see a set of debugging buttons, the most left
one is a blue arrow-head-shaped button that continues/unpauses the script, click it.
after unpausing the script my app would connect to Metro.
Easy solution ->
1- Go to Developer options of your phone .
2- Disable adb authorization timeout..
Now reload project and enjoy coding..
My problem was that i added --variant=release
npx react-native run-android --variant=release
So i remove it and worked for me.Like this:
npx react-native run-android
this error appear suddenly after updating expo-cli to version 3.2.3
I can't manage to run the application, it displays error like this when I run expo start / yarn start
Trying to open the project in iOS simulator...
Opening exp://127.0.0.1:19000 in iOS simulator
Expo Press ? to show a list of all available commands.
Fetching the user profile failed
getaddrinfo ENOTFOUND exp.host
even I open expo.host from the browser loading.. I tried using 2 internet providers, change dns, flush dns, etc. still not loaded.
I solved this by deleting all expo related files and folders in my project
.expo and .expo-shared specifically.
when you run expo start, expo will automatically regenerate those files.
Make sure you are connected to the same network as your phone and PC,
you can try signing in and starting the project from your recent development tab on expo client.
if this dosen't work try reomving some devDependencies that you're not really using, then delete the node modules and install afresh.
I was facing the similar issue. It got resolved, as I logged in to the expo in my project folder.
Using expo w, you can check if you are logged-in in expo. and use expo login command to login
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.
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