Running multiple simulators on Expo

A small guide on how to run multiple simulators on Expo/React Native to help with responsive development.

Running multiple simulators on Expo

A small guide on how to run multiple simulators on Expo/React Native to help with responsive development.

A couple of weeks back, I started working on my first React Native app. Naturally, I chose Expo to build it. I made some great progress and had an MVP ready in about 10 days and started sending it to my friends to test when I realized that my app wasn't optimized for different screen sizes at all. Especially older phones with a smaller resolution. And to make things worse, mobile development is nothing like the web, there isn't a browser you can simply resize and test on.

I then decided to test the app on multiple screens before pushing out another alpha for people to test but the whole process was incredibly slow. I would have to test device by device and keep switching simulators. That's when it struck me and I realized I could simply run multiple simulators and see my app in different screen sizes at the same time.

Surprisingly enough, that wasn't straightforward either. There was a lot of outdated content about how to do it and a couple of methods I tried didn't work. And finally, I came across this stack overflow question. So this post is an expanded version of the answer. Mostly for my reference but I hope it helps others too.


First, let's decide the devices we want to run as our simulators. I went with the iPhone SE, the iPhone8, and the iPhone 11 Pro Max. The idea behind this was to choose a small, medium, and large device. That way, I at least have an idea of what my app looks like across those 3 sizes, even on Android devices.

To tell our script about those devices, we need their device IDs. And to get those, we simply run xcrun simctl list. This should return a pretty big response with a list of devices available to us, we only care about the IDs of the devices we want to test on.

Device List

Next, we need to get the path to our Exponent app. If you've run the simulator even once, you should already have an instance of it in a hidden directory. To do this, simply navigate to ~/.expo/ios-simulator-app-cache/ and note down the name of the file in the directory. For me, the file was Exponent-2.15.3.tar.app.

Finally, we can come to our script. The bit of magic that runs those emulators for us.

#!/bin/bash
declare -a simulators=("DEVICE_ONE" "DEVICE_TWO" "DEVICE_THREE")

for i in "${simulators[@]}"
do
    xcrun instruments -w $i
    xcrun simctl install $i PATH_TO_EXPONENT_APP
    xcrun simctl openurl $i exp://127.0.0.1:19000      
done
start-simulators.sh

Simply replace the DEVICE placeholders with the actual device IDs and the PATH_TO_EXPONENT_APP placeholder with the path to your Exponent app. For example, in my case, the path would be ~/.expo/ios-simulator-app-cache/Exponent-2.15.3.tar.app.

The last step is to save the script and make it an executable file, just run chmod 755 start-simulators.sh, assuming that's what you called the file.

Once you do all this, simply run expo start and ./start-simulators.sh and one after the other, you should have all three simulators running and updating themselves whenever you make any changes in your React Native app.

Multiple Simulators

That's about it for this post. I hope it helps anyone else that comes across this issue. I've learned a lot over the past couple of weeks building my first React Native app and would be more than happy to write more content about how I solved the problems I faced or answer any questions you may have. As always, feel free to hit me up on Twitter with any questions whatsoever.

Tags:

Faraz Patankar

Probably obsessing over fantasy football, figuring out what to eat for my next meal or working on my next great (soon to be abandoned) side project but hello to you too! 🤗

More posts from this author

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.