React Native for Android: Basic Knowledge Before Coding
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.
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.
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.
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?
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.
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.
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
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: