Why is setting up React Native projects in Expo so hard?
To answer the title of my post, “because there are a multitude of options”. The Expo Framework is one of my favorite frameworks for building universal apps. But that doesn’t mean its without pain points. And one of its pain points is the various ways or “builds” you can use when creating React Native apps. In this article, I aim to bring structure to the chaos of setting up projects with React Native Expo. Lets start with where you can build your app.
iOS simulator/device vs Android emulator/device
Expo is a robust framework for building cross-platform mobile and web applications. When developing with Expo, you have four environments to run/test your application: the iOS simulator, Android emulator, iOS device, and Android device. Each of these options has its own set of pros and cons. For example, if you don’t own an iOS device you can still test your app with an iOS simulator. However, certain features can’t be properly tested when working on a iOS simulator. I ran into this issue while developing an app called GigBoss for a former employer. One of the features in GigBoss allowed users to tap on a phone number and link it to the native phone app. Unfortunately, this feature couldn’t be tested on a simulator because it didn’t have access to the native system. For a step by step process on setting up different environments for your React Native app, click here. After you decide where your app will run, its time to decide how you will build it.
Expo Go
After you decided where you want to develop (i.e. android device) your
Expo app, the question becomes how will you do it . One option is to implement Expo Go. Expo Go is a “sandbox” environment for building React Native apps. If you’re building your app in an iOS simulator or Android Emulator, run the command npx expo start within the Expo CLI. After running this command, Expo Go will be installed automatically on your virtual devices.
Pros of Expo Go
Expo Go is great for getting up and running with a local environment. If you’re curious about React Native and want to start tinkering with no fuss, Expo Go is a good starting part.
Cons of Expo Go
Expo Go is great for enthusiast who want to develop quickly because it hides native directories and the ability to modify files in native directories. But this comes with less flexibility. For example, if you want to use the expo-camera library, you need to use config plugins or configure native files. However, in an Expo Go environment, you don’t have access to these native files. As a result, you won’t be able to install the expo-camera package and will need to find a suitable alternative. One way around this limitation is implement a local build in Expo.
Expo Local Build
One way to work around the limitations of Expo Go is by creating a local build (also known as a debug build). A local Expo build gives developers greater flexibility and control by providing access to native directories and files. If you want to use the expo-camera library mentioned earlier, you would need to run the following command in the Expo CLI: npx expo run:ios (or npx expo run:android for Android). Once this command is executed, the iOS and Android directories will become available, allowing you to use the expo-camera package.
Pros of Expo local build
Affords you the ability to use more third party packages for more robust app experiences
Cons of Expo local build
With greater control comes greater complexity and more opportunities for bugs and errors
Expo Local Build + expo-dev-client = development build
I mentioned earlier that a local build is also considered a “debug” build. When you combine this build with the expo-dev-client package, Expo considers this a development build. Like a local build, a development build affords you access to native iOS and Android directories. However, there are cases when you will need to use a development build over a local build. A prime example of this is when you’re using a third party auth service like Facebook login. When testing a third party auth system with Expo, its instructed that you use a development build. According to Expo’s docs, you can create development builds remotely, locally, or within your own infrastructure.
Pros of Expo development build
Greater feature flexibility (i.e testing Auth services) beyond a local build
Cons of Expo development build
A bit confusing and added complexity
Expo Snack
If you’re a web developer and you simply want to test the waters of React Native (ie. the fundamentals) I would start here. I believe a lot of devs are naturally curious about React Native because its a great accompaniment to their established React skills. But sometimes its important to “test drive” new tools before you go all in. Expo snack is perfect for this scenario.
Pros of Expo Snack
Great for testing and/or practicing in the browser
Cons of Expo Snack
Not suitable for production apps
Recap
Start with Expo Snack if you just want to go on a test drive
Venture off with Expo Go if you want to set up something locally and tinker without a lot of fuss
Create a local build when you want greater flexibility with your features
Create a development build for scenarios where its required like using a third party auth service
