11

I am currently doing an R&D in React Native.

I have a requirement where I need to add some modules(Basically code) in the app.

It is impossible in native iOS app to do so.

In React native apps using tools like AppHub and CodePush, we can push builds to production app. There is a library React Native Auto Updater for downloading latest js bundle but it is deprecated now.

Using the above tools, I need to push the build.

I have a scenario where I want the app to fetch and download the bundle kept on a remote server.

So, How can I download JS Code on making a rest API call from App and refresh the app as per the new JS code?

My concern is regarding download of JS Code. I am clear on the Auto Update of apps part.

Thanks in advance.

Rakesh Gujari
  • 899
  • 1
  • 8
  • 12
  • i think there is no library AFAIK i required the same for android and referred Code Push Documents and for IOS u can try the same ,after downloading the bundle from the server you need to make sure the AppDelegate.m points to the resource file (Just a hint In android i created a fragment where the react native bundle is loaded ,once the bundle is downloaded i refresh the fragment so that react native host fetches the downloaded file). – anbu selvan Feb 19 '18 at 11:20
  • I am looking for same I am new to this can you help me? how can I start to get basic idea ? – Sagar Oct 24 '19 at 04:35

2 Answers2

14

Eureka!

I accomplished this by doing the following:

  1. Create an offline jsbundle Refer this link

    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

  2. Create a Rest API for downloading js bundle. Refer this link

    I have used SpringBoot. Make sure you add this to your API produces "text/javascript"

  3. Download the jsbundle in your app, store and get the path of the bundle.

  4. Reset the path of bundle for React native in AppDelegate.m [for iOS] and in ReactApplication class [for Android]

Rakesh Gujari
  • 899
  • 1
  • 8
  • 12
  • Reset the path of bundle for React native in AppDelegate.m [for iOS] and in ReactApplication class [for Android] Hi, what does this mean? I'm building on android and have issues figuring this out when you meant "ReactApplication class". – Han Jun 21 '18 at 16:37
  • 1
    @Han ReactApplication class means the class which is extending Application and implementing ReactApplication – Rakesh Gujari Jul 18 '18 at 13:24
  • Thanks, after a was able to make it working as well. :) – Han Jul 29 '18 at 00:48
  • What will happen if offline js bundle is using a third party library which is not included in my main app. – user452349 Mar 10 '20 at 17:08
3

Try the react-native-dynamic-bundle package: https://github.com/mauritsd/react-native-dynamic-bundle

Also, you can download the bundle using react-native-fs:

import RNFS from 'react-native-fs'

export const download = async (fromUrl, bundleName) => {
  return RNFS.downloadFile({
    fromUrl,
    toFile: RNFS.DocumentDirectoryPath + `/${bundleName}.bundle`,
  }).promise
}

Regards, Juan

jdnichollsc
  • 1,520
  • 1
  • 24
  • 44
  • 1
    Hi Juan, I am able to download the bundle using react-native-fs but registerBundle (react-native-dynamic-bundle) with the path of dowloaded bundle fails with below error: "TypeError: null is not an object (evaluating 'RNDynamicBundle.registerBundle')". How did you get this working? – user2107373 Jun 25 '20 at 09:53