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.
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 Project: Hello World
Create a new React Native project using command line interface:
react-native init helloworld
Here is the generated project:
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
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.
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.
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:
There it is, an assets folder that contains index.android.bundle. After signing the APK file, you can release it to Google Play.
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.
If you want to write native code, eject it to React Native project.
npm run eject
Compare the folder structure again:
Almost same now. Run the project with React Native command:
react-native run-android