CODEWITHSUNDEEP
androidreact-native
Fred Zhang
Fred Zhang

Reputation: 115

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

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?

Upvotes: 3

Views: 22635

Answers (6)

Nick Bull
Nick Bull

Reputation: 9846

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

Upvotes: 0

Moss Palmer
Moss Palmer

Reputation: 1854

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

Upvotes: 3

Tung Tran
Tung Tran

Reputation: 437

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

Upvotes: 0

user6791424
user6791424

Reputation:

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

Upvotes: 0

Tomty
Tomty

Reputation: 2022

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.

Upvotes: 11

Srikanth Gopalakrishnan
Srikanth Gopalakrishnan

Reputation: 844

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.

Upvotes: 1

Related Questions