Setting up an Expo app project
Expo is a library built on top of React Native that allows you to write code once and run it in iOS and Android. It has a great deal of prebuilt components which makes building an app a much easier task. It also provides multiple tools such as Expo Go, which is integrated in both the iOS and Android emulators as well as in your phone and it allows you to test your app in real time. Expo provides mechanisms to compile the app for distribution but that will be covered in a future post.
expo
Configuring a project for the first time may not be the easiest task if you are not used to dealing with multiple libraries and components at the same time. That's why on today's post we are going to try to make it easier for everyone looking to create their first app. First we will configure the iOS and Android emulators to be able to create and launch the Expo project.
Required software
The first thing we have to do is install node.js by using the following link node.js.
Once it is done installing node we will be able to install yarn by executing
npm install --global yarn
on a termial.
If you are using a Windows device, before being able to install expo-cli you will need to restart your computer. I also recommend you install the new PowerShell app from the Microsoft App Store. Remeber to run it with administrative privileges.
Last, we are going to install expo with the following command
yarn global add install expo-cli
Setting up the Android emulator
The first step is to download and install Android Studio from the Android Developer website.
During the installation process, I recommend you choose to install the following packages, since you are going to need them anyway to launch the emulator:
- Android Emulator
- Android SDK Build-Tools
- Android SDK Platform-Tools
- Intel x86 Emulator Accelerator (HAXM installer)
We are going to add an emulator from the More Actions section by clicking AVD Manager.
- Create Virtual Device
- Select Device
- Select a system image
Finally, if you are using a Windows machine, we have to configure the environment variable to be able to start the emulator from the terminal. This step is optional but if you are going to work on the project ofter, it is more than recommended for you own mental health.
Search for environment variables in the Control Panel and add the following path to the Path item:
C://Users/[Your username]/AppData/Local/Android/Sdk/emulator
We can now start the emulator from the terminal with the following command
emulator -avd [Emulator name]
If you can't remember how you named the emulator, list all of them with the following command
emulator -list-avds
If you chose not to configure the environment variable, start the emulator through Android Studio from the AVD Manager section (click the play button under Mode Actions).
If you are using a Windows ddevice, it is likely you need to enable the Windows Hypervisor Platform setting from the Control Panel (search for activate or deactivate Windows features).
Configuring the iOS emulator
To test your app on iOS you will need a Mac. The iOS emulator comes with Xcode which can itself be downloaded from the Mac App Store for free.
Creating the project
Once you have managed to install everything necessary it's time to create the project by executing the following command and selecting the blank option
expo init [your app name]
Finally, change into the directory and execute the follwing to start the project:
expo start
Your browser will open a website, choose Local in the Connection section and click Run on Android/iOS simulator depending on which one you have configured.
If your browser has not opened automatically, type a or i to open the Android or iOS emulators, respectively.
Using a physical device
If you find the emulator lacking you can always use a physical device to test your app. For this you need to download the Expo Go app from your Android or iOS device. Change the Connection setting from Local to Tunnel and scan the QR code from your device to use the app.
