CODEWITHSUNDEEP
iosreact-native
TIMEX
TIMEX

Reputation: 271584

How can I run two react native applications?

I want to run my react native app twice: my device + simulator.

I don't mind using two metro bundler instances. How can I do that?

Right now, both my devices connect to 8081 - and whenever one connects, it kicks the other one off.

(I first built from XCode to my device/simulator, and then I run react-native start)

Upvotes: 9

Views: 13702

Answers (4)

Mher
Mher

Reputation: 1253

Everything is much eseaier,

  1. Run you Emulator and connect your device to computer
  2. Run adb devices in terminal. It will show your device ids
List of devices attached
RKCB91214AA device
emulator-1258   device
  1. Run npx react-native run-android --deviceId="RKCB91214AA" --port=8082 and npx react-native run-android --deviceId="emulator-1258" --port=8081 for each device on different terminals. Just make sure that commands have different ports.
  2. Open React Native DevMenu (by shaking phone) on RKCB91214AA device and change Bundle Location to localhost:8082

Upvotes: 0

Sunny Chaturvedi
Sunny Chaturvedi

Reputation: 21

tldr; You need to run metro on a different server and then open the simulator device on that server, then from dev tools and change the port&host

For this answer I am assuming one of your React Native Application is running fine on default server. Steps to run another application -

Step 1: run metro-bundler server with specified port

npx react-native start --port=8088

Step 2: run the device on same server

iOS: npx react-native run-ios --port=8088 --simulator="iPhone 13"

Android: npx react-native run-android --port=8088

(writing the same without equal sign also works)

npx react-native run-ios --port 8088 --simulator "iPhone 13"

Step 3: Change the host server and port number in dev tools after launching the app

iOS: Command + D (or ctrl+cmd+Z) in Mac and Ctrl + D in windows Click on Configure Bundler option provide host as localhost (or 127.0.0.1) and port as 8088 then click apply changes

Android: Command + M in Mac and Ctrl + M in windows Click on Change Bundle Location change it to localhost:8088 then press ok

Note1-if you are running your app on your phone then provide its address as mentioned in Kasra's answer above

NOTE2- Sometimes what I experienced was that shake keypress(cmd+d or ctrl+cmd+z) which you need to access the configure bundler option on iOS was stuck, it simply didn't respond whatever shortcut I tried, even opening it from menubar didn't work, in that case, close the app and open again using command from step2, and now open the terminal window in which metro is running, there will be two options press d and press r, if the active window is terminal window then shake option will work after pressing d , attaching my VScode terminal screenshot for reference, you may have metro running in any terminal this thing took a 2 hours for me, hence I thought it's worth mentioning

vscode screenshot of Note2

Upvotes: 2

Kasra
Kasra

Reputation: 2189

  1. Install the App for the first time on your real ios device using npx react-native run-ios --device "Kasra’s iPhone", of course replace Kasra’s iPhone with the name of your real ios device.
  2. run npx react-native start --port 8082
  3. Open the app on ios real device and hit Ctrl + D to open the dev menu, or shake the device to open it.
  4. Select the Configure Bundler option
  5. For the IP, DO NOT USE 127.0.0.1, use the IP of your system, execute ifconfig or ipconfig in terminal to find your IP based on your OS.
  6. For the port number use 8082
  7. select Apply Changes, it should automatically start the app on your ios real device
  8. Now open another terminal window
  9. npx react-native run-ios to run it on your simulator.

Now you have two bundlers running side by side on ports 8081 and 8082 simultaneously.

Upvotes: 16

bennygenel
bennygenel

Reputation: 24660

react-native run-ios command supports a port parameter after this commit. You can try to use this parameter to run your app in two different ports with two different builds.

From commit notes:

adds --port option to react-native run-ios as well as patches port …

Summary: The pull request adds the --port option to run-ios allowing a developer to build and launch a react-native app using a single command line like this: react-native run-ios --port 8088

It defaults to the current port 8081.

Upvotes: 6

Related Questions