Running multiple react-native apps in different ports

Question

How to run multiple instances of metro bundler or react-native apps in a single machine ? The default port that the react-native app runs on is 8081.

Answer 1

Here is the solution, hoping you do not have to go through the same pain.

If you want to run more than one react-native apps in debugging mode, then follow the steps. By default metro bundler run on 8081. So you must change the port for each app to be different.

Steps

1. First list devices that you are using

   • adb devices
     example:
     emulator-5554 device
     emulator-5556 device

2. Running react-native apps on different ports .

   • react-native run-android --port 8081 --deviceId emulator-5556
   • react-native run-android --port 8088 --deviceId emulator-5554
     ** By default the emulator-5554 will try to run on 8081, and will show error. Do the next step.

• The default port is 8081 so , we do not need to do extra thing after this for emulator-5556.
  Do the next step for emulator-5554

3. Change the server and port number in Dev-settings

• go to dev-setting in react-native app [ Command + M in Mac and Ctrl + M in windows.
  ** Under Debugging section for emulator-5556, in Debug server host & port for device :
• change it to localhost:8088
  ** This will change the app to listen to metro-bundler in localhost: 8088 .

Hope this will help you as well, as it wasted my 3 hours just to figure this out.

Answer 2

I ran into this question when looking for iOS, you can do this for each app you wish to run on another port:

Using a port other than 8081

npx react-native start --port=8088

Update your Xcode ios/__App_Name__.xcodeproj/project.pbxproj file to load the JavaScript bundle from the new port.

For example in the file:

This ${RCT_METRO_PORT:=8081}

Changed to this ${RCT_METRO_PORT:=8088}

Source: https://reactnative.dev/docs/troubleshooting#port-already-in-use