How does the "Reload" work in react-native when running on a physical android device? - react-native

When the RN app is run on an android physical devices and the adb is connected over USB how does the "Reload" on the app fetches the files saved on the development project directory. How does the App knows the ip address of the development machine ?

First if you have real device type this code: react-native run-android --deviceId [YOUR ID]
If you want debug the app through Wifi you must first find your ip and then in adb type:
adb tcpip 5555
adb connect [YOUR IP]
Then type react-native run-android --deviceId [YOUR ID] again with your new id ([your device ip]:5555)
For the first time your app will be built. But for reload index.js open dev menu , go to dev setting in Debug server host & port for device type [YOUR PC IP]:8081

When the application is started the react-native run-android ... command does the reverse(forwarding the ports) of the ports using the following command which is visible in node start logs.
adb -s [device_id] reverse tcp:8081 tcp:8081
So after this when the "RR" command is received by the RN app, it loads the page from the localhost (http://localhost:8081/xyz.js?foo...) which is being forwarded to the development host.

Related

React Native, wireless connection to Android TV: stuck at error = adb.exe: error: more than one device/emulator

I have an Android TV box, it only has USB A ports, so I'm trying to work with it over Wifi.
I use adb connect 192.168.0.211 to make the TV box show up in adb devices
I try to use npx react-native run-android to deploy
I get the error:
info Connecting to the development server...
adb.exe: error: more than one device/emulator
warn Failed to connect to development server using "adb reverse": Command failed: C:\Users\admin\AppData\Local\Android\Sdk\platform-tools\adb -s 192.168.0.211:5555 reverse tcp:8081 tcp:8081
info Starting the app on "192.168.0.211:5555"...
Starting: Intent { cmp=com.tv_test/.MainActivity }
It seems to boil down to the command adb -s 192.168.0.211:5555 reverse tcp:8081 tcp:8081 which, when I run it, fails with the message:
adb.exe: error: more than one device/emulator
.. even though it's the only device in adb devices and even though I used -s to specify the device.
Nothing I googled worked so far, so I'm asking here.
How do I get adb to run that command on/for a wifi connected device?

Re-connect to metro server after disconnect

I am running react-native run-android with physical android device plug in with usb port.
However, when the cable is disconnected. I can't reconnect back to metro server automatically.
I have to rerun react-native run-android which was quite a waste of time.
Is there any command that can use to reconnect?
try in terminal adb reverse tcp:8081 tcp:8081 and after that in the Metro Bundler Window hit r key
Check that the device is reconnected to the machine with:
adb devices
Reroute the connection to the development server with:
adb reverse tcp:8081 tcp:8081
try to down grade the nodejs to less than v12 and reinstall npm

Install application on Android phone

I create an application with react-native-cli, how can I install it to my Android phone?
(Although in development mode)
Platform: osX(10.12+)
target deployment: Android Phone (v6.0+)
There is an easy way with Terminal.
in development mode, we run application in android studio emulator or expo or gnymotion with a simple command:
react-native run-android
this time before running this command, run:
adb devices
this command will return all of the devices(include android studio emulator) with an id and name.
first, active: USB debugging option in your android phone
then connect your phone to the computer with USB cable
now run adb devices on the terminal.
note that react-native run-android command will install your application on one device that exists in adb devices list.
so close all other android emulator and then run again adb devices for checking all devices connected to this computer.
now simply run below command and wait for installing it on the device.
react-native run-android
this will install the application on your connected phone.

Expo start shows "Starting Metro Bundler on port" forever

I am working on react native project.
It worked well before I reinstall computer OS.
Now if I run expo start it just show this.
Starting Metro Bundler on port 19001.
This takes forever.
If I run android emulator here, then this error appears.
Couldn't start project on Android: could not install *smartsocket* listener:
cannot bind to 127.0.0.1:5037: Only one usage of each socket address
(protocol/network address/port) is normally permitted. (10048)
could not read ok from ADB Server
* failed to start daemon *
error: cannot connect to daemon
What's wrong here? I am using Genymotion simulator.
I solved this.
I just set path environment to genymotion adb tool directory.
C:\Program Files\Genymobile\Genymotion\tools
And now it works well.
Thanks.

React-Native run-android on specific device

Is it possible to use the run-android command for one specific device only?
For example, if I have three devices (or emulators) connected and I want to use run-android on only one of them?
Maybe something like adb install -s DEVICE_NUMBER?
To run react-native application on optional device you can specify some flags in run command. To see available add --help:
react-native run-android --help
Then you can specify your device id throught --deviceId
react-native run-android --deviceId=DEVICE_ID
To see available devices ids'
adb devices
To list AVDs:
$ANDROID_HOME/tools/emulator -list-avds
To run a specific emulator:
$ANDROID_HOME/tools/emulator -avd Pixel_API_28_AOSP
To run React Native in the currently-open emulator:
react-native run-android
To choose between multiple running emulators:
adb devices
react-native run-android --deviceId=DEVICE_ID
(Last point from this answer)
Elaborating on #alexander 's answer, you can use the following workflow:
cd android
./gradlew assembleDebug # assembleRelease for release builds
adb install -s <yourdevice> app/build/outputs/apk/yourapk.apk # You can check the identifier for your device with adb devices
adb reverse tcp:8081 tcp:8081 Will forward the phone's 8081 port to the computer's 8081, where the packager listens. If you are deploying over Wi-Fi, have a look at: https://facebook.github.io/react-native/docs/running-on-device-android.html#configure-your-app-to-connect-to-the-local-dev-server-via-wi-fi
In a different screen, run:
npm start # Will run the packager
If you really need this, you might want to wrap the first snippet into a script that you can parametrize with your phone's identifier.
npx react-native run-android --deviceId='myDeviceId'
This works for me. don't forget '' this one. it accepts string
May be we can not select which android device attached to run.
Read from official react native website:
You must have only one device connected at a time.
You don't need to use run-android command to start it on specific device
Firstly, you have to start the packager:
./packager/packager.sh
Then just build an APK file and run it on target device. APK will connect to the build server, and fetch bundle from it automatically.
But if it didn't happen by some reasons, click on reload button :-)
If you're using React >= 0.68.x. Just type this:
npx react-native run-android --deviceId=VCR4XCORPFTKAQFA
VCR4XCORPFTKAQFA is recovered typing adb devices in your terminal.
To run the app on one specific connected android device:
Disconnect/Unplug all connected android devices.
Connect/Plug the device you want to install the app in
Run adb devices on your terminal to see the list connected devices (you should only see 1 such device as rest were disconnected)
Run npx react-native run-android
This will install the React-native app on the connected device via usb.
Actually, first of all, be sure about adb installation which I think while setting up your RN environment you have it for sure, follow these steps:
Connect your Android external device to your computer with a cable
Run this command adb devices and you will see the result at least:
List of devices attached
9999xxx3434yyy device
FYI: the 9999xxx3434yyy is your device id
Put the given device id in the following command
npx react-native run-android --deviceId="9999xxx3434yyy"
or
yarn run react-native run-android --deviceId="9999xxx3434yyy"
HINT: If the device is a Xiaomi product keep watching the phone screen because you should grand install access.
When 2 or more devices are connected
There seem to be no way to install app on a specific device in this scenario. So follow this
Disconnect all devices except one
run the command, in my case its react-native run-android
Now connect another device
repeat 2nd point
when done with every device, connect all and see device ids adb devices
now map device's port 8081 to computer's 8081
Eg:
adb -s DEV_1_ID reverse tcp:8081 tcp:8081
adb -s DEV_2_ID reverse tcp:8081 tcp:8081
adb -s DEV_3_ID reverse tcp:8081 tcp:8081
...