53

How to use offline bundle on android?
I didn`t see the document about use offline bundle on android.
I tried to uncomment the code in build.gradle.

project.ext.react = [
        // the name of the generated asset file containing your JS bundle
    bundleAssetName: "index.android.bundle",

    // the entry file for bundle generation
    entryFile: "index.android.js",

    // whether to bundle JS and assets in debug mode
    bundleInDebug: false,

    // whether to bundle JS and assets in release mode
    bundleInRelease: true,

    // the root of your project, i.e. where "package.json" lives
    root: "../../",

    // where to put the JS bundle asset in debug mode
    jsBundleDirDebug: "$buildDir/intermediates/assets/debug",

    // where to put the JS bundle asset in release mode
    jsBundleDirRelease: "$buildDir/intermediates/assets/release",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in debug mode
    resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

    // where to put drawable resources / React Native assets, e.g. the ones you use via
    // require('./image.png')), in release mode
    resourcesDirRelease: "$buildDir/intermediates/res/merged/release",

    // by default the gradle tasks are skipped if none of the JS files or assets change; this means
    // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
    // date; if you have any other folders that you want to ignore for performance reasons (gradle
    // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
    // for example, you might want to remove it from here.
    inputExcludes: ["android/**", "ios/**"]
]

but it didn`t work.It still fetch the JS bundle from the server.
Is there something I missed?

1
  • 1
    Did you manage to find a solution to this ? I'm looking for something similar May 13, 2016 at 0:45

7 Answers 7

58

For offline bunduling of JS into android, first start the server in respective project path:

  1. when server start, open next terminal with same path as project path
  2. copy and paste this command: Before you copy and paste command in command propmt, make assets folder in project respective path
    as:
    android/app/src/main/assets

    paste this command in command prompt and run:

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/
  1. Then in assets folder there will appear file as index.android.bundle
  2. Finally, run command: react-native run-android(while building new offline apk you need not to start server, your offline js file will help you to build apk file.)
  3. Final, apk now build is ready for running in different devices(run apk from app/src/build/debug.apk).
  4. Sometimes newly made apk will run without showing images, If application runs without image , then copy and paste the specific image resource folder into android/app/src/main/assets/(image source folder)
  5. Again rerun application and thus build apk is ready for running.
5
  • This practically broke my project following the steps exactly as described.
    – Hobbyist
    Apr 10, 2017 at 12:17
  • 3
    No longer needed proandroiddev.com/…
    – onmyway133
    Sep 1, 2018 at 22:04
  • for creating a signed apk, you need to remove images from drawable folder bcoz the command will automatically creates the assets. If you don't delete the assets (drawables) you will get duplicate assets error while creating the signed apk. Sep 4, 2019 at 17:10
  • For react-native versions 0.57 and above the bundle output path should be: android/app/build/generated/assets/react/debug/index.android.js See react-native cli documentation for more details. Sep 29, 2020 at 7:42
  • For me, this command was not working (react native-version 0.72.4). It was showing below error: The resource C:\Users\Rahul Sarma\Desktop\Mob App\newapp\index.android.js was not found. Instead this works properly: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ Aug 27, 2023 at 16:47
21

You can read the source code of react.gradle,then you will know how to do the offline bundle.

In react.gradle, it creates offline bundle gradle task for each build variant, and make it execute before gradle process resources, but it enables the bundle task in some special conditions, the code is:

enabled config."bundleIn${targetName}" ||
        config."bundleIn${buildTypeName.capitalize()}" ?:
        targetName.toLowerCase().contains("release")

while the config object is the react object actually as its definition is def config = project.hasProperty("react") ? project.react : [];

and the targetName definition is def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}"

So if we define a proper react property in app\build.gradle, we can enable the offline bundle task.

For example, if we want to enable the offline bundle in release build type but not in debug build type ,we can define the react as:

ext.react = [
    bundleInDebug     : false,
    bundleInRelease   : true
]

then execute gradle assembleRelease in command line, gradle will execute the bundle task and the js bundle will be included in final apk.

Now in your question, you have defined the proper react object, but you don't mention which build type you have ran. Only execute gradle assembleRelease can do the bundle job, maybe you executed gradle assembleDebug so it does not make any sense.

And there is still another problem I need to say(Also see in issue7258). If you enabled the bundle task for release build type and run app from android studio, gradle don't execute bundleReleaseJsAndAssets, because android studio enable the feature Configure on demand (it's in File | Settings | Build, Execution, Deployment | Compiler) by default for speeding up build, and in react.gradle the bundle task is add to project when all project are configured(or called evaluated) as the main code is in gradle.projectsEvaluated{} block.

Configuration on demand mode attempts to configure only projects that are relevant for requested tasks, i.e. it only executes the build.gradle file of projects that are participating in the build.

For some unclear reasons, any task define in gradle.projectsEvaluated{} block doesn't executed when enable the Configure on demand feature. To make it executable, disable the Configure on demand feature in android studio settings, or change gradle.projectsEvaluated{} to afterEvaluate{}.

If you run gradle assembleRelease in command line tool, everything is ok because Configure on demand is disabled by default.

3
  • Thanks for the tip about Configure on demand in Android Studio. That did it for me
    – Muzikant
    Feb 8, 2017 at 12:05
  • If I disable "Configure on demand", I get Execution failed for task ':app:recordFilesBeforeBundleCommandDebug'. > A problem occurred starting process 'command 'node'' when I build the application. Does anyone else get this?
    – Sean
    Mar 9, 2017 at 20:06
  • @AvatarQing can you update this in light of recent flavor dimensions changes for newer api... I got flavor dimension flavorDimensions 'lite','new' and productFlavors foo & bar... How can I generate proper bundleIn string ? bundleIn???? = true Jul 30, 2018 at 14:46
9

You do not have to uncomment anything in your gradle.build file. It is there for reference and you can overwrite any of the values which are there as defaults if you need to.

The problem is that Android Studio is not running the task that is responsible for generating the bundle.

To fix that in Android Studio go to Preferences > Build, Execution, Deployment > Build Tools > Compiler and uncheck "Configure on demand".

Now, any variant which you mark as requiring bundle, will have the bundle generated automatically.

By default, debug variant does not get the bundle generated: bundleInDebug : false

You can change that like this. Here I also provided example how to change the default location of the entry point and default name of the bundle.

project.ext.react = [
    bundleAssetName: "index.myapp.bundle",
    entryFile: "js/index.myapp.js",
    bundleInDebug: true
]

Once you make these adjustments, you may still tun into issues building because Studio does not recognise paths from your shell profiles, so i may not find the path to node.

I posted a solution to that issue here

This is a stable and robust solution. You do not have to do anything manually once you make these changes in your env. Bundle will be built automatically as you press the buttons in your IDE, granted you select proper build variants (that is also in IDE on the LHS bar of the Studio window towards the bottom).

8

When building an unsigned apk from react native project through create-react-native-app which does not have index.android.js and index.ios.js, first of all, you have to check whether the index.js file is there in your project. if it is not available then create a new file index.js and write this code there

import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("VOS", () => App);

after this eject the project and then run this command

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

and then react-native run-android so it will build an apk for you.

3

For release with a Signed APK.

I tried using an unsigned APK file and installing that, but when I went to install it on my Android tablet, it gave me an error of Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES].

I imagine this is because the APK file wasn't signed and the tablet was not happy with this. So, after generating the React Native bundle file I was able to generate a signed APK file, as normal, via Android Studio.

By the way, our app is a fully functioning Android app that already exists in the Play Store and we are just adding React Native to it in bite-sized pieces, because it's awesome.

So to summarize, here were my steps:

1) Generate React Native bundle:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/<your-package-name>/src/main/assets/index.android.bu‌​ndle --assets-dest android/<your-package-name>/src/main/res/ 

2) Generate a Signed APK file from Android Studio.

3) Install Signed APK File to USB device:

adb -d install -r <path_to_signed_apk> 

4) Profit!

2

You can override getJSBundleFile() function in your ReactApplication class to return a custom file path.

@Nullable
    @Override
    protected String getJSBundleFile() {
        return "/your/bundle/path/bundle.file.name.bundle";
    }

After that, just generate the bundle using react-native bundle, then put the generate bundle in the specified path in your device.

3
  • Where does the path start from? Is it from where the ReactApplication class location? Mar 28, 2018 at 14:28
  • For me I used absolute path. It worked fine for me so far.
    – Long Vu
    Mar 29, 2018 at 14:56
  • @LongVu how do you reload js bundle? I install bundle from remote server. How can I trigger reload programmatically?
    – zakjma
    Apr 2, 2019 at 14:14
1

We need to create assets directory inside android->app->src->main directory. and run following command

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

For Windows platform, run following command

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.