React native change listening port

Question

I am using react native android and having face issues to deploy the app on an android device. When I run

react-native start, it won't start dev server on port 8081

I have tried a few options mentioned at:

1. https://reactnative.dev/docs/troubleshooting

2. Tried to stop the process running at port number 8081, but no success

My question is that can we change the React Native dev server port from 8081 (which is a default in android however the same we can change in ios from AppDelegate.m file) to something else or any other approach

Your responses will be highly appreciated. Thanks

Inversion

Dear Vikram, your question is so important and trend, because of updating React Native, every solution can change, for the current version, the marked post is not working yet, so I add a new solution in this post. please check it out, and if it is the correct answer and you desire to mark it to guide new visitors. – Foment

Answer 1

Not sure if this is documented or not[1], you can specify the port via a CLI argument, like this:

react-native start --port 9988

I found it in the source code, and it worked on my local machine :)

https://github.com/facebook/react-native/blob/master/local-cli/server/server.js#L30

---

[1] This is now documented here: https://facebook.github.io/react-native/docs/troubleshooting#using-a-port-other-than-8081

Duhl

Thanks a lot Patrick, its working. I am able to change port number – Inversion

OMG, thank you ! Have been struggling with this for the past 2 hours. Why is this not documented anywhere?!?! – Turaco

This is not the correct answer. The port on windows is hardcoded. – Lachellelaches

@AdrianSicaru where did you see that? – Duhl

Here: #32735966 – Lachellelaches

@AdrianSicaru the issue seems to be closed (and fixed) github.com/facebook/react-native/issues/2704 – Duhl

It is documented now. at any rate: facebook.github.io/react-native/docs/… (under "Running packager on a non-standard port"). – Inoculum

Though @Duhl answer is correct but you will have to write that line every time you need to start the server. Here is a permanent solution if you like. github.com/nikhil-thakkar/react-native-patch – Compton

Answer 2

I know it is late but FYI, there is also another way where you can change your port permanently.

Go to your_app\node_modules\react-native\local-cli\server\server.js and change the port 8081 to 8088

which will be something like this

    ...
      module.exports = {
      name: 'start',
      func: server,
      description: 'starts the webserver',
      options: [{
        command: '--port [number]',
        default: 8088,
        parse: (val) => Number(val),
      }
     ...

UPDATE TESTED ON RN 0.57:
1. If you are using custom metro config

const config = {
  ...
  server: {
    port: 8088,
  }
  ...
};

2. And if you are not then,
Go to your_app\node_modules\react-native\local-cli\util\Config.js

const Config = {
   ...
   server: {
      port: process.env.RCT_METRO_PORT || 8088 //changed from 8081
   }
   ...
}

Thaothapa

Changing files in node_modules can hardly be called permanent. Any time you update your dependencies you are going to blow away that change. – Vamp

This works for react-native start but for react-native run-ios still pointing to 8081. Any idea how to resolve that? – Pinkerton

@YugandharPathi , this is issue is still running on ios, you can track this issue here. For android I updated the debug server host & port for device setting in genymotion and it worked. Give it a try for ios. – Thaothapa

Here is a permanent solution if you like. github.com/nikhil-thakkar/react-native-patch – Compton

I changed all 8081 to 8088. But doesn't work for me. Still got the same error. – Kerry

Answer 3

run metro-bundler server with specified port eg. "8089"

react-native start --port 8089

build iOS and Android package which listens to above port

iOS:. react-native run-ios --port 8089 --simulator \"iPhone 8\"

Android: react-native run-android --port 8089

Change the server and port number in Dev-settings after launching the app on simulator or device.

• iOS: Command + D in Mac and Ctrl + D in windows
  • Click on Configure Bundler option
  • provide host as localhost and port as 8089 then apply changes
• Android: Command + M in Mac and Ctrl + M in windows
  • Click on Change Bundle Location
  • change it to localhost:8089 then press ok

Dizon

on android you can use this npx react-native start --port=6969 Click on Change Bundle Location change it to localhost:6969 then press ok – Senskell

Answer 4

The simplest solution is:

The below command will build Android or iOS package which will listen to port 1234

For iOS: react-native run-ios --port=1234

For Android react-native run-android --port=1234

If you are using metro-server then you can add port under server object like :

server:{ port:1234 }

or

run

react-native start --port=1234

Find out more configuration for metro-server here: https://facebook.github.io/metro/docs/en/configuration

But requires 0.55 and above.

Kerry

This is the complete answer. ^^) – Badtempered

Thank you. This is what I was looking for. – Klehm

Answer 5

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.

Stickpin

problem is, the pod project is recreated on each pod install – Deuteranope

Answer 6

After spending a whole day and going through many solutions, a combination of the suggestions helped me resolve this. Follow the steps given below:

1. Create the project using the command: 'react-native init [PROJECT_NAME]'

2. Open the project in Xcode and replace all occurrences of "8081" with "8088" and save the changes

3. Open terminal and change the working directory to the above created project directory. Use the following command to change the port that react native uses: react-native start --port 8088

Once you run this command, you see the following output in the terminal:

As you can see, this starts the Metro instance. Do not kill the command or the terminal window. Let this process run.

4. Open a new terminal window, change the working directory to the project directory and run the react-native project using the command:

react-native run-ios

Once the project builds successfully on the second terminal, you will see a progress bar indicating the loading of the app bundle in the first terminal window as shown below:

On completion of loading the bundle, the app succesfully launches on the simulator

Hope this helps. Happy coding

Athenaathenaeum

Here is a permanent solution if you like. github.com/nikhil-thakkar/react-native-patch – Compton

@Compton Doesn't work. Got error message when install. – Kerry

@ZhouHao Please check the github issue. I have added some questions. – Compton

Answer 7

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  server: {
    port: 8088,
  },
}

Puiia

Answer 8

Actually, in the current version of React Native, configs of metro bundler are in the @react-native-community/cli and for changing the default PORT of metro bundler we should change the default PORT just by export an environment variable by the following command inside the project path:

export RCT_METRO_PORT=8590

Then in the ios folder of your project find the Pods folder and inside the Pods folder seek RCTDefines.h files, there are two of them, inside both of them change the 8081 to 8590.

Surely, for a test we can run the echo $RCT_METRO_PORT and if you see the new PORT 8590, it is changed now and we can run our project with default commands like yarn start and then yarn ios or yarn android.

Hint: for connecting to the React Native Debugger press ⌘+t and change the 8081 port to 8590.

Foment

unreliable since the pod file header is recreated on each pod install – Deuteranope

@philk, Did you mean my solution isn't still acceptable?? – Foment

The RCTDefines.h is recreated on every pod install. Any changes in it are lost. So your solution does not work reliable. Unfortunately the RN creators made too many hardcodes of the port all over the place. – Deuteranope

Yeah, thanks dear @philk, I have seen this really weird issue. why developers like RN folks hardcoded the most important thing. thanks for mentioning this. – Foment

maybe we should file an issue of at their repo? – Deuteranope

@philk, Definitely it has already, But yeah, this is the true way. – Foment

Answer 9

Set RCT_METRO_PORT, example:

export RCT_METRO_PORT=8765

Helfrich

on windows you can use set instead of export – Binnacle

Answer 10

export RCT_METRO_PORT=8082
react-native start --port $RCT_METRO_PORT
react-native run-ios

https://facebook.github.io/react-native/docs/troubleshooting#using-a-port-other-than-8081

Potemkin

Answer 11

Follow the steps :

Step 1:

vim node_modules/react-native/local-cli/server/server.js

Step 2 : change the default port - any other port //example -> 8089

Step 3 : go back to the project -> and do npm start

Gyration

The answer just to show everyone that someone uses vim. – Schlep

Answer 12

You can use this react-native-port-patcher which replaces the default 8081 port with your desired port number.

Meli

That looks like a really bad idea. Have a look at the acceped answer – Cartilaginous

I am running this on Mac. The accepted answer does't work for my case. Even though i run "react-native start --port 9988" and try to run the app by running "react-native run-ios" it tries to run from the default port of 8081 which is already occupied by McAfee. And below is the result. Connection to localhost port 8081 [tcp/sunproxyadmin] succeeded! Port 8081 already in use, packager is either not running or not running correctly Command /bin/sh failed with exit code 2 ** BUILD FAILED ** – Meli

I am able to run the application only after i have replaced the 8081 port from all the files that use it with some other port. So instead of doing it manually. I was using "react-native-port-patcher" which does the work for us. – Meli

It's a good idea as for now there is no better and more convenient way to do the job. – Simonsimona

Answer 13

If using yarn-

 yarn start --port your port name   // worked for me.

Eg:-

yarn start --port 8082

Nucleate

Answer 14

If you want to change the port other than 8081 and running the same in emulator, i think this link has better working solution : https://medium.com/@hsuastegui/use-react-native-in-a-different-port-1109db5674d8

Imprecision

Answer 15

When you excute command like

./node_modules/react-native/scripts/launchPackager.command

to start a debug server,append args like

---port 8082

it works for me in React native 0.53.3.

Balough

Answer 16

For windows

correct way is to go to root directory and follow instructions

run cmd as administrator run npm start -- --port=8888

then open another md as administrator in root dir run npm run android -- --port=8888

Profitsharing

Answer 17

(Tested on RN 0.72.5) For iOS, add this to Podfile:

post_install do |installer|
...

# Port fix for metro bundler so when we run 'react-native run-ios --port XXXX' it will use the right port XXXX in Metro server and from the client app
installer.pods_project.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'].insert(0, "RCT_METRO_PORT=${RCT_METRO_PORT}")
end

...
end

Auston

Answer 18

Solution:

If you are using npm :-

 npm start --port your port name   // worked for me.

Eg:-

npm start --port 8080

If you are using yarn :-

yarn start --port your port name   // worked for me.

Eg:-

yarn start --port 3000

Tosspot