In this article I will try to guide you on how to start a react native application from scratch using expo and consequently build it into an apk.
For quite some time I wanted to learn Swift and enter the world of Mobile Software Development, but the opportunity never arose.
Around 2019, I came across an opportunity to develop a mobile application which had a simple requisite. The application had to work both on Android and iOS. Since me and my team did not have knowledge whatsoever about Swift and little time to deliver, we decided to use something we already knew and that would work both on Android and iOS.
This was React Native. Since I had already worked with React, this was the best option for us.
What is React Native?
React Native is a JavaScript framework for writing real, native rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.
We had no experience using React Native, however there is a really neat tool that really helped us developing our application. This tool is called Expo.
What is Expo?
Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.
I was very satisfied with this and would absolutely try it again to develop mobile applications. But right now, I will help you develop your own. 😄
Enough talking. Let’s get down to business.
Prerequisites
What’s required for us to get started?
React Native’s language is JavaScript so we are going to need a package manager for JavaScript which is npm. You can go here and install Node and NPM.
After installing you can open a terminal and validate using this command:
npm --version
Next will be to install, using npm, expo command line interface using the following commands:
npm install --global expo-cli
Step by Step
Step 1: Create your app using Expo
expo init --template blank
After executing this command, you’ll need to provide the name you want to give your app. This name will be used to create the folder where your project will be. Within this new folder there will be a bunch of stuff already configured which are necessary for you to run your app.
I’ll leave below an image of what should have been created.
Pretty standard stuff here, but what’s most important and what’s required for your app to run here are the assets folder, the node_modules folder, the App.js, app.json, babel.config.js and the package.json.
If you want to deep dive on any of these files, I’ll leave some links for you to have fun. 😄
- For babel.config.js related stuff, go here.
- For package.json related stuff, go here.
- For app.json related stuff, go here.
Step 2: Run the App
npm run start
After running that command, Expo Command Line Interface will start Metro Bundler, which is an HTTP server that compiles the JavaScript code of your app using Babel and serves it to the Expo app.
It also pops up Expo Developer Tools, a graphical interface for Expo CLI.
The Expo Developer Tool should look like this:
Expo does have some nice features. Did you know you can install your app on your phone with a tiny app that Expo developed and reading that QR code? You can also install your app into your Android Virtual Device or plug in your Phone with a USB cable, but the QR code option was quite welcoming for me. 😄
Since I am using the QR code, I had to install this App on my Android.
After installing the app, the only thing you need to worry about is putting the connection to Tunnel (if expo shows a warning saying Tunnel URL not found, falled back to LAN URL, please stop and start the app again) and make sure the Phone and the Computer are on the same internet, otherwise it won’t work. 😞
You should see something like this on your phone. From this step forward, you can start and explore your React abilities and make your app pretty and useful.
If you want to use some basic components from React Native, you can see their documentation here.
For more complex stuff, like device permissions and so on, you can see this documentation from Expo.
Step 3: Build your Android Package with Expo
The next logical step after you’ve developed your App, would be to build it and distribute it. Since I haven’t distributed the App we were developing to Apple Store, or to Google Play Store, I can only guide you on how to build your Android Package (APK) using Expo.
In order for us to be able to generate an APK using Expo we need to create an account. You can create one here.
Next, we will need to change some settings on the app.json file.
Since we are creating an Android Package, the only thing we need to worry is to define the Android package name like this:
{
...
"android": {
"package": "com.tutorial.reactnative"
}
...
}
If you want to deep dive on this matter, you can follow this link. It is the documentation for every supported field on the app.json file.
Start your app using npm run start and then open a new terminal on the same directory and execute the following:
expo build:android -t apk
If you are not logged in yet, it will ask you to log in or to create a new user, since we’ve done this previously, we can choose to log in.
Afterwards, it will ask you for a Keystore, don’t worry about it and let them handle it.
This will trigger a build of your app and after that build is concluded, it will be sent to the expo servers to be transformed into an APK.
This may take some time as Android builds are the most popular within Expo servers. If you want an estimate on how much time it will take, you can follow this link. It shows how many Android builds are on Expo servers waiting for processing.
You do not need to wait in the terminal for the build to complete. Generally, you will receive an info stating that the terminal command timed out. No worries. Just check the build status on the expo website.
After some time, your APK will appear on your Expo Dashboard and it will be ready for download! 🎉
Wrap up
Now that we have a functioning react native application and you know how to build your own APK for delivery, you can continue and develop that app which we know will be the next big thing.
Top comments (1)
While expo is good for starting up, you shouldn't stick too long with it. Minimum size is ~25 MB for iOS apps and ~20 MB for android apps using Expo, while using react-native CLI you can get the same app with around ~1 MB size.