react-native on AVD could not connect to exp://IP:PORT - react-native
Following the facebook.io tutorial for using react-native (https://facebook.github.io/react-native/docs/getting-started.html) I am running into a problem where the AVD android emulator I am using to test the app is complaining
Something went wrong. Could not load exp://192.168.200.83:19000.
Note this is being done on a fresh / unedited project generated via create-react-native-app myapp:
# after having started the AVD and creating the react-native app...
➜ myap npm start
> myapp#0.1.0 start /<path to my react native app>/myapp
> react-native-scripts start
3:26:37 PM: Starting packager...
Packager started!
Your app is now running at URL: exp://192.168.200.83:19000
View your app with live reloading:
Android device:
-> Point the Expo app to the QR code above.
(You'll find the QR scanner on the Projects tab of the app.)
iOS device:
-> Press s to email/text the app URL to your phone.
Emulator:
-> Press a to start an Android emulator.
Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.
Logs from serving your app will appear here. Press Ctrl+C at any time to stop.
› Press a to open Android device or emulator.
› Press s to send the app URL to your phone number or email address
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)
<press a>
At this point a window opens on the AVD (presumably trying to start the react-native app) and displays the error described above.
(Also tried starting the app with npm run android and opening the link from the expo app on the AVD, but still getting same error).
Does anyone know what can be done at this point (totally new to react and mobile development, so I mostly only followed what was in the tutorial)? Any other information that that I should add to this question?
Looking at this a similar github post (https://github.com/react-community/create-react-native-app/issues/595#issuecomment-373539195), it seems to be a problem of using the wrong network (ie. using a LAN URL that the AVD can't access). And using the exp start --tunnel method described in that post did generate a URL that my mobile phone expo app could actually interpret. My steps for getting things working are shown below. (Note I am using Ubuntu 16.04)
Looking at the docs for installing watchman (https://facebook.github.io/watchman/docs/install.html#system-specific-preparation) (which is used by react-native (on linux)). I see that there is a specific thing about increasing inotify limits on linux (though without any specific values given) (for info on inotify, see https://en.wikipedia.org/wiki/Inotify).
So after installing watchman from source (as seems to be the only way to currently get it on linux) ...
$ cd ~
$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.7.0
$ sudo apt-get install -y autoconf automake build-essential python-dev
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
$ watchman --version
... we increase the inotify limits.
$ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches \
&& echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events \
&& echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances \
&& watchman shutdown-server
Based on this older SE post (https://askubuntu.com/a/155343/760862) (basically indicating that it does not take up much resources at all), I assume (and hope) that increasing it like this is OK.
(Increasing the inotify limit like this really seemed to help with a bunch of other problems I was having working with react-native projects (eg. javascript freezing when trying to bundle for export to a device, devices complaining that "something went wrong" or being totally unresponsive to my trying to export prohects to them, etc.))
Now, navigate to the project directory and start exp server process with --tunnel option. From the docs (https://docs.expo.io/versions/latest/workflow/exp-cli):
tunnel (default), lan, localhost. Type of host to use. "tunnel" allows you to view your link on other networks
exp start --tunnel
22:21:14 [exp] Your URL is: exp://xm-apt.myexpousername.myapp.exp.direct:80
22:21:14 [exp] Instructions to open this project on a physical device
22:21:14 [exp] Android devices: scan the above QR code.
22:21:14 [exp] iOS devices: run exp send -s <your-phone-number-or-email> in this project directory in another terminal window to send the URL to your device.
22:21:14 [exp] Instructions to open this project on a simulator
22:21:14 [exp] If you already have the simulator installed, run exp ios or exp android in this project directory in another terminal window.
22:21:14 [exp] Logs for your project will appear below. Press Ctrl+C to exit.
If you see a URL like exp://192.168.200.83:19000 instead, you should also see some logging message like
21:30:35 [exp] Switched to a LAN URL because the tunnel appears to be
down. Only devices in the same network can access the app. Restart
with exp start --tunnel to try reconnecting.
just restart with the same command and the URL should be a non-LAN location.
Optional (if you want to use the interface from npm start in the project instead)
Then open another terminal tab and run the npm start command like so
REACT_NATIVE_PACKAGER_HOSTNAME='xm-apt.myexpousername.myapp.exp.direct' npm start -- --reset-cache
where the REACT_NATIVE_PACKAGER_HOSTNAME is set to the exp URL from the previous step (info about this can be found in the README of every react-native app created via create-react-native-app). The URL created here should now be something like
Your app is now running at URL: exp://xm-apt.myexpousername.myapp.exp.direct:19000
Now open yet another tab. And notice that on tab running the exp process, there should be instructions on how to open the project on different devices (the earlier in this answer for example). Use these instructions to open the project for different devices using this tab we just opened (in my case, for an AVD, runnning exp android (you should see some message in the tab running the exp process like 22:28:57 [exp] Finished building JavaScript bundle in 97ms letting you know it is working)).
Totally new to react-anything so if someone sees anything about this setup that is superfluous or weird, please let me know.
Related
Expo won't start the simulator / emulator
I always used to start my Expo project by typing in the terminal expo start and then i (for iOS simulator). The day after iOS 16 got released, Expo started to behave differently. After running expo start it gave me a warning: This command is being executed with the global Expo CLI. Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421 To use the local CLI instead (recommended in SDK 46 and higher), run: › npx expo start and after pressing i it threw the following error: Error running xcrun simctl help: You may need to run sudo xcode-select -s /Applications/Xcode.app and try again. XDLError: You may need to run sudo xcode-select -s /Applications/Xcode.app and try again. Unable to verify Xcode and Simulator installation. After this I killed the terminal and in a new one I decided to follow the command it gave me in the warning (after running expo start). I ran npx expo start and then i and it threw me a new error which was: Unable to run simctl: Error: xcrun exited with non-zero code: 72 CommandError: xcrun is not configured correctly. Ensure sudo xcode-select --reset works before running this command again., but this time it didn't gave me a warning before pressing i. I also tried to run the commands shown in the errors and re-run the app, but still the same errors were thrown. I updated my OS, XCode and also deleted and cloned the project again so i could re-install dependencies just in case something was wrong with them. I have attached the GitHub repo link of one of my projects so you can test it as well. It's not just this project, it's all of the projects I use Expo, even the new ones won't start. If anyone has any idea how to fix this and why this happens, I would really appreciate it :)
Uninstalled and re-installed Expo globally. Updated the simulator to iOS 16 and opened the simulator before running expo start. It works as it did before.
Expo React-Native iOS Simulator not working
Hello I'm facing a problem with Expo React-Native. Whenever I try to launch the iOS Simulator. I get this error: Simulator is installed but is identified as 'com.apple.CoreSimulator.SimulatorTrampoline'; don't know what that is. Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command `sudo xcode-select -s /Applications/Xcode.app`. Screenshot of Expo Results My NPM Version is 6.7.0 react-native-cli: 2.0.1 react-native: 0.57.1 Expo Version 2.11.9 Also I made sure my Command Line tools on Xcode is setup perfectly Xcode CommandLineTools Finally, I also tried to run the command sudo xcode-select -s /Applications/Xcode.app Nothing works..
I had the same problem, fixed it by manually starting the simulator app before starting expo. The app is located in /Applications/Xcode.app/Contents/Developper/Applications/Simulator.app
expo client:install:ios This worked for me.
Manually opening the simulator first can help: open -a Simulator Then if using expo: expo start Finally click: "Run on iOS simulator"
If it helps anyone else, the fix of opening the Simulator first was not working for me at first because I did not have command line tools installed. You can open xCode, go to preferences > locations > command line tools and if that is empty you'll need to install them. Once they are installed, expo start will give the same error as OP, but you can then use the open -a Simulator && expo start suggestion.
According to this thread What does com.apple.CoreSimulator.CoreSimulatorService do?, you can just execute the launch correctly the simulator. killall -9 com.apple.CoreSimulator.CoreSimulatorService Actually, it works to launch the simulator, but if I restart once the simulator, the problem is still here. Update: Apple provided a patch 10.2.1. After an update of XCode through the App Store, it seems working better. My simulator boots with an error, but after press "i" again in the terminal, it works correctly even if I restart the process. Don't forget to update the latest version of expo-cli with npm install -g expo-cli
Simplest solution I have found; change your npm start script within the package.json file of your Expo project: "start": "expo start", > "start": "open -a Simulator && expo start",
Yes you can fixed it temporarily by starting the simulator app before starting expo : open -a Simulator; expo start But the next time you open it, you have to run both commands again as well. For now, you can aliasing start to open -a Simulator; expo start
Yup, additionally you have to give permissions every time you relaunch.. and because these are alerts.. the simulator takes forever to render. This is not an acceptable workflow. For now im just rendering on a device. Really hoping this gets fixed proper and soon.
🎉 I've been facing the same problem for a month, however I finally found a solution that worked for me: Updated my Xcode to Version 11.1 ✨ Opened Xcode 11.1: (1) Double checked if "Xcode 11.1" was selected as my "Command Line Tool"; (2) Under the "Components" tab, I manually downloaded a simulator (iOS 12.2) Updated Expo Client to #3.1.2 ✨ sudo npm install --unsafe-perm -g expo-cli Updated Node.js from version 11.6.0 to 12.0.0 sudo npm install -g n npm cache clean -f Restarted my project & my simulator npm start ✨ Which successfully launched my iOS simulator and built my project! ✨
Try to open the Simulator first from Xcode and then start Expo Metro.
For me I happen to learn that it requires all the three to make react native app run on the iOS simulator. Xcode should be running Simulator should be running Expo Start and click on Run on iOS Simulator It will then prompt on Simulator to install Expo Go for the first time and then would run app normally. I was missing one or the other in my first two attempts to run the app on iOS Simulator.
React native stuck at loading from localhost : 8081 on physical device using USB debugger
When I run react-native run-android it builds successfully and there after Mobile screen shows nothing more than loading from local host : 8081 I have tried adb reverse tcp:8081 tcp:8081
Start by closing the App on your phone and clearing phone memory. Close metro bundler on your PC. Then clear npm cache as follows: npm cache clean --force Then clean up gradle as follows: Change into android directory in your project folder: cd android To clean clean gradle simply run: ./gradlew clean cd .. back into your project's root directory. Build your app again using whichever method suits you. My preferred method for RN apps without expo on a windows machine is as follows: npx react-native run-android
Try either of these ways to fix it: Try to Open Developer menu by press Ctrl + M in emulator and choose the Setting port, then input the value localhost:8081. Try to connect the other wifi, then run 'adb reverse tcp:8081 tcp:8081' Try to change the URL on chrome to http://localhost:8081/debugger-ui/ Cheer!
Samsung DeX! Samsung DeX runs in the background to discover device connections, it uses port 8081. In my case, it interfered with Metro and adb reverse. Exiting the system tray app fixed the entire issue.
For some reason it was a watchman issue. I remember installing watchman a few days before and it was causing the issue. I uninstalled watchman and it worked.
Uninstalling watchman made it work for me.
Expo XDE is stuck when opening one of my projects
This has happened to me twice now when working on this project. I open the project using expo XDE and it just hangs there loading and never actually opening my project. The first time it happened I just created a new project and copied my code over. I don't want to keep doing that. I've seen posts where people talk about the wifi connection and mine is working just fine. https://imgur.com/a/0CWDDOC This second time around I tried running 'exp start' from the CLI when inside my project directory and I get this error https://imgur.com/kxxIELK I am able to open my other projects via the command line and with the expo XDE app. Let me know if there is any other information I can provide! Versions: expo XDE: 2.24.4 npm ls react-native : react-native#0.55.4 npm ls expo : expo#28.0.0 npm -v : 6.1.0 node -v : v8.11.1 exp -V : 55.0.4 watchman version : 4.9.0
Build react-native run-android on windows
I try build react-native run-android on windows this bug appear then i do follow the answer on this github issue try Command chmod 755 android/gradlew on root folder but chmod' is not recognized as an internal or external command, operable program or batch file. i think this answer for linux . Some body help me . Thanks for reading my question
The error states that you neither have any android device connected nor do you have emulator running. Follow this guide for android setup. If you already have android setup and running emulator, try restarting it and run following commands: Try running following commands: cd android && ./gradlew clean cd .. && react-native run-android
From your question seems like you are not started your emulator or device connected. Follow this steps:- 1.Open your CMD/Terminal from your system write this command cd "YOUR PATH TO ANDROID SDK" for example, mine looks like::- cd /Users/trainee02/Library/Android/sdk/platform-tools and then hit enter. 3.after enter in directory write this command export PATH="/Users/YOUR SYSTEM USER NAME/Library/Android/sdk/platform-tools":$PATH above command is for running android from MAC pc. then last command is 4.adb reverse tcp:8081 tcp:8081 hit enter or you can check reference that given in official site Running On Device React Native
You must update Tools sdk revision 23.0.1 on Android Studio