Get Started With React Native for Android
Here’s how to set up a React Native development environment to create Android apps.
Since its launch in 2013, React has gone a long way in both features and popularity. The JavaScript front-end UI library by Facebook is one of the most popular and most used, according to a survey from Stack Overflow. The library's main selling points are that it’s easy to use, it resembles HTML and CSS by using JSX, and its performance compared to other frameworks and libraries is much faster.
Shortly after React’s initial launch, Facebook released a framework called React Native. This, however, was not designed for the web, but instead for mobile devices. You could now create mobile apps with similar syntax and features to React. The great features of React like JSX and components are included in React Native. Because of this, many apps such as Uber and Facebook are written in React Native. In this tutorial, I will show you how to set up React Native for development so you can start creating your own apps.
Prerequisites:
- A Windows, macOS, or Linux computer with at least 8GB ram.
- An Android mobile device running 5.0 or higher — This will be used for emulation in case your computer does not have sufficient RAM to run an emulator.
- Basic knowledge of React
Step 1: Install Expo CLI
Expo CLI is a framework for React Native that allows us to develop, build, and deploy apps fast. The reason for this is because it’s essentially a bundle that comes with software and packages that can allow us to develop both iOS and Android apps easily. When using Expo, unlike Bare React Native, you don’t need to know Java, or any native iOS or Android code to develop apps. You also don’t need Android Studio or Xcode to develop iOS and Android apps with Expo CLI. All you need is some beginner React knowledge.
We’re going to be installing Expo CLI through npm. Run the following command to install Expo.
npm install -g expo-cliAwesome, you just successfully installed Expo CLI.
Step 2 (Optional): Install Android Studio
This step is optional, and while I did say Expo does not require Android Studio, you will need a simulator to run your app on. This step is optional because if you have a physical Android phone running 5.0 or higher, you can use that as well. I will cover how to set up your environment on your physical phone in a bit.
First, head over to Android Studio. Since I’m on Linux, I’m just going to install it via the Ubuntu Software Center.
I’m going to press Install.
Once it finishes downloading, open Android Studio. Go through the setup process.
Here, click on Configure. Click on AVD Manager.
Click on Create Virtual Device.
As you can see, this screen shows a variety of phones with varying screen sizes. I would pick one of the Pixel phones, but it’s up to you. For this tutorial, I’ll just pick the Pixel 4. Also, if you see a Google Play icon near a mobile device, it means the simulator will come with Google Play.
Here, pick the latest release, which in my case is Android 11.
Pick a preferred name for your simulator and press Finish.
Awesome! You have successfully set up your Android simulator.
To fire up the simulator, go back to AVD Manager, select your simulator, and press the Play button. This should start up the simulator. Now, based on your computer hardware, it may lag the first couple of minutes. I’m on Linux, so it’s fairly smooth for me.
As you can see, our simulator has booted up. We have successfully created our Android simulator!
Step 3: Set Up Emulator on Android Phone
This step is optional only if you set up your Android simulator. If you didn’t, then you will need to follow this step.
Okay, I know what some of you are thinking. What if I don’t have a suitable computer or an Android phone? For those who are in this situation, don’t worry; I have a solution for you, which I will show you shortly.
Okay, let’s continue. Turn on your Android phone, and go to the Settings app. Scroll to the bottom.
Select “About phone”
Select “Software information”
Once you’re here, tap Build Number 6 times. This will enable developer mode on your phone.
Once you have enabled Developer Mode, go back to Settings and find Developer Options.
Select Developer Options.
Scroll down to Debugging and select USB debugging. This will allow us to run the emulator on your phone.
Okay, we’re almost done. Now, we will install Expo Go. You can install this via the Google Play Store.
Awesome! We have successfully set up our emulator on our Android phone.
Step 4: Create an Expo Project
Now that we have set up our environment, I’ll show you how you can create a project so you can develop your apps. If you haven’t already, download Expo CLI by running npm install -g expo-cli.
To create a project, run:
expo init MyNewProject
Of course, you don’t have to name your project “MyNewProject”; you can give your project whatever name you want.
When you see the above menu, you can decide what type of project you want to generate. If you’re new to React Native app development, I suggest picking the first “blank” option. If you prefer using TypeScript, you can pick “blank (TypeScript)”. The tabs option comes with React Navigation, which is a library for routing. The rest is for experienced React Native developers.
I picked “blank”. If you picked something different, you’ll still have a similar screen. This process may take a bit, based on your computer.
Yay! Our project has been created! Now, navigate into the directory, which should be the name of your project.
Then, you can open this project in your preferred code editor and start coding away!
Step 5: Run Your Project In Your Simulator.
To run our project on an Android simulator or device, run npm start to start the dev server.
You should come across a screen like this. On the left, you can see an option that says “Run on Android device/emulator.” Go ahead and click on that.
If you’re on Android Studio:
Open Android Studio and then turn on your emulator. Then press the “Run on Android device/simulator” option.
If you’re on a physical Android device:
Plug your phone into your computer and press “Run on Android device/simulator.” If you configured it properly, it should automatically open the Expo Go app and launch your project.
Congratulations! You just successfully setup your React Native developing environment. That wasn’t so hard, was it? Compared to Android development with Java or Kotlin, React Native is, in my opinion, much easier. If you have any questions, feel free to drop them in the comments and I will most definitely reply.
Like what you read? Sign up for our newsletter below.
