How to Make Simple Update JsBundle React Native

November 2020, I got a task to updating our existing react-native application from my lead without uploading new apk to google playstore, because by uploading to google playstore, it take a lot of time and lot of effort.

WARN: This story is not including about any network security or Android security, Please use with caution.

There is a tool such a CodePush from Microsoft that might helping you with your version. But I’m Not gonna talk about CodePush here, but I’m going to talk about how to do it by self.

Notes: This story is base on RN.062

First you need understand that react native android apps need 2 things from react native wich are react native library and js bundle. those thing are important.

What is js bundle ? js bundle is a file that contain all javascript code and will be compiled at runtime. the file can be added anytime. to generated js bundle you can run this command at console : npx react-native bundle — platform android — dev false — entry-file index.js — bundle-output ../path to bundle/index.android.bundle — assets-dest ../path to assets destination

Step 1. Prepare function to load Js bundle from a path

If you familiar with installing other package with manualy linking package you must know when react-native app start, it start from MainApplication class. those class calling ReactNativeHost then starting React Native Library then calling js bundle from getJSBundleFile() method. this method is returning string and static, so will be error if returning other data type or calling other non static method and other static variable. this method can override for some purpose. one of them is updating app.

this is my code at mainApplication.Java that override jsbundle path after downloading new js bundle version

Step 2. Make LaunchResolveBundlePath()

what is LaunchResolveBundlePath() ? this method I build because getJsBundleFile can’t calling my non static method. So I build this method only for getJsBundleFile().

logic of this method is simple. we get the string value from the context of the apps by key. we get it value by calling the key ACTIVE_JS_BUNDLE_PATH. how to store it, we talk this at step 3 .

After we get the active path, we check this file is exist or not (why ? it might be you delete it or something happen that make file is missing). if the file is exist, we take the absolute path. if not exist we return default js bundle from the asset.

Step 3. Make SetLocalValue()

this setLocalValue I use for storing information version like Js version, Current App Build Version, Active Js Bundle Path. For me I initiate this at construct and store it at settings variable with type SharedPreferences (don’t forget to import android.content.SharedPreferences). Then I call at setLocalValue()

Here we know what method that causing updating js bundle, how to set path and call it. After path is provide we should reload the app and woolaa, the app is update.you can explore this concept and improve this. I’m sorry that my story is less or too simple. I hope you understand what the concept of updating the app by replacing js bundle with the new one.