Home » Android » javascript – How can I generate an apk that can run without server with react-native?

javascript – How can I generate an apk that can run without server with react-native?

Posted by: admin March 10, 2020 Leave a comment

Questions:

I’ve built my app, I can run it on my local emulator (and also on my android device within the same network by changing debug server).

However, I want to build an APK that I can send to someone without access to the development server and I want them to be able to test application.

I see there is a section Using offline bundle on iOS section of the documentation. But I couldn’t figure out how to accomplish the same for android. Is this possible? If so, how?

UPDATE: On the answer to this question (Android failed to load JS bundle) it is said that offline bundle can be downloaded from development server. But when I obtain the bundle from development server the image files can’t be loaded.

How to&Answers:

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=****

If you’re using MacOS, you can store your password in the keychain using the instructions here instead of storing it in plaintext.

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

Answer:

You will have to create a key to sign the apk. Use below to create your key:

 keytool -genkey -v -keystore my-app-key.keystore -alias my-app-alias -keyalg RSA -keysize 2048 -validity 10000

Use a password when prompted

Once the key is generated, use it to generate the installable 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/

Generate the build using gradle

 cd android && ./gradlew assembleRelease

Upload the APK to your phone. The -r flag will replace the existing app (if it exists)

adb install -r ./app/build/outputs/apk/app-release-unsigned.apk

A more detailed description is mentioned here: https://facebook.github.io/react-native/docs/signed-apk-android.html

UPDATE: Based on comments by @shashuec and @Fallen

if you get error

ENOENT: no such file or directory, open ‘android/app/src/main/assets/index.android.bundle’

run mkdir android/app/src/main/assets

Answer:

Run this command:

react-native run-android --variant=release

Note that --variant=release is only available if you’ve set up signing
with cd android && ./gradlew assembleRelease.

Answer:

You should just use android studio for this process. It is just simpler. But first run this command in your react native app directory:

For Newer version of react-native(e.g. react native 0.49.0 & so on…)

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 Older Version of react-native (0.49.0 & below)

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/

Then Use android studio to open the ‘android’ folder in you react native app directory, it will ask to upgrade gradle and some other stuff. go to build-> Generate signed APK and follow the instructions from there. It’s really straight forward.

Answer:

for React Native 0.49 and over

you should go to project directory on terminal and run that command

1 - mkdir android/app/src/main/assets
2 - 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

if under 0.49

  1 - mkdir android/app/src/main/assets
  2 - 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

Then Use android studio to open the ‘android’ folder in you react native app directory, it will ask to upgrade gradle and some other stuff. go to build-> Generate signed APK and follow the instructions from there. That okey.

Answer:

If you get Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES].

I tried using @Aditya’s method of generating 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> 

The -d flag just tells adb to install on the usb device attached, in the event that you have an emulator running as well. If you want to install on whatever an emulator, drop the -d flag.

4) Profit!

Answer:

If any one want to build without playstore keys then this command would be very helpful.

# react-native run-android --variant=release

After build complete you can find the apk in release build file.

Answer:

Try below, it will generate an app-debug.apk on your root/android/app/build/outputs/apk/debug folder

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

then go to android folder and run

./gradlew assembleDebug

Answer:

Go to project directory and run the command:

cd android && ./gradlew assembleRelease

Answer:

I have another solution:-
Generating a signing key
You can generate a private signing key using keytool. On Windows keytool must be run from C:\Program Files\Java\jdkx.x.x_x\bin.

$ 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.

Edit the file android/app/build.gradle in your project folder and add the signing config,

android {
....
signingConfigs { 
  release { 

      storeFile file('my-release-key.keystore') 
      storePassword 'yourpassword' 
      keyAlias 'my-key-alias' 
      keyPassword 'yourpassword' 

  } 
}}}


buildTypes {release {signingConfig signingConfigs.release}}

and run

gradlew assembleRelease

This will give you two files at android\app\build\outputs\apk
app-release.apk and app-release-unsigned.apk
now install the app-release.apk in your android device.

Answer:

If you get an error involving index.android.js. This is because you are using the new React-native version (I am using 0.55.4)
Just replace the “index.android.js” to “index.js”

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/

Answer:

For latest react native versions to bundle the project

Android

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/

iOS

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

Answer:

Hopefully it will help new beginners

Official doc here

If you dont have keystore than use before command else skip

Generating a signing key / Keystore file
You can generate a private signing key using keytool. On Windows keytool must be run from C:\Program Files\Java\jdkx.x.x_x\bin.

$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

you will get a file like my-release-key.keystore

Setting up gradle variables
Place the my-release-key.keystore file under the android/app directory in your project folder.
Edit the file android/gradle.properties and add the following (replace ***** with the correct keystore password, alias and key password),
enableAapt2 set false is workaround , as android gradle version 3.0 problem

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

android.enableAapt2=false

then add these app/buid.gradle (app)

below default config

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
            }
        }

and Inside Build type release { }

 signingConfig signingConfigs.release

then simply run this command in android studio terminal
Below commands will automate above all answers

if windows

cd android
gradlew assembleRelease

if linux / mac

$ cd android
$ ./gradlew assembleRelease

if you got any error delete all build folder and run command

gradlew clean

than again

gradlew assembleRelease

Answer:

The GUI way in Android Studio

  • Have the Android app part of the React Native app open in Android Studio (this just means opening the android folder of your react-native project with Android Studio)
  • Go to the “Build” tab at the top
  • Go down to “Build Bundle(s) / APK(s)”
  • Then select “Build APK(s)”
  • This will walk you through a process of locating your keys to sign the APK or creating your keys if you don’t have them already which is all very straightforward. If you’re just practicing, you can generate these keys and save them to your desktop.
  • Once that process is complete and if the build was successful, there will be a popup down below in Android Studio. Click the link within it that says “locate” (the APK)
  • That will take you to the apk file, move that over to your android device. Then navigate to that file on the Android device and install it.

Answer:

Using android studio to generate signed apk for react’s android project is also a good and easy option , open react’s android project in android studio and generate keystroke and signed apk.

Answer:

Refer the react-native official documentation on Generating Signed APK

React-Native Generating Signed APK