React Native for Android: Basic Knowledge Before Coding

React Native is a JavaScript framework that enables developers to build mobile apps for Android and iOS platforms with one codebase. Even if you are a web developer, you can quickly develop mobile applications using React Native. Not like Cordova that uses WebViews, React Native produces a truly native user experience with better performance. A React Native app is a real mobile app. In this article, I want to share some basic knowledge of React Native.

Prerequisites

React Native CLI

Install the latest Node.js first and run npm command as follows:

npm install -g react-native-cli

Visual Studio Code

There are many excellent editors for writing React Native code. My choice is VSCode because it is easy to find powerful extensions on Visual Studio Marketplace.

react native editor

Android Studio

Download and install Android Studio. According to the official docs, React Native requires the Android 6.0 (Marshmallow) SDK. Launch Android SDK Manager to install relevant packages:

react native android sdk manager

React Native Project: Hello World

Create a new React Native project using command line interface:

react-native init helloworld

Here is the generated project:

react native new

Launch the app on the emulator. Note only one device connected at a time. Do not connect Android phone and emulator simultaneously.

react-native run-android

react native ui

Before running the app on the target device, React Packager which builds index.android.js will be launched first. You have to keep React Packager running in order to reload your code changes.

react native hello world

Hot reloading

If you run the app on mobile devices, you can shake your device to pop up the dev menu. By default, you need to press Reload to reload code changes. If you don’t want to shake and press the context menu all the time, enable Hot Reloading.

How does React Native Work?

React Native uses JavaScript core, a JavaScript engine, to parse JavaScript code. With the JavaScript parser, we can use JavaScript APIs to call into corresponding native APIs. Therefore, the generated APK file must contain the JavaScript engine.

What’s inside the APK file?

After building the project, you can find the APK file at helloworld\android\app\build\outputs\apk\app-debug.apk.

Let’s see what’s inside.

react native apk

react native libs

There are so many shared libraries. According to the engine name, libjsc.so should be the JavaScript engine.

How to bundle up JavaScript resources?

Is there anything wrong in above screenshots? Where is the JavaScript resource? If you install and run app-debug.apk independently, the app fails to run. This is why we need to run React Packager, which runs as a server. The app installed on the emulator is just a client.

To build a complete APK file, use the following command:

cd android
gradlew assembleRelease

Now, there is a new APK file generated helloworld\android\app\build\outputs\apk\ app-release-unsigned.apk. Open this file and check out the difference:

react native asset

There it is, an assets folder that contains index.android.bundle. After signing the APK file, you can release it to Google Play.

Where Can You Find React Native Components?

Like Cordova plugins, React Native allows developers to build custom components to extend the functionalities with native code. You can find various components on js.coach.

Video Resource

Running Code without Android Studio and Xcode

Facebook announced a new tool – Create React Native App – to enable developers to get started with React Native without Android Studio and Xcode.

Use following commands to create a new project:

npm i -g create-react-native-app
create-react-native-app helloworld
cd helloworld
npm start

It will generate a QR code in the command line tool. Install Expo app and scan it. It is similar to run app-debug.apk and remotely load JavaScript code.

In this way, you can only write JavaScript code. Check out the project difference comparing to React Native project structure. There is no Android folder and index.android.js file.

react native project comparison

If you want to write native code, eject it to React Native project.

npm run eject

react native expo eject

Compare the folder structure again:

expo eject project structure

Almost same now. Run the project with React Native command:

react-native run-android