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
https://i.stack.imgur.com/B2r4Q.png
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?
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/
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 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
index.android.bundle
is really important for not using development server in host.
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/
$ 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
--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.
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
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.
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.
bundleInDebug
. That's the right way to go. Using react-native bundle
makes no sense when there are Gradle scripts taking care of everyghing.
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:
In your react native project go to /android/app/src/main create a folder assets edit android > app > build.gradle
project.ext.react = [
...
bundleInDebug: true, // add this line
]
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
Now, go into the android folder: cd android 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.
There are two extensions you can use for this. This is added to react-native for setting these:
disableDevInDebug: true: Disables dev server in debug buildType 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
]
devDisabledInDev
and bundleInDebug
should be set to true!
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
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
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:
Uninstall the latest compiled version of your app installed you have on your device 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 run cd android/ && ./gradlew assembleDebug Get your app-debug.apk in folder android/app/build/outputs/apk/debug
good luck!
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.
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
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
I found a solution changing buildTypes like this:
buildTypes {
release {
signingConfig signingConfigs.release
}
}
Add devDisabledInDebug: true
to project.ext.react
in build.gradle file.
Generate debug APK without dev-server
If you want to generate a debug APK (for testing purposes) that can run without the development server.
In your react native project go to /android/app/src/main create a folder assets edit android > app > build.gradle
universalApk true // If true, also generate a universal APK
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
Now, go into the android folder: cd android 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'
In 2021
Following Aditya Singh's answer, the generated (unsigned) apk would not install on my phone. I had to generate a signed apk using the instructions here.
The following worked for me:
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Place the my-release-key.keystore file under the android/app directory in your project folder. Then edit the file ~/.gradle/gradle.properties and add the following (replace **** with the correct keystore password, alias and key password)
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=****
MYAPP_RELEASE_KEY_PASSWORD=****
Then edit app/build.gradle and ensure the following are there (the sections with signingConfigs signingConfig may need to be added) :
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
Then run the command cd android && ./gradlew assembleRelease
,
For Windows 'cd android' and then run gradlew assembleRelease
command , and find your signed apk under android/app/build/outputs/apk/app-release.apk,
or android/app/build/outputs/apk/release/app-release.apk
Success story sharing
--assets-dest ./android/app/src/main/res/