[android] Build and Install unsigned apk on device without the development server?

As I am new in react-native so if there is anything wrong in steps let me know.

I have build a react native android app using the command as per documentation

react-native android

while running on device the following command was used

react-native run-android

which gives me the output of 2 apk files in my projectfolder/android/app/build/outputs/apk

enter image description here

now when I use to install this apk after the installation it ask for an development server to connect to bundle the JS. But my requirement is that the user doesn't have to struggle with the development server just he needs to install the apk and everything is done.

Have gone through some stackoverflow Questions but not helpful to build unsigned apk which doesn't require development server.

Can you guys help me finding the way that how to build and unsigned apk in react native?

This question is related to android apk react-native

The answer is


React Version 0.62.1

In your root project directory

Make sure you have already directory android/app/src/main/assets/, if not create directory, after that create new file and save as index.android.bundle and put your file in like this android/app/src/main/assets/index.android.bundle

After that run this

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/

cd android && ./gradlew assembleDebug

Then you can get apk in app/build/outputs/apk/debug/app-debug.apk


With me, in the project directory run the following commands.

For react native old version (you will see index.android.js in root):

mkdir -p android/app/src/main/assets && rm -rf android/app/build && 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 && cd android && ./gradlew clean assembleRelease && cd ../

For react native new version (you just see index.js in root):

mkdir -p android/app/src/main/assets && rm -rf android/app/build && 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 && cd android && ./gradlew clean assembleRelease && cd ../

The apk file will be generated at:

  • Gradle < 3.0: android/app/build/outputs/apk/
  • Gradle 3.0+: android/app/build/outputs/apk/release/

Generate debug APK without dev-server

If you really want to generate a debug APK (for testing purpose) that can run without the development server, Congrats! here I am to help you. :)
Everyone is saying that we need to run two commands react-native bundle ... and then gradlew assembleDebug but the generated APK still doesnot work without development server. After many research & try I figured out that we need to change in the gradle file (as in step-2). Just follow these steps:

  1. In your react native project go to /android/app/src/main create a folder assets
  2. edit android > app > build.gradle
project.ext.react = [
    ...
    bundleInDebug: true, // add this line
]
  1. run this command at the root directory of your react native project
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
  1. Now, go into the android folder: cd android
  2. And, run this command: gradlew assembleDebug
    (if build failed, try building assembleDebug from android studio)

This will create app-debug.apk file in android/app/build/outputs/apk/debug directory, which you can install & run without dev-server.


As of react-native 0.57, none of the previously provided answers will work anymore, as the directories in which gradle expects to find the bundle and the assets have changed.

Simple way without react-native bundle

The simplest way to build a debug build is without using the react-native bundle command at all, but by simply modifying your app/build.gradle file.

Inside the project.ext.react map in the app/build.gradle file, add the bundleInDebug: true entry. If you want it to not be a --dev build (no warnings and minified bundle) then you should also add the devDisabledInDebug: true entry to the same map.

With react-native bundle

If for some reason you need to or want to use the react-native bundle command to create the bundle and then the ./gradlew assembleDebug to create the APK with the bundle and the assets you have to make sure to put the bundle and the assets in the correct paths, where gradle can find them.

As of react-native 0.57 those paths are android/app/build/generated/assets/react/debug/index.android.js for the bundle

and android/app/build/generated/res/react/debug for the assets. So the full commands for manually bundling and building the APK with the bundle and assets are:

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

and then

./gradlew assembleDebug

Bundle and assets path

Note that that paths where gradle looks for the bundle and the assets might be subject to change. To find out where those paths are, look at the react.gradle file in your node_modules/react-native directory. The lines starting with def jsBundleDir = and def resourcesDir = specify the directories where gradle looks for the bundle and the assets respectively.


I'm on react native 0.55.4, basically i had to bundle manually:

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

Then connect your device via usb, enable usb debugging. Verify the connected device with adb devices.

Lastly run react-native run-android which will install the debug apk on your phone and you can run it fine with the dev server

Note:

  • From 0.49.0, the entrypoint is a single index.js
  • gradlew assembleRelease only generates the release-unsigned apks which cannot be installed

You need to manually create the bundle for a debug build.

Bundle debug build:

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

#React-Native 0.49.0+
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

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

Then to build the APK's after bundling:

$ cd android
#Create debug build:
$ ./gradlew assembleDebug
#Create release build:
$ ./gradlew assembleRelease #Generated `apk` will be located at `android/app/build/outputs/apk`

P.S. Another approach might be to modify gradle scripts.


Please follow those steps.

Bundle your js:

if you have index.android.js in project root then run

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

if you have index.js in project root then run

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

Create debug apk:

cd android/
./gradlew assembleDebug

Then You can find your apk here:

cd app/build/outputs/apk/

I found a solution changing buildTypes like this:

buildTypes {
  release {
    signingConfig signingConfigs.release
  }
}

After you follow the first response, you can run your app using

react-native run-android --variant=debug

And your app will run without need for the packager


Just in case someone else is recently getting into this same issue, I'm using React Native 0.59.8 (tested with RN 0.60 as well) and I can confirm some of the other answers, here are the steps:

  1. Uninstall the latest compiled version of your app installed you have on your device

  2. Run 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

  3. run cd android/ && ./gradlew assembleDebug

  4. Get your app-debug.apk in folder android/app/build/outputs/apk/debug

good luck!


It can be possible to generate an unsigned apk version for testing purpose so you can run on your mobile.

Initially i got the red screen errors as most mentioned here. but i followed the same which was mentioned here and it worked for me.

On your console from working directory, run these four commands

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

gradlew assembleRelease

And then APK file will produce on : android\app\build\outputs\apk\debug\app-debug.apk


For Windows user if all steps followed properly from this: https://facebook.github.io/react-native/docs/signed-apk-android.html

You need to only run: gradlew assembleRelease

And your file will be:

  • app-release.apk
  • app-release-unaligned.apk

Location: E:\YourProjectName\android\app\build\outputs\apk


There are two extensions you can use for this. This is added to react-native for setting these:

  1. disableDevInDebug: true: Disables dev server in debug buildType
  2. bundleInDebug: true: Adds jsbundle to debug buildType.

So, your final project.ext.react in android/app/build.gradle should look like below

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
    devDisabledInDev: true, // Disable dev server in dev release
    bundleInDev: true, // add bundle to dev apk
]

Examples related to android

Under what circumstances can I call findViewById with an Options Menu / Action Bar item? How to implement a simple scenario the OO way My eclipse won't open, i download the bundle pack it keeps saying error log getting " (1) no such column: _id10 " error java doesn't run if structure inside of onclick listener Cannot retrieve string(s) from preferences (settings) strange error in my Animation Drawable how to put image in a bundle and pass it to another activity FragmentActivity to Fragment A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to apk

Application Installation Failed in Android Studio Difference between signature versions - V1 (Jar Signature) and V2 (Full APK Signature) while generating a signed APK in Android Studio? Session 'app': Error Installing APK Android Error Building Signed APK: keystore.jks not found for signing config 'externalOverride' Build and Install unsigned apk on device without the development server? The APK file does not exist on disk Android Studio: Application Installation Failed How to retrieve Key Alias and Key Password for signed APK in android studio(migrated from Eclipse) ADB Install Fails With INSTALL_FAILED_TEST_ONLY Upload failed You need to use a different version code for your APK because you already have one with version code 2

Examples related to react-native

How to resolve the error on 'react-native start' React Native Error: ENOSPC: System limit for number of file watchers reached How to update core-js to core-js@3 dependency? Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65 How can I force component to re-render with hooks in React? What is useState() in React? Getting all documents from one collection in Firestore ReactJS: Maximum update depth exceeded error React Native: JAVA_HOME is not set and no 'java' command could be found in your PATH