Use react native in a different port

Humberto Suastegui
Jul 21, 2017 · 2 min read

Using React 16 and React Native 0.45:

"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "^0.45.1"
}

To start the packager in a different port, add to the package.json:

"scripts": {
"start": "react-native start --port 9988"
}

Run the packager with npm start and check that the bundles are available in the new port:

http://localhost:9988/index.ios.bundle

http://localhost:9988/index.android.bundle

For IOS

Open the project.xcodeproj in Xcode

Open RCTBundleURLProvider.m and replace the port 8081

Open RCTPackagerConnection.m and replace the port 8081

Open RCTWebSocketExecutor.m and replace the port 8081

Remove the start packager step from the Build Phases in React.xcodeproj by clicking the cross.

Finally, update the build navigate to Product > Scheme > Edit Scheme. Select build from the side bar, click the plus icon and add React from the list. Untick Parallelize build and move React before the project.

Finally, run the app in the simulator.

For Android

Open the application in Android Studio and run the app in the emulator. Once the emulator is running press CMD + m (Mac) or CTRL + m (Windows). Select Dev Settings and then Debug server host & port for device. Enter the url with the new port.

Finally CMD + R or CTRL + R and the application should reload with the new bundle.

In both cases the react-native packager should be running in the command line before the Xcode or Android Studio build.

)

Humberto Suastegui

Written by

Javascript developer interested in React, Redux, Node and Mongo

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade