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:

Answer 1

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.

Answer 2

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) .

Answer 3

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

Answer 4

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

Answer 5

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.