I just did npm start in my expo init project
Normally on your terminal it should be like this
Starting project at <directory here>
Developer tools running on htp://localhost:<port number here>
Starting Metro Bundler
BIG QR CODE HERE
However, mine is missing the Developer tools running on htp://localhost:<port number here>. So mine only shows this:
Starting project at <directory here>
Starting Metro Bundler
BIG QR CODE HERE
As a result I cannot open it in my local host, meaning I cannot access the metro bundler developer tools, the one where you have the option of running it on Android, iOS, web and where you can also choose the connection type to be Tunnel, LAN or Local
All there is is Metro waiting on exp://192.168.1.116:19000 but I am unsure how to access that
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
I am new to android development and am trying to learn react-native by following a tutorial here. The problem is whenever I try to start my react-native project within my simulated android device, expo cli cannot find it. This step is at the 25 minute mark of the video and my progress can be summarized as follows:
I have react-native on my machine and have installed expo cli
I've downloaded Android Studio which is located: C:\Users..\AppData\Local\Android\Sdk
I have my emulated android device up and running via Virtual Device
Manager
After typinng "npm start" When I type "a" within the terminal of WSL to run this app on my virtual android device I get the following message when it tries to open the emulator:
No Android connected device found, and no emulators could be started
automatically. Please connect a device or create an emulator
(https://docs.expo.dev/workflow/android-studio-emulator).
At which point my expo developer tools browser window displays that
Expo Developer Tools is disconnected from Expo CLI. Use the expo start
command to start the CLI again
When I goto the terminal and do this, it just restarts this failure over again when I type "a" to start my app in the simulated android device. Some of the solutions I've tried are:
following the documentation on the workflow android studio emulator link. I find though that all of the options within my version of android studio look drastically different, and that my file location is much different than what they have listed.
uninstalling and reinstalling Android Studio
Making sure SDK tools is checked as per this stack overflow post
following the instructions in this stack overflow post, however I am not trying to connect a phone via usb so this does not help me.
My setup is as follows:
OS: Windows 10
VM: WSL2 Ubuntu 20.04.3 LTS
Text Editor: Visual Studio Code 1.63.2
Android Studio: BumbleBee 2021.1.1
Expo CLI version: 5.0.3
here are some screen shots:
^ that one is right before I try to type "a" within the expo cli within terminal.
I'm working on a RN app in VS Code. I'm using an Android AVD loaded from AS. My Android emulator is currently displaying the following error: "Could not connect to development server." I've seen the following debug steps listed as part of an answer to a similar question on SO:
Open the in-app Developer menu.
Go to Dev Settings → Debug server host for device.
Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).
Go back to the Developer menu and select Reload JS.
But I don't see a way to "Open the in-app Developer menu" via my AVD:
Alternatively, I get the impression that react-devtools could potentially be used to help with debug purposes for a RN app. When I launch the React Dev Tools, RDT states that I should add the following line of code to the top of the page that I want to debug, before importing React DOM:
<script src="http://localhost:8097"></script>
I'm not totally clear on this instruction. My app has App.js and it has child components. Am I supposed to insert this line of code as the first line of code in App.js or some other file? I currently have this as the first line in App.js but it doesn't seem to have any effect. Should I be using this hook differently or am I way off base in some other way here?
Please execute this command from the command: adb reverse tcp:8081 tcp:8081
Then run the project again.
I'm currently running a detached expo project in development mode. Whenever I run expo start or npm start in the terminal I get the following logs:
$ expo start
Starting project at /Users/johncd/workspace
Expo DevTools is running at http://localhost:19002
Starting Metro Bundler on port 19001.
Tunnel ready.
Your native app is running at expb675c828acbb437095bc6218883f56bb://192.168.1.12:19000
Logs for your project will appear below. Press Ctrl+C to exit.
The expected results would include a QR code after these logs, but there is none.
When I visit the DevTools at localhost:90002 I see the metro bundler is running on LAN and a QR code is available. However, when I scan this QR code, it results in an error reading "No usable data found".
I've tried checking for a Firewall (System preferences > Privacy > Firewall) but it appears to be turned off.
I have also tried uninstalling and re-installing expo-cli as well as the project and running expo start again but to no avail.
I've tried using npm start and yarn start. I have also tried running the project on a tunnel.
I created a test project using expo init test-project and successfully ran it using expo start, so it seems this issue is only occurring on this project.
I also tried running expo start --clear to clear the cache.
None of these have worked.
Any help is appreciated!
Versions:
"expo": "^33.0.0",
"expo-constants": "^5.0.1",
"expokit": "^33.0.4",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-unimodules": "^0.4.2",]
Running on OSX
You need to install expo client app first from the appstore, then the qr will be readable.
You need to install Expo Go application from app store.
I didn't see anywhere a mention of what platform you're trying to use (iOS or Android) but at least with iOS I can tell you that QR codes in Expo don't really work correctly anymore. I believe Apple prevented the Expo team from being allowed to serve the bundle through the Expo app anymore. What this means for you is that the workflow you should expect is to connect your phone to the device physically using a cable and serve the bundle through USB. You can also use an emulator and move to the device when it's convenient.
I've looked at so many tutorials, and they seem so simple, but I just can't get debugging to work (running Expo, not ready to eject, that's a whole other level of craziness).
I've tried creating an app with create-react-native-app and also with expo-init which appear to be the same thing. I start running the app with yarn start and I can see the app in Expo. I select "Attach to Packager" in VSCode, and it fails every time.
I've added "react-native.packager.port": 19005 to my settings.json but I can't seem to find the right port. My Metro screen has so many different ports in so many different places:
The terminal where I ran yarn start says
Expo DevTools is running at http://localhost:19003
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19005.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.
exp://192.168.1.5:19004
The chrome window is at localhost:19003
The first line of the Metro Bundler terminal says Starting Metro Bundler on port 19005.
Later in the terminal it says Opening exp://127.0.0.1:19004 in iOS simulator
In the sidebar it says exp://192.168.1.5:19004, which is reflected in the Dev settings screen in the iOS simulator.
I've tried changing the port in "react-native.packager.port": 19005 to every number between 19000 and 19005 and they all fail. They all say:
Could not debug. Cannot attach to packager.
Are you sure there is a packager and it is running in the port 19003?
If your packager is configured to run in another port make sure to add that to the settings.json. (error code 504)
with, of course, the currently set port.
HELP ME!!!
react-native.packager.port should be changed to the port the Browser's developer tool's is running on. Stopping and Restarting the npm server once again worked for me.