Skip to content

Instantly share code, notes, and snippets.

@sanjarcode
Last active July 13, 2023 22:14
Show Gist options
  • Save sanjarcode/34cc67ab8e1dc460702cd4c481c0bc62 to your computer and use it in GitHub Desktop.
Save sanjarcode/34cc67ab8e1dc460702cd4c481c0bc62 to your computer and use it in GitHub Desktop.
📱React Native setup, ADB wirless

Steps (to set up an existing React Native app)

  1. Install react-native-cli globally, by running npm install -g react-native-cli.
  2. Clone the repo. Do npm install inside it.
  3. Connect phone (real) to the computer - by enabling USB debgugging/Wirelsss debugging through the "Developer Options" ((may need to enable them first, by clicking "Build number" repeatedly)). Accept permissions.
  4. Make sure the phone connected by running adb devices in the terminal. A device should be added, in the success case.
  5. Run react-native start, press "a" for Android.
  6. "r" when the procees seems to have stopped. Keep pressing this if something gets stuck.
  7. The app should now be installed and running on the phone.
  8. Editing files should update the app now, automatically

Note: I'm assuming Android studio is already installed (since it provides the adb program)

Gist

Two steps:

  1. Pair - needs to be done once
  2. Connect (needs to be done for each session, practically)

Steps (Wireless ADB)

  1. Connect the computer and phone to the same Wifi network.
  2. Open "Developer Options" on the phone (may need to enable them first, by clicking "Build number" repeatedly)
  3. Turn on USB debugging, Turn on Wireless debugging
  4. Go inside Wireless debugging and "pair" the device, by doing the following:
    1. Click pair with "pairing code" option. The IP address, port, and the pairing code should be displayed.
    2. Open the terminal on the computer, and run adb pair <ip_address>:<port_number> (values as displayed on phone). Example 192.168.0.104:34293.
    3. Enter the pair code in the terminal, when asked.
  5. Finally, connect the device, by running adb connect <ip_address>:<new_port_number> (yes, a new port number will be displayed for Android 12+).
  6. Verify if the device is connected by running adb devices. The phone should now be visible as "device" with the IP address, and port number.

Note:

  • For React Native, you'll need to run react-native run-android to install the app, even if you did so with USB before (i.e. react-native start) won't work without this step.
  • The following doesn't affect any emulators you're running
  • The "connect" step needs to be done on each boot of the computer, anytime you close the WiFi on the mobile, or disable Debug Options/Wireless Debugging on the mobile. The latest IP address, port can be viewed, again, going to "Developer Options > Wirless debugging". In case you unpair (which usually doesn't happen unless you explicitly unpair the device), do a "pair" before "connect", as usual.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment