How change React Native and Metro Bundler port

Question

I'm trying to start the React Native debugger and bundler in port 8088 because 8081 used by another program, using the following command:

react-native run-android --port=8088

The emulator reverse is set correctly

Running C:\Users\MyUser\AppData\Local\Android\Sdk/platform-tools/adb -s emulator-5554 reverse tcp:8088 tcp:8088

But metro bundler is starting in port 8081

Which would be the best way to start it once some program is reading my 8081 port and I can't stop it.

Answer 1

There are two files needed to be modified about port 8081:

1.react-native/local-cli/server/server.js - default

2.react-native/React/React.xcodeproj/project.pbxproj - replace all the 8081 ports with your desired ports in above two files

Your port will be changed.

Answer 2

I was trying to get my RN app running on port 8088 instead of default port 8081. I've spend almost 2 days to figure out how to do this, but the solutions found were not working in my case. Finally i've found a way to tackle this problem. Follow the 3 steps and get this resolved.

1. In metro.config.js file, add the following snippet within the module.exports.

server: { port: 8088, }

2. Search for 8081 in the entire ios project and replace the value with 8088. I had to do this in the following files for the variable RCT_METRO_PORT.

• ios/Pods/Headers/Private/React-Core/React/RCTDefines.h
• ios/Pods/Headers/Public/React-Core/React/RCTDefines.h

3. Run the build as usual, this time with the port passed as an argument.

npx react-native run-ios --port 8088

Thanks!

Answer 3

After migrating the React Native CLI configs into @react-native-community/cli changing the default PORT for metro bundler became very easier, for changing the default PORT just export an environment variable by the following command inside you project path:

export RCT_METRO_PORT=8590

Also, find the RCTDefines.h files inside your ios/Pods folder, there are two of them and inside both of them change the value 8081 to 8590.

For a test run the echo $RCT_METRO_PORT and if you see the new PORT 8590, it is changed now and easily run your project with default commands.

NOTE: For using React Native Debugger for development just press ⌘+t and then change the port value 8081 to 8590.

Answer 4

You need to overwrite the RCT_METRO_PORT macro variable to ensure your app points to the correct port when running via xcode or react-native run-ios. This can be done by opening the Pods project within your workspace, navigating to Build Settings and adding a Preprocessor Macro. For example RCT_METRO_PORT=7777, if the port you are using is 7777.