For most teams developing React Native apps has two sides: there is a sunny JavaScript side with React, Hot Reloading and TypeScript. And then there is the dark side with Xcode, Android Studio, Objective-C and code that hardly anyone understands and no one can update.

What does the perfect dev setup need?

The perfect setup should hide the dark side as much as possible and allow the developers to focus on what they know: sunny JavaScript (or ideally TypeScript) code. Developers should be able to run and develop their code on their devices and in their development Macs without ever touching Xcode or even knowing what it really is. Updates to the dev environment should be fast and easy.

Use Expo and EAS

Even the official React Native documentation recommends to use Expo for development now. In my experience Expo makes the React Native experience much simpler. You don’t need native code in your project, which reduces checkout times, prevents confusion and makes SDK updates so much simpler. Also you should use the EAS build build service. Setting up a build pipeline for iOS on GitHub Actions or GitLab CI is a very painful process and EAS removed most of that pain. The EAS paid plan easily pays for itself and for smaller projects you don’t even need that as the free plan usually is enough.

Use Expo Dev Client

While Expo Go is still the easiest way to get started or for prototypes you should switch to the Expo Dev Client as soon as your project grows. If you need native modules that aren’t part of Expo Go you probably have no choice anyway, but even if not using the dev client gives your developers an experience that is much closer to production. Deep Links, App Icons, Push Notification without EAS, Splash Screens and so on and on are not testable using Expo Go.

Use TestFlight

The big downside of using a Dev Client App ist that you suddenly need to worry how to deploy that dev client app to all the people who need it. Out of the box expo needs to register every Apple device that is used for development: the eas command line app allows you to register the unique ID of your phone and then it will be baked into the provisioning profile during the build. Whenever you want to add a new device you need to register it and rebuild it. Installing the resulting IPA file to the device can be very tricky as well.

Distributing the Dev Client App using TestFlight is much simpler: the app is built using eas and then automatically submitted to TestFlight like any other beta build. You can then deploy this build via TestFlight to all your team members using a “Internal Testing” group. Every member of this group can install the app on all their devices and use it for development and testing. Adding (or removing) members is easy: you add them in the Apple Store Connect portal and they will receive an invite via email. As soon as they accept the invite they can install the app and start developing.

Unfortunately Dev Client Apps will be rejected by Apple for using private APIs. This is why I developed the Expo plugin testflight-dev-deploy which will simply patch out the private API usage from you Dev Client App. Just follow the (pretty easy) instructions in the Repo and you should be good to go.

Use the iPhone App on your Mac

Since Apple transitioned to Apple Silicon it’s possible to run iPhone app and iPad apps on your Mac as long as the developer doesn’t opt out. This is also true for your Expo Dev Client App that you just deployed to TestFlight: simply open the TestFlight app on your Mac and you should be able to install and run the app exactly as you would on your phone.

This has a few huge advantages over using the Simulator: you don’t need to install Xcode on your Mac, you don’t need to worry how to install the dev client app in the simulator, you don’t even need to build the dev client app for the simulator in the first place. Also this way the app uses much fewer resources then the app inside of the simulator. Restarting the mac app takes seconds while it can take minutes to restart the simulator.

But there are a few huge downsides as well: There is no way to shake your mac app to open the developer menu in your Expo Dev Client App. The window of the app is either tiny if build only for iPhone or it’s to big to have the size of an iPhone screen if you are building for iPad as well.

All of these issues and a lot more can be solved using the dev-client-mac-tools package.

Amongst other things it…

• allows you to resize the app window to any size you want
• gives you shortcuts to reload the app, open the developer menu or toggle dark mode
• allows you to resize the window to common iPhone sizes
• float the app window on top of other apps or only on top of VSCode so you can see your app while editing code
• add custom functions to the menu bar for your development needs

Summary

With Expo and my plugins you can get a perfect dev environment for your React Native projects. With the dev client app developers can test and develop every feature like in a production build. Thanks to the testflight-dev-deploy you don’t need to worry about the distribution of the dev app to your team members: every team member can install the Dev Client App on all their Apple devices using TestFlight in seconds. Using the dev-client-mac-tools plugin you don’t even need a Simulator to develop your app on your Mac.

About me

I’m a software developer for more then 20 years, I have more then 10 years of experience as an iOS developer and more then 5 years experience as a React Native lead developer. During my carrier I worked at Instagram, SoundCloud, RedBull mobile and many other apps.

In the last years I helped teams of web developers to build apps using React Native. I learned a lot how to make the transition for web developers as easy and painless as possible.