React-Native Run-Android Doesn't recognize Open Metro Server - android

Issue: This broke with no changes between days. Even though I have metro running npx react-native start when I run npx react-native run-android it starts it's own metro server and does not allow me to do "fast refresh" it basically installs the debug build of the app onto the device. I need it to fast refresh for development purposes.
Already tried the steps on issue: Unable to load script from assets index.android.bundle on windows
To test and debug my android build for a react-native project I had an emulator running in one Powershell window, would start a metro server in a second Powershell window using npx react-native start then run the app in a third powershell window using npx react-native run-android it would go through the build and install the app, then it would "pass" the app to the react-native metro server then that would install it to the emulator. This would allow me to make changes to the code and "fast refresh" the application in the emulator/phone and logs got outputted to the Metro Server.
Versions (executed at project root folder)
npx react-native --version : 6.0.0
npx --version : 7.18.1
Setup:
First Powershell window:
emulator -avd Galaxy_Nexus_Android9 -no-snapshot
Second Powershell window:
Make sure abd device is running
adb devices
result
List of devices attached
emulator-5554 device
run
npx react-native start
result: Metro JS Server Start
Third Powershell Window
run: npx react-native run-android
result: Run Android
I boxed the line where it launches its own JS server instead of using the one that is open.
The app opens fine on the emulator (I initialized a new app to make sure there was nothing wrong with the app) App Running Android
But on the Metro window, it did not install the app and when I try to reload it says it cannot detect any running apps Metro Restart
I've already tried the resolution here to run it on a different port with no success 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

Solution:
Run the start metro server and run-android commands on a different port.
I suspect McAfee was using the default port 8081.
Open admin CMD/Powershell and run the following:
Reverse the port that the adb device will listen on:
adb reverse tcp:8081 tcp:8090
Start the Metro server on the same port:
npx react-native start --port 8090
Open another admin CMD/Powershell window and run:
Start the android build/run on the same port:
npx react-native run-android --port=8090
The last command should also start the emulator automatically.
If the metro server errors out after you do the run-android command, just run the npx react-native start --port 8090 again in the same window.

Related

My Metro bundler started but not loading, i was stuck from last 10 days

After Running
npx react-native run-android
command successfully run on my machine android application also install on my mobile app and the metro server started but not loading anything. after manually pressing ctrl + R showing a message like the one below. I have attached a screenshot for your reference.
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.
First make sure your metro bundle is running on 8081 port.
yarn start --port 8081
adb reverse tcp:8081 tcp:8081
Try this above 2 commands, I hope this will help you out!
You need to allow your phone/simulator to talk to Metro Bundler.
There is a command line tool called 'adb'. You need to install that into your local terminal. Then do yourself a favor and add it to your $PATH so you can call adb from anywhere. In my case I use zsh so I edited my ~/.zshrc file (your file might be ~/.bash_profile or other).
export PATH=$PATH:/Users/{my_user_directory}/Library/Android/sdk/platform-tools/
Then source the file: source ~/.zshrc
Now run in your terminal: adb reverse tcp:8081 tcp:8081
I usually run this right after I start up the simulator but before my app actually loads up.

Command 'react-native log-android' stuck at 'Starting Logkitty'

I'm trying to run a React Native project and after trying to start it, it produces an error which I'm trying to debug, but while trying to debug that error the command gets stuck.
I've tried using 'react-native log-android' but for some reason it gets stuck at 'Starting logkitty'
I had the same issue and the following solution worked for me.
First make sure you have an adb device connected to your system by running the command adb devices from you terminal and check if any devices get listed under the line: List of devices attached.
Now after running the command react-native log-android, 'Reload' code on your device and the logkitty should start logging fine.
The terminal may keep showing "info Starting logkitty" after npx react-native log-android command.
The log data may appear if present, after navigating through the screens of the project in an android device or emulator which is running the project after npx react-native run-android command.

React native could not connect to development server

My steps which I followed till now are,
react-native init FirstApp
cd FirstApp
started emulator from android studio
react-native start FirstApp
App started on emulator all fine
and then i changed on android js file, saved it and pressed rr to reload and then the red screen appears
Things I have tried,
running on different ports
set the ANDROID_HOME variable pointing to sdk folder both for system as well as user variable
I am working on windows os
close all terminals and then try this line in new terminal :
adb reverse tcp:8081 tcp:8081
and then run the project again :
react-native run-android

Choose which android device (emulator or phone) will react-native run-android run on

I am developing a react-native application and every time I want to update the changes to either an actual phone or an emulator, I execute react-native run-android (Sometimes I use the reload functionality in the emulator).
My question is whether there is the possibility to specify in which device/emulator the command will run, since when I have both connected it will run and update the app in the most recently run/plugged.
So I would imagine something like this:
react-native run-android --device=XXXXXX
I have been doing some research and haven't found an answer so far, so I hope someone has a clue about it. Thanks!
If you have just one device, either plugged in or running as emulator:
npx react-native run-android // or if you have a npm script, 'npm run android'
The following is useful if you have multiple devices, either plugged in or running as emulators.
Ensure the devices are plugged in, and get their deviceIds with adb devices, then npx react-native run-android --deviceId [DEVICE_ID]
First, plug the device in, or start the emulator with Android Emulator CLI.
emulator -list-avds will list your avds (android virtual devices), e.g. Pixel_2_API_29
emulator -avd Pixel_2_API_29 or emulator #Pixel_2_API_29 will start a specified device.
emulator -help for more info.
Then, open a new terminal/ tab, run either npx react-native run-android. It will start your app on all android devices, both physical and AVDs.
If you wanted to specify only 1 device (why not run on all of them!):
adb devices, to get list of device IDs, e.g. 1cfe4i231414523
npx react-native run-android --deviceId 1cfe4i231414523
PS: React native getting started guide specifies that you should uninstall react-native, and instead use the package through npx. To uninstall npm rm -g react-native. Now, everytime you want to run react-native, use npx react-native [command]. What npx does is it looks in the local node_modules and runs it from there, as opposed to a possibly outdated global react-native package.
If you go through the docs then you would find that there are two more commands available to start the server and there is no such react-native run-android ---//deviceID command available until now but, you can customize react native code in node_modules to make that command for yourself.
The two commands are:
1)react-native start
2)npm start
Cheers :)

Getting the red screen on real device with react-native

I am using Mac OS X and an Android Phone 4.4.2
When I deploy the sample AwesomeProject app to the phone I get a Red warning screen which says "Unable to download JS bundle. Did you forget to start the development server or connect your device?"
However, I have started the local dev server and connected the phone to the same wifi. Moreover, when I type "adb devices" I can see my device.
Also I added the IP and port of the server under Dev settings.
I found an advice online to type adb reverse tcp:8081 tcp:8081 but my phone is not android 5.0 which is btw minimum required for dab reverse command.
How should I make it start, please help...
Follow this steps carefully.
Note : All commands need to run inside a project only.
Run below command first
npm react-native start
open other window in same project and Run below command
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
This will create index.android.bundle in assets folder.
Run below command
npm react-native run-android
Now you can get apk in build folder which will work fine.

Categories

Resources