218

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?

Pushpendra
  • 2,791
  • 4
  • 26
  • 49
kAy_4337270
  • 2,461
  • 3
  • 12
  • 16
  • 1
    Run 'react-native start', it will server your js bundle in development mode. The purpose is so you can edit js files on the fly. Use release mode doesnt need any server as it will include the necessary bundle with it. See answer below – kar Feb 11 '16 at 01:18

17 Answers17

317

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.

Zaw Hlaing Bwar
  • 97
  • 10
Dmitry Mugtasimov
  • 3,858
  • 2
  • 18
  • 26
  • 4
    In case someone is missing assets: this worked for me `--assets-dest ./android/app/src/main/res/` – Juan Solano Aug 10 '16 at 19:36
  • 1
    This works but I had to do the following on windows: 1. Instead of "./gradlew assembleDebug", i had to run "gradlew assembleDebug" (without ./) 2. Open cmd as administrator to run the last command. – Sydney Jul 24 '17 at 18:57
  • 14
    And if doing this gives me a big red screen when I start the app? (Note: I am running this directly after ejecting) – Simon Forsberg Aug 03 '17 at 19:01
  • 3
    How to take build for latest version because we do not hve index.android.js ? – Vivek Oct 11 '17 at 15:44
  • @VivekE Just use index.js – Shaked Sayag Oct 15 '17 at 14:21
  • 1
    I had to use `--entry-file App.js` to get it to run. **Other note:** if you get a red error page in the app, try to put `AppRegistry.registerComponent('AppName', () => RootElement); export default RootElement;` after (with appropriate import of AppRegistry) at the end of the file. Note that the export should follow the registration for it to work properly. – Francesco Pasa Dec 18 '17 at 18:27
  • 9
    People with latest version, please change entry point to --entry-file index.js, thanks. – Rishabh Bhatia Mar 02 '18 at 16:18
  • 6
    ***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*** for the new reactnative version where the index.js is unified for ios and android – ir2pid Jun 18 '18 at 08:40
  • For some reason I had to build my "gradlew" file with: **cd android**, **gradle wrapper**. However, after that, when I run **gradlew assembleRelease** I run into the following issue: **Task 'assembleRelease' not found in root project 'android'.** Any thoughts? Thanks! – GuiFGDeo Jun 20 '18 at 16:21
  • 1
    APK is generated but it does not let you install the apk on device. It says, 'APK not installed'. – Murtuza Aug 15 '18 at 18:44
  • undefined is not an object (evaluating 'r.default') i am getting this – Anuj Sep 20 '18 at 16:29
  • and in release apk i am getting An error occurred: 4001504: Invalid .apk file: couldn't retrieve the signature, the app must be signed to be able to install it on a device – Anuj Sep 20 '18 at 16:30
  • On RN v0.52.2 on linux, I needed to use a different bundle output and asset directory. Not sure why: `--bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res` <--- that worked for me – lance.dolan Oct 03 '18 at 16:31
  • run this command after the above process: react-native run-android --variant=debug. And then install the apk generated at /android/app/build/outputs/apk/debug on device. Reference: [https://stackoverflow.com/a/47618413/3301452] – Rakesh Gujari Oct 09 '18 at 18:12
  • after two steps when i run this command ./gradlew assembleDebug getting this error '.' is not recognized as an internal or external command, operable program or batch file. – rams Oct 17 '18 at 14:05
  • I was getting [duplicate-file-error](https://stackoverflow.com/questions/47084810/react-native-android-duplicate-file-error-when-generating-apk), but this did the trick (because it is using the build dir as output) – Top-Master Apr 27 '19 at 07:58
134

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

Castrohenge
  • 8,525
  • 5
  • 39
  • 66
Jeeva
  • 1,707
  • 1
  • 10
  • 7
  • @jeeva : how to connect application back to development server of react native ? – Mayur Baldha Sep 11 '19 at 13:44
  • 3
    The point which create `index.android.bundle` is really important for not using development server in host. – Lee Elton Jan 07 '20 at 07:16
  • @ Mayur Balha : You can connect back via usb or wifi (connected on same network). For WiFi connect back to server in your react app shake your mobile on emulator press Win+R then click dev settings Scroll down "Debug Server Host & Port" enter your ip address and port( on windows open cmd enter "ipconfig" or Mac open terminal enter "ifconfig" ) like 192.168.1.1:8080 then press ok again shake or Press Win+R for emulator press reload now you can see app connect back to developement ( It will only working for Debug not for Release Apk ). – Jeeva Jan 08 '20 at 10:13
  • It's working fine on RN 0.62.1... Should be the correct answear in most recent version! – Albert E. Souza Apr 07 '20 at 16:34
129

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/
Olcay Ertaş
  • 5,987
  • 8
  • 76
  • 112
m4r00p
  • 1,429
  • 1
  • 9
  • 2
  • 12
    And if doing this gives me a big red screen when I start the app? (Note: I am running this directly after ejecting) – Simon Forsberg Aug 03 '17 at 18:59
  • @SimonForsberg Did you find any solution? because i'm stuck at the same point. – Zuha Karim Apr 20 '18 at 05:30
  • @m4r00p: i did as you mentioned,but it gives me this error `Command bundle unrecognized. Make sure that you have run npm install and that you are inside a react-native project.` **note** i am building the app in jenkins – Kalanka Apr 25 '18 at 06:22
  • 2
    @SimonForsberg if you are using react ^0.5, change the entry point to index.js instead of App.js or index.android.js, `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` – d.bayo Apr 25 '18 at 18:08
  • 6
    Not working, this commands building an apk but that apk is not running without packager server. – Vishal Chhodwani Aug 10 '18 at 10:36
  • it is build apk but not able to install it – Anuj Oct 09 '18 at 12:16
  • after two steps when i run this command ./gradlew assembleDebug getting this error '.' is not recognized as an internal or external command, operable program or batch file. – rams Oct 17 '18 at 14:07
  • 3
    This is not going to work, because it requires a dev server – sheriff_paul May 15 '19 at 17:16
  • 2
    I'm having the same issue, when generating the debug-APK, I could install it, but I need the dev server, and when I use the release APK, I could not install it on my phone, I don't know what is wrong with it – aName Jul 11 '19 at 22:19
  • How to remove metrobundler dependancy for ios? – Fathima km Mar 12 '20 at 07:10
29

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/
Nhan Cao
  • 2,496
  • 1
  • 17
  • 13
  • can you please elaborate a bit and how does it solves the problem? – Priyal Aug 29 '17 at 05:00
  • I was getting error opening in in index.android.bundle , and solved it by your suggestion. Thank you... :) – zephyr Apr 19 '18 at 12:09
  • 6
    For me it is `$ 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 assembleDebug` – Arif Apr 28 '18 at 16:39
  • File not found: index.android.js in any of the project roots – Anuj Sep 20 '18 at 12:35
  • 1
    Note that `--entry-file index.android.js` needs to be replaced with `--entry-file index.js` for newer projects that have `index.js` instead of `index.android.js` in the root of their project directory. – olfek Sep 25 '18 at 12:13
  • @daka you are wrong, index.android.js is the correct one – sheriff_paul May 15 '19 at 17:17
17

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

Abdellah Stands with Palestine
  • 5,032
  • 1
  • 26
  • 36
  • 1
    the simplest answer was the most efficient all along, it worked flawless, spent days testing out different command lines and tons of js configurations, and everything was resumed in this – Nicolas Silva Oct 01 '19 at 19:25
12

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.

TheBaj
  • 1,091
  • 1
  • 10
  • 22
  • The suggested paths do not match with the resulting `react-native bundle` command. And none of the variants ends up with bundle being part of the APK with React Native 0.63. See the description in [bug reported to React Native CLI docs](https://github.com/react-native-community/cli/issues/1284). – Radek Matěj Oct 06 '20 at 18:52
  • But thanks for the suggestion with `bundleInDebug`. That's the right way to go. Using `react-native bundle` makes no sense when there are Gradle scripts taking care of everyghing. – Radek Matěj Oct 06 '20 at 18:54
  • The paths might have changed from react native 0.57 until now, so I don't know if the paths are still up to date. – TheBaj Oct 07 '20 at 22:10
  • Yes, [they've changed dramatically](https://gist.github.com/nikdo/0d294aeea72074e4dcab1660431a7285). Your answer is still the closest one to the optimal solution. I would just add a note that none of these paths is working anymore. – Radek Matěj Oct 09 '20 at 08:13
10

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.

Er Suman G
  • 581
  • 5
  • 12
  • 2
    For me after copying assets, I faced duplicate resources issue. – Muhammad Maqsood Jul 15 '21 at 08:36
  • 1
    I upvoted this answer as step 2 Adding bundleInDebug: true) is necessary to make it work without a server. Tested with react-native 0.66. You do end up with duplicate resources in android/app/build/generated/res/react/debug/ and android/app/src/main/res The solution is to delete the duplicates in the latter directory – mike Sep 10 '22 at 20:07
8

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
    bundleInDebug: true, // add bundle to dev apk
]
Edmundo Santos
  • 8,006
  • 3
  • 28
  • 38
Manish Sharma
  • 121
  • 2
  • 5
6

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!

HugoRMR
  • 142
  • 1
  • 3
  • 1
    Doesn't work!!!, it generate the debug APK, but the app still need the dev server – aName Jul 11 '19 at 21:56
  • This can't work in react-native 0.59.8, as gradle expects the bundle to be in `android/app/build/generated/assets/react/debug/index.android.js` and the assets to be in `android/app/build/generated/res/react/debug` as of react-native 0.57. – TheBaj Sep 10 '19 at 15:31
  • Works fine for react native 0.60 > – Moso Akinyemi Jul 09 '20 at 07:36
5

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

Dharam Mali
  • 907
  • 1
  • 11
  • 24
  • You can install/share app-release.apk to any device – Dharam Mali Jan 02 '17 at 07:16
  • 2
    Usually, the debug build has a different configuration than the release build (e.g. it uses a staging API). This doesn't help if you want a standalone APK that uses a different build configuration from the release – Josh Feb 27 '17 at 15:39
  • This APK is just for development/Testing purpose. – Dharam Mali Feb 28 '17 at 06:15
5

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

Nick
  • 138,499
  • 22
  • 57
  • 95
user3195905
  • 71
  • 1
  • 1
4

quite late for the party but none of the solutions at least on page 1 does not work for me. Thus I looked a bit deeper into the grade tasks registered by react;

just add bundleInDebug : true as shown in @Er Suman G's answer

run ./gradlew assembleDebug or gradle.bat assembleDebug based on your environment in your android folder.

This will generate the debuggable non server required app in android/app/build/outputs/apk/debug

Olgun Kaya
  • 2,519
  • 4
  • 32
  • 46
3

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
Shem Leong
  • 143
  • 1
  • 6
0

I found a solution changing buildTypes like this:

buildTypes {
  release {
    signingConfig signingConfigs.release
  }
}
sumit kumar pradhan
  • 614
  • 1
  • 6
  • 12
0

Add devDisabledInDebug: true to project.ext.react in build.gradle file.

Motasem Halawani
  • 156
  • 4
  • 12
0

Generate debug APK without dev-server

If you want to generate a debug APK (for testing purposes) that can run without the development server.

  1. In your react native project go to /android/app/src/main create a folder assets
  2. edit android > app > build.gradle
universalApk true  // If true, also generate a universal APK
  1. run this command at the root directory of your react native project
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
  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)

Just do this things.

and if you want to install app in device just run cmd

adb install 'path/add-debug.apk'
Jeremy White
  • 2,818
  • 6
  • 38
  • 74
user9088454
  • 1,076
  • 1
  • 15
  • 45
0

Happened to me as well, apparently i forgot to import the variable

Adri
  • 127
  • 4
  • 10