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.
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
Finally, we can come to our script. The bit of magic that runs those emulators for us.
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
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.
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.