Build React Native Application With Expo
In this article, I am going to walk you through the steps to create a React Native application with Expo. I have been using Expo to build my application for my group project this semester. Expo has created the full documentation; if you are interested to get into the deeper part on how to build an app using expo, you can access it here.
Keep in mind that you need an Apple Developer account when you are going to build an iOS standalone app. On the other hand, we can simply build an android standalone app regardless of having a developer account or not.
This article focuses on android app development since my team is currently working on an android project.
Why We Chose Expo
Here are some of the reasons why we chose Expo:
We can see real-time change of our code — Since we can see the result of our code modification instantly, we can fix bugs and improve our code quickly. With the “hot-reload” feature on Expo, we could easily restart the project and see the result of our new code instantly without having to restart the application.
Easy to detect errors — When we run our code, if Expo fails to build the project, Expo will return an instant error message and also where does the error occur. Thus, they also provide documentations on several error. As we can see below, Expo tells us what is the error comprehensively in our mobile.
In the terminal where it runs, we can see clearly what the error is and where it occurs. Below, we can see that it is a ReferenceError on screen BusinessEcosystemScreen at line 126.
Build the app with one command — When we are going to build the app after developing, we just have to execute one command. expo build: ios or expo build: android to build either iOS app or android app respectively.
Starting With Expo
First of all, we need to have Node.js and git installed in our device. Additionally, we need to install a text editor or IDE and yarn to help us build our Expo app. I use VSCode for my text editor since it provides many plugins for different types of codes.
After we have installed all of them, we need to install expo into our environment, we have to install Expo CLI in our environment. To do that, we simply type npm install -g expo-cli or yarn global add expo-cli . In clicks, we are using yarn since we included those dependencies in our repository. If you are using Windows, it is important to enable your WSL prior to installing the Expo CLI.
App Configuration
After we have setup Expo in our development environment, we have to setup the app.json that has already been created we instantiated the project with React Native. The content of the file should look like this:
The bundleIdentifier and package field for iOS and android respectively use reverse DNS notation. It does not have to be a domain. We can replace those with whatever that make sense to our application.
slug is the name of the url where our application’s JavaScript is being published to. We can se the example here, expo.dev/@personal/components . personal is the username and components is the slug.
Building The Application
As what have been stated before, we just have to run the command expo build: ios or expo build: android . Keep in mind that running this command will also automatically publish your application with expo publish . You can configure this if you don’t want to automatically publish your app by using release channels.
Building for Android
Since my team is currently working on an android project, then I am going to walk you through the app building for android.
We can choose whether we want to use build the app in the form of an APK (expo build:android -t apk ) or as an Android App Bundle(expo build:android -t app-bundle). The bundle form is recommended.
When building the app for the first time, you will be asked whether you want to upload a keystore or have Expo figured it out for you. It is recommended that you leave it on to Expo if you don’t know what a keystore is; but if you have your own personal keystore, then feel free to use it.
If we let Expo configure our keystore for us, it is strongly recommended to run the command expo fetch:android:keystore after building to save your keystore to be stored somewhere safe. It is crucial to do so because it is going to be used in future updates since Google Play Store requires us to use the same keystore. We will not be able to do so if don’t have our keystore.
Testing The Application
After the app has finished building, we can then run the app to test it. For android app, we can run it on emulator or on native device. If you are running it from an emulator, we have to build our project with the apk flag by running expo build:android -t apk . If the testing is done on the native device, we have to make sure the android platform tools installed along with adb . After that, we just have to run adb install app-filename.apk with the USB debugging enabled on our native device and the device has already been plugged in.
Conclusions
Expo is a great framework if you are going to create a React Native mobile application. Besides that its easy to use, the documentaries are limitless and the support that the community gives are uncountable. Building the app is also easy since Expo provides us with a lot of resources to read to and to get help to. It is truly an enjoyable experience using Expo.
