CODEWITHSUNDEEP
react-nativecommand-line-interfaceios-simulatormetro-bundler
Mike S.
Mike S.

Reputation: 2778

react-native: How do I launch concurrent ios simulators on different metro ports

I have two apps that work in tandem - a consumer and a provider. When I request a task in the consumer app, I need to check that the task is received in the provider app. This makes debugging very difficult if I don't have both apps running concurrently on the same computer.

I've tried manually setting first the default port, and then react-native start --port 8082 for the other. The app on 8082 errors out. I've tried launching one alone on 8082. The app ignores it and launches another metro instance.

Both tests were for ios simulator. I've also tried running one on ios and the other on android with a similar lack of success.

Is this even possible? I've heard some say they gave up trying, others that go digging into the node modules to manually set the ports. I haven't found very much guidance on google or here.

I hope someone can help me either resolve it or convince me that it's a non-starter. Thanks.

Upvotes: 2

Views: 2364

Answers (1)

Mike S.
Mike S.

Reputation: 2778

Found a solution that worked (with most of the work coming from my colleague, Clayton Ray).

Running dual ios simulators

My system:

  • MacBook Pro (13-inch, 2017)
  • 2.5 GHz Dual-Core Intel Core i7
  • 16 GB 2133 MHz LPDDR3.

Let's say I have AppA and AppB. AppA is the one under development (features, bug fixes, etc.). This will run on the default Metro port 8081.

In AppB project root, I navigate to

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

Around line 87'ish, you'll find this code block

#ifndef RCT_METRO_PORT
#define RCT_METRO_PORT 8081
#else

Swap 8081 for your preferred port, usually 8082. Save your changes. From CLI, run

npx react-native start --port 8082

Now launch your app with a non-default simulator (to differentiate the two) like

npx react-native run-ios --simulator "iPhone 8s".

Open a separate pair of terminal windows, navigate to AppA project root and launch Metro and the app as you would normally.

Possible caveats

  • Under-powered Macs may have issues
  • If you update your Pods install, changes could be overwritten. Simple enough to fix, though.
  • Be sure to keep the workflows separate. I found I sometimes confused which app I wanted to launch as the default.
  • If you need to perform work on AppB, simply switch these steps by setting AppA port to 8082, and returning AppB port to 8081.

Upvotes: 1

Related Questions