How to modify IP & port use react-native Android?

Question

I used the react-native Android demo project AwesomeProject and within the project I executed:

react-native start

In a second terminal:

react-native run-android

To start webserver and install the Android APK. The default webserver configuration is localhost:8081, how can I modify the webserver port, and how do I update recording of the IP & Port in Android project.

Edit:

I just found out that can modify ip address in Android debug setting, it seems "getDebugServerHost" is a private API, does Facebook provide any API to change ip&port?

Concupiscence

Please check my answer at other post. – Plane

Answer 1

Update: See Tomty's answer for the current recommended way to do this in 2019.

Unfortunately, the port is currently (2015/09/23) hardcoded. I believe this will be changed in time as it already has an Issue raised from a high level contributor to the project. https://github.com/facebook/react-native/issues/2704

Prostatectomy

Thanks. We now just only can modify the url but not port through modify debug_http_host SharedPreferences value. – Concupiscence

Further update: Now the port can also be changed using debug_http_host. – Theogony

@Theogony Please can you give a little more insight on how or where to use debug_http_host? – Ziguard

@Ziguard Added a separate answer elaborating on that. Please let me know if anything's still unclear. – Theogony

Answer 2

As OP commented on MossP's answer, this can now be achieved using the debug_http_host shared preference (see this issue).

So, if you wanted to use, say, port 8082, you could add an onCreate method to your MainActivity.java file, which might look something like this:

@Override
protected void onCreate(Bundle state){
    super.onCreate(state);

    SharedPreferences preferences =
        PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
    preferences.edit().putString("debug_http_host", "localhost:8082").apply();
}

Of course not forgetting to import android.content.SharedPreferences, android.os.Bundle, and android.preference.PreferenceManager.

This would make your app try to access the packager at the desired port instead of 8081.

Then you'd just make sure to start the packager with --port 8082 (as described here), and you should be all set. (Unless you happen to be using Nuclide, which is a whole other story).

Note that up until React Native 0.46, this would only allow one to run the app successfully, but still didn't make it possible to actually attach a debugger on a non-standard port. As of React Native 0.46, attaching a debugger should also work.

Theogony

This wasn't asked specifically so I didn't want to reference it in the answer itself, but note also that you can even make the port configurable at build with gradle's buildConfigField, though that can get a bit more complicated. – Theogony

I think it is acceptable that answers contain side-notes like this even if they don't answer something that is specifically asked. But of course the answers should answer what is specifically asked and adding on top of that is fine – Polybius

This is useful when your target Android device doesn't have a functioning Menu button. – Codpiece

Answer 3

There is a small work around for this. Anyone running this on a physical device(or even otherwise) can restart their adb session using a different port.

eg.

react-native start --port=1234

On a different cmd/terminal window.

react-native run-android

After which I am greeted by these messages.

BUILD SUCCESSFUL

Total time: 22.589 secs
Running C:\SDK/platform-tools/adb -s VY0025160560725694 reverse tcp:8081 
tcp:8081

This runs it on default reverse port of 8081, which is blocked by McAfee.

Work around:

adb reverse tcp:8081 tcp:1234

Try it out. It works for me.

Note: You may have to kill and re-open the app.

Currently I am unable to provide an answer for an emulated device since I do not have one installed on my system. But the symantics should be similar.

Note: This may break automatic code updates using watchman.

Taconite

Answer 4

As stated in https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu,

You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).

So on iOS device shake it, on iOS emulator press control D, on Android emulator control M, on Android device do adb shell input keyevent 82

Then in the menu that opens, go to Dev Settings, debug server & host port for device, and edit the IP and port.

ps: will only work for non production

Hyde

No such menu item in the menu. How can I find it? – Hydnocarpate

Answer 5

On Mac :

1. go To Wifi
2. Open network preferences
3. Wi-Fi is connected to {wifi name} and has the IP address {xxx.xxx.x.x}.
4. Get your ip address .
5. Go to application on devices
6. go to Dev Setting
7. Tap to Debug server host & port for device
8. Fill your IP address and port is 8081 (example ipaddress:8081) .

Gamine

Answer 6

This is an extension of Tomty's answer. Check out an example project here:

npm i @nick-bull/react-native-debug-address

# DEBUG_HOST=127.0.0.1:8081 npx react-native start --port 8081
# or, equivalently
DEBUG_PORT=8081 npx react-native start --port 8081

npx react-native run-android --port 8081 

Coparcener