react-native: Android error “Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app

Solution

Run the following:

react-native run-android
react-native start --reset-cache

Description

After creating a project and not changing a single file, I tried to test it on my 4.4.2. device. I got this red screen right on start of the app and after dismissing it, only white screen was shown instead of welcome message that was supposed to be there.

screenshot_2016-08-10-11-45-29

I also got this error on 5.1.1, but the project worked fine on 6.1.1. Android emulator (for 4.4.2) was also able to display the messages without this redscreen

Edit: On Stack Overflow, user tbo has posted an answer with a workaround. It does work, however it’s not ideal as it takes more time http://stackoverflow.com/questions/38870710/error-could-not-get-batchedbridge-make-sure-your-bundle-is-packaged-properly/38874952#38874952

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 60
  • Comments: 77 (1 by maintainers)

Most upvoted comments

react-native run-android
react-native start --reset-cache

Found the solution: react-native start then reload the app.

So I dig a little bit more and found that my <root>/android/app/build/intermediates/assets/debugfolder was empty and by running cd android && ./gradlew assembleDebug was not creating those files required, which are later used by javascript thread in our react native apps.

I ran manually the following command which the debug build command should have created ideally.

node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output /<path to dir>/android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest /<path to dir>/android/app/build/intermediates/res/merged/debug

After running these commands I found two bundle files in my <root>/android/app/build/intermediates/assets/debug

And then a I ran again cd android && ./gradlew installDebug my app started working again.

可以看下这个 http://www.geek5.cn/?p=232

If this is happening on physical device, do adb reverse tcp:8081 tcp:8081, then reload your app Hope it helps!!

@changkun Try to change an emulator device

Check to make sure that your MainApplication.java file does NOT have the following import:

import com.facebook.react.BuildConfig;

I inadvertently added this in error when I was changing my app’s package name and somewhere along the way Android Studio complained that it could not find the class and suggested that I added it. If you do not have this, try invalidating your Android Studio cache and restarting Android Studio.

For me, this caused my app to use a release or cached version of BuildConfig which made return BuildConfig.DEBUG return false. If you leave this out, a generated version in your build folder will be used instead which, for debug builds, will return true.

Then, in DevSupportManagerFactory’s create function, enableOnCreate will be true and will return a DevSupportManagerImpl class instead of a DisabledDevSupportManager class. This will cause your React Native app to access the package server instead of looking for an internal JS bundle.

public class DevSupportManagerFactory {
  ...
  public static DevSupportManager create(
    Context applicationContext,
    ReactInstanceDevCommandsHandler reactInstanceCommandsHandler,
    @Nullable String packagerPathForJSBundleName,
    boolean enableOnCreate,
    @Nullable RedBoxHandler redBoxHandler) {
    if (!enableOnCreate) {
      return new DisabledDevSupportManager();
    }
    try {
      // ProGuard is surprisingly smart in this case and will keep a class if it detects a call to
      // Class.forName() with a static string. So instead we generate a quasi-dynamic string to
      // confuse it.
      String className =
        new StringBuilder(DEVSUPPORT_IMPL_PACKAGE)
          .append(".")
          .append(DEVSUPPORT_IMPL_CLASS)
          .toString();
      Class<?> devSupportManagerClass =
        Class.forName(className);
      Constructor constructor =
        devSupportManagerClass.getConstructor(
          Context.class,
          ReactInstanceDevCommandsHandler.class,
          String.class,
          boolean.class,
          RedBoxHandler.class);
      return (DevSupportManager) constructor.newInstance(
        applicationContext,
        reactInstanceCommandsHandler,
        packagerPathForJSBundleName,
        true,
        redBoxHandler);
    } catch (Exception e) {
      throw new RuntimeException(
        "Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found" +
          " or could not be created",
        e);
    }
  }
}
  1. Create the android/app/src/main/assets folder

  2. run react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/ on the project root

    Then assets will generate three files index.android.bundle index.android.bundle.meta index.android.map

  3. Last run project react-native run-android

Test Success Device: HUAWEI MATE 7 Android 4.4.2

I got it to work by changing in the file .buckconfig the line: target = Google Inc.:Google APIs:23 to target = Google Inc.:Google APIs:24

Edited: I was having the same exception on the device Z3 Compact D5803 - 6.0.1 Then i saw in SDK Manager that Android 6.X has api level 24 and not 23, then i changed.

I had the same issue.

I first needed to run the server react-native start

and then react-native run-android

@Antibioticvz cool! It works for me, just simply change the emulator from nexus5 to nexus 6.

Just getting started with React-Native, I got into troubles, couldn’t make anything work.

Basically, using a virtual device I couldn’t get it to connect. When starting the device from android avd interface, I got bind: Transport endpoint is not connected. I still haven’t figured out that part.

I went using my own Android OnePlus One, yet, troubles again. But I got it working with the following steps:

Getting started

Physical device (easier)

  1. Port proxy for physical device (-d will automatically target physical device) adb -d reverse tcp:8081 tcp:8081

  2. Start ADB server adb start-server

  3. Run react-native server for hot reloading react-native start

  4. Start Android app on the physical device react-native run-android (~30sec)

  5. Shake the device and enable Hot reloading and Live Reload (useful the first time)


I hope it will helps some of you folks! Meanwhile, if anyone has any idea about the Transport endpoint thing, please share 😉

@sumit6b Thanks , Your solution worked for me but I can’t use it in dev build , everytime I change something and I have to build apk.Any help on that?

My case:

  1. open Dev setting by type command + M
  2. put 127.0.0.1:8081 in Debug server host & port

issue gone. hope help.

For me the problem was adb not being in my path. The Get Started page tells you to put ${ANDROID_HOME}/tools in your path, which i did but that folder does not contain the adb executable. I added ${ANDROID_HOME}/platform-tools to my path, because that folder does contain adb, and then react-native run-android worked on a device with usb.

For physical device in helps to me (in console): adb reverse tcp:8081 tcp:8081

Environment:

  • Ubuntu 15.10
  • Android studio 2.1.3
  • HTC Desire 626G ( Android 6.0.1 )

p.s app build with android studio

any feasible solution?

react-native start && react-native run-android is not working for me.

I got same error both android device and emulator

I’m having the same error and solve it by running solution that i found here http://stackoverflow.com/a/38874952/2840870

First I clean gradle by running

(cd android/ && gradlew clean)

Then start to bundle android by running:

node node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/

After that I run the script to make android build by running:

(cd android/ && gradlew assembleDebug)

And last I start to run my project by running react-native run-android This error was solved now.

(Note: Since I’m using windows, I run this solution first on ming and the error is still exist and it does only create one bundle file under <root>/android/app/build/intermediates/assets/debug then I try to do this same solution in ming with Run as Administrator and it was able to create 2 bundle file under the same path)

(Note 2: I was able to fix this problem and display the main view of my project but still having issue on cmd which I think a separate error)

ERROR  UNKNOWN: unknown error, lstat 'c:\react-apps\qt-mobile-app\node_modules\.bin\JSONStream'
{"errno":-4094,"code":"UNKNOWN","syscall":"lstat","path":"c:\\react-apps\\qt-mobile-app\\node_modules\\.bin\\JSONStream"}
Error: UNKNOWN: unknown error, lstat 'c:\react-apps\qt-mobile-app\node_modules\.bin\JSONStream'
    at Error (native)

@markortiz you saved my day. Thanks!! $ adb reverse tcp:8081 tcp:8081

@ryanhomer saved my life. thanks

@ryanhomer thanks i also had included that Debug thing and I could not load the developer menu anymore, that’s great ! 🙌

How can we run app on android v4 devices 😦 i’m still getting this error

@Vadorequest solution just worked well. But I must install ‘watchman’ and change the target sdk to 24 (instead 23)

I have had the same problem when trying to make index.js as the entry point (index.ios.js and index.android.js was just “require(‘./index’)”).

@sumit6b Thanks, your solutions works for me.

react-native start tells you what’s wrong. In my case, there were other processes listening on port 8081. Solved it by getting them:

lsof -n -i4TCP:8081

and then killing them’all.