React native change listening port

Solution 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

Solution 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
   }
   ...
}

Solution 3:

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.

Solution 4:

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

Solution 5:

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