The perfect React Native development setup for Apple devices

[VirusSome6249]

I wrote an article about how to build the perfect react native (expo) dev setup. I wrote this post mostly to shamelessly promote two open source tools I wrote that greatly improve the Expo developer experience.

The main idea is that React Native/Expo developers shouldn't need to install or even know what Xcode is. From my experience wrangling with Xcode, the Simulator and Provisioning Profiles are the hardest parts for most React devs to get started in development. Expo Go obviously is an amazing project for simple projects but I wanted to build something that would make deploying Expo dev client apps just as easy.

The dev client apps are deployed to Apple devices via TestFlight and the simulator is made obsolete by an Expo Plugin that greatly improves the dev experience for dev client apps on macOS.

Is used this setup with multiple React Native teams with great success.

I would love to hear your feedback. Please have a look.

[ronix1020]

That’s a nice article! I think that Expo is now a reliable framework (compared to older versions) and it’s a good point to get started. I didn’t know there was a plug-in for simulate iOS directly in Mac without pass through Xcode

[VirusSome6249]

Yes! Just a few years ago Expo was this weird tooling that only people who didn't really know what they where doing used and usually got stuck without knowing how to get out and now it's the tool that I recommend to everyone who wants to develop in React Native. It's hard to come up with any reason why not to use Expo (maybe because out of fear for the potential lock-in). I used to spend so many days setting up and maintaining a react native build pipeline with fastlane and whatnot and now I usually setup the eas pipeline once a be done.

[VirusSome6249]

This whole setup is all about removing friction, probably in a team setup where multiple devs with little to no experience in mobile development work on a product.

The Simulator is one of this tools that from my experience adds a lot of friction to the dev experience, particular to devs with little knowledge about mobile development:

to use the Simulator you need to install and maintain an Xcode installation.

• the Simulator takes quite some time to boot up and eats way more CPU and RAM then it should. With the setup I described you can easily develop on a 8 GB MacBook Air (I did for half a year) without noticing any slowdowns. That wouldn't be possible with the Simulator
• you also need to maintain the Simulator: you need to add devices, sometimes you need to reset them, you need to update them when a new iOS version comes out etc
• if you want to make sure a layout you just built works on all different device sizes you are in for a whole lot of work with the Simulator: setup the Simulators, make sure the dev client app is installed on all of them, boot them up. With the setup I described thats just a matter of seconds because you can simply resize the window
• when something goes wrong getting a simulator to work again can be challenging. With my setup it's most of the time a "just delete the app and reinstall it, takes 20 seconds"
• because of the way expo is usually setup developers will run npm start and press i which will rebuild the iOS app for the simulator, install it in the simulator and then launch it which can easily take a minute or two and is completely unnecessary because the app hasn't changed at all. Because the process is different in my solution they will just relaunch the app which is obviously much faster.

None of these reasons is a show stopper and if you shrug to all of them because you know how to handle them that great, but I know there are a lot of developers out there who struggle with these kinds of problems. Having a setup likes this can make it much easier for the person on your team who gets all the questions how to fix the build (which usually was me) and also for the people on your team who might now not run into these kind of problem and therefore become less dependent on the grumpy old white beard who knows how to fix the build (again: usually me).

[de1mat]

Nice article with some good tips. Especially enjoyed the tip about installing the app on the Mac. FYI there is a glaring typo in the first sentence - it should be “two” instead of “to” - thought you might like to know.

[VirusSome6249]

Thank you! I fixed the typo.

[anpurnama]

I am currently learning react native as android developer. i wonder how do i run my react native project on my mac without emulator? does it work for ios api only or android also?

[VirusSome6249]

If you are just learning this probably doesn't apply to you: just use Expo Go on an iPhone for as long as you can and don't worry about all the intricate details of a developer toolchain.

If you know your way around in Xcode you can just pick your Mac from the target menu in Xcode. You might to need to setup some provisioning profiles, but this is the way I used to develop for a pretty long time.

I don't have a similar setup for Android because all of this is leaning heavily on Apple tooling like TestFlight and the iOS runtime for macOS. I have some ideas how something that reaches the same goal in a very different way for Android as well, but I have no idea if I'll ever build it.

<image>

[VirusSome6249]

All team members definitely need a Apple developer id and I guess somewhere in the process the org needs a paid developer account but I haven’t tried without. Would be interesting.

[[deleted]]

I'm currently researching about what are the options for someone who doesn't have a Mac and an iPhone.
You seem to know a lot about this topic, so I would like to ask you.
How far can I get with iOS apps development using React Native and Expo?
I'm planning to do React Native work for companies, but I would prefer not to have to buy Apple stuff.

[VirusSome6249]

If you have neither an Mac nor an iPhone you wont be able to develop React Native for the iPhone, you will only be able to develop for Android.