Engineering

⌘K
  2. Home
  4. Docs
  6. Engineering
  8. React Native

React Native

Boilerplate

Infinite Red’s Ignite CLI is used as React Native app boilerplate, using Bowser boilerplate (which uses MobX State Tree instead of Redux).

Debugging

  • Flipper. Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.

Developing React Native Plugins

How to Generate/Build React Native Debug APK

What’s the difference between Debug APK and Release APK:

  • Debug APK is only for testing and installable other devices by sending APK file directly, it cannot be published to Play Store
  • Release AAB/APK can be published to Play Store

Debug APK

Option 1: for normal React Native app:

react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

(cd android && ./gradlew assembleDebug)

Option 2: for Rocket.Chat.ReactNative:

yarn react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/merged_assets/debug/out/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

(cd android && ./gradlew assembleDebug)

Output APK will be in android/app/build/outputs/apk/.

Now you can install app manually or use adb install:

adb install android/app/build/outputs/apk/debug/app-debug.apk

Reference: Generate APK debug pada React-Native – Resika Arthana

Troubleshooting: https://stackoverflow.com/a/58767107/122441

Info: The Debug Key is generated as follows:

Keystore name: "debug.keystore"
Keystore password: "android"
Key alias: "androiddebugkey"
Key password: "android"
CN: "CN=Android Debug,O=Android,C=US"

Release AAB/APK

Reference: https://www.instamobile.io/android-development/generate-react-native-release-build-android/

We use app signing by Google Play and to ensure support for Android App Bundles, so we use an upload key and not an app signing key.

  1. Get the upload key keystore (or, if not yet exist, generate then save it)

Note: This needs to be done only once per organization. Soluvas already have a soluvas-upload.keystore with a password, stored in Soluvas’s Google Drive.

keytool -genkey -v -keystore soluvas-upload.keystore -alias upload -keyalg RSA -keysize 2048 -validity 10000

2. Add upload key keystore file to project

Copy soluvas-upload.keystore (must be gitignore-d!) into the android/app directory in your React Native project folder.

3. Set ./android/gradle.properties

Set KEYSTORE, KEY_ALIAS, KEYSTORE_PASSWORD and KEY_PASSWORD on ./android/gradle.properties with your credentials:

KEYSTORE=soluvas-upload.keystore
KEY_ALIAS=upload
KEYSTORE_PASSWORD=***
KEY_PASSWORD=***

4. Generate release AAB / APK

Recently, AAB is recommended over APK.

# or: bundlePlayRelease
(cd android && ./gradlew bundleRelease)

If you want to generate APK instead of AAB:

(cd android && ./gradlew assembleRelease)

If that’s succesful, the release AAB/APK creation process is done. You can find the generated:

  • AAB at android/app/build/outputs/bundle/playRelease/app-play-release.aab
  • APK at android/app/build/outputs/apk/release/app-release.apk

This is the actual app, which you can send to your phone or upload to the Google Play Store. Congratulations, you’ve just generated a React Native Release Build AAB/APK for Android.

Build, Test, and Deploy Mobile Apps Continuous Integration

Check: Codemagic

Future Development in Flutter

Currently Lovia & Miluv uses React Native because Rocket.Chat mobile client is in React Native (Electron desktop client also uses React). We will be migrating to Flutter in the future.

Play Store Warnings & Best Practices

This APK contains Java/Kotlin code, which might be obfuscated. We recommend you upload a deobfuscation file to make your crashes and ANRs easier to analyze and debug. Learn More

This APK contains native code, and you’ve not uploaded debug symbols. We recommend you upload a symbol file to make your crashes and ANRs easier to analyze and debug. Learn More

How can we help?