How to build an apk with React Native
For the last couple of days , I am trying to build an apk with this new React Native in order to show the app to other people that I created with this new technology.
The official react documentation states how I should build an signed apk. At first I thought it will be a pain in the ass to build a signed apk. So I go for building an unsigned apk in order to bypass the process of generating a key or keystore or stuffs like that. As a result I was able to build an apk which is not installable on android phone. Every time I try to install the apk , "This app can not be installed" was smiling at me. I scratched my head trying to figure out what was going on, then I came across to android's official documentation about signing your apk. It clearly states that you must have your apk signed either in debug mode or in release mode in order to install the apk on the device. Here's what this documentation says,
"Android requires that all apps be digitally signed with a certificate before they can be installed. Android uses this certificate to identify the author of an app, and the certificate does not need to be signed by a certificate authority. Android apps often use self-signed certificates."
Here's what another part of documentation says,
"By default, there are two build types to build your application using the Gradle build settings: one for debugging your application —debug — and one for building your final package for release — release mode. Regardless of which build type your modules use, the app must be signed before it can install on an emulator or device—with a debug key when building in debug mode and with your own private key when building in release mode."
So you can see it clears some confusion going inside my head about signing the app. In this post I am gonna guide you through the whole process of building an apk with react native and I also assume that you had already created a demo project with react native for building the apk. Now lets get started.
I am going to use a mix of command line and android-studio because it is easier for me to build that way. Also I am using Ubuntu OS for this task. So you are going to need android-studio for the build process, if you didn't have that get it immediately.
Actually the process is quite simple. There are five basic steps for building the apk. They are
1. Store bundle javascript
2. Fetch the bundled javascript from React Native Packager
3. Generate a signing key
4. Generate the signed apk
5. Install release apk on device
At first, go to your root project folder from command line and run the following commands,
$ mkdir -p android/app/src/main/assets
$ curl "localhost:8081/index.android.bundle?platform=android&dev=false&minify=true" -o "android/app/src/main/assets/index.android.bundle"
Whoa, what's going on here? First we are creating an assets/ directory to store our bundled Javascript. Then we are fetching the bundled javascript from the React Native Packager via a curl command.
Now open your android studio and open the android folder of your root project directory in android studio. It may take some time if you are doing it for the first time. Now follow the following steps.
1.On the menu bar click Build-> Generate signed APK
2.On the Generate signed APK wizard window click create new to create a new keystore
3.On the new keystore window provide the required information as shown below and hit OK
NB: you can enter any arbitrary name with an extension of .jks in the keystore path. Just remember where you store your keystore for later use.
4. On the Generate Signed APK wizard window, select the keystore you just created , a private key and enter passwords for both. It may be already there but in case it's not there just add those passwords. Then click Next
5. On the next window , select a destination for the signed APK(s), select the build type, (if applicable) choose the product flavour(s), and click Finish.
And we are done. You can find the apk in the destination you selected stated as release apk. Transfer this apk on your device and install it or use command line to install the apk. It's up to you.
Simple huh, yes it is. Well see you guys next time with other kinds of problems. Till then asastalavista babes.
The official react documentation states how I should build an signed apk. At first I thought it will be a pain in the ass to build a signed apk. So I go for building an unsigned apk in order to bypass the process of generating a key or keystore or stuffs like that. As a result I was able to build an apk which is not installable on android phone. Every time I try to install the apk , "This app can not be installed" was smiling at me. I scratched my head trying to figure out what was going on, then I came across to android's official documentation about signing your apk. It clearly states that you must have your apk signed either in debug mode or in release mode in order to install the apk on the device. Here's what this documentation says,
"Android requires that all apps be digitally signed with a certificate before they can be installed. Android uses this certificate to identify the author of an app, and the certificate does not need to be signed by a certificate authority. Android apps often use self-signed certificates."
Here's what another part of documentation says,
"By default, there are two build types to build your application using the Gradle build settings: one for debugging your application —debug — and one for building your final package for release — release mode. Regardless of which build type your modules use, the app must be signed before it can install on an emulator or device—with a debug key when building in debug mode and with your own private key when building in release mode."
So you can see it clears some confusion going inside my head about signing the app. In this post I am gonna guide you through the whole process of building an apk with react native and I also assume that you had already created a demo project with react native for building the apk. Now lets get started.
I am going to use a mix of command line and android-studio because it is easier for me to build that way. Also I am using Ubuntu OS for this task. So you are going to need android-studio for the build process, if you didn't have that get it immediately.
Actually the process is quite simple. There are five basic steps for building the apk. They are
1. Store bundle javascript
2. Fetch the bundled javascript from React Native Packager
3. Generate a signing key
4. Generate the signed apk
5. Install release apk on device
At first, go to your root project folder from command line and run the following commands,
$ mkdir -p android/app/src/main/assets
$ curl "localhost:8081/index.android.bundle?platform=android&dev=false&minify=true" -o "android/app/src/main/assets/index.android.bundle"
Whoa, what's going on here? First we are creating an assets/ directory to store our bundled Javascript. Then we are fetching the bundled javascript from the React Native Packager via a curl command.
Now open your android studio and open the android folder of your root project directory in android studio. It may take some time if you are doing it for the first time. Now follow the following steps.
1.On the menu bar click Build-> Generate signed APK
2.On the Generate signed APK wizard window click create new to create a new keystore
3.On the new keystore window provide the required information as shown below and hit OK
NB: you can enter any arbitrary name with an extension of .jks in the keystore path. Just remember where you store your keystore for later use.
4. On the Generate Signed APK wizard window, select the keystore you just created , a private key and enter passwords for both. It may be already there but in case it's not there just add those passwords. Then click Next
5. On the next window , select a destination for the signed APK(s), select the build type, (if applicable) choose the product flavour(s), and click Finish.
And we are done. You can find the apk in the destination you selected stated as release apk. Transfer this apk on your device and install it or use command line to install the apk. It's up to you.
Simple huh, yes it is. Well see you guys next time with other kinds of problems. Till then asastalavista babes.
very helpful, Thanks!
ReplyDeleteGlad to hear that you find this post helpful.
DeleteNice blog post, the content is good and very informative.
ReplyDeleteBest Regards,
ReactJS Online Training in India
ReactJS Training in Hyderabad
ReactJS Online Training in Hyderabad
ReactJS Online Training
Learn ReactJS Online
ReactJS Training
ReactJS Online Course
React JS Online Training
Glad to hear that it helps you.
Delete
ReplyDeleteCan we generate apk from cmd prompt, without using android studio ??
Of course you can. In that case, hopefully you will gain in depth knowledge of react native's apk building process. Please read out react native's official documentation for this purpose.
DeleteIn my personal opinion I prefer to handle the build process graphically then with cmd.
pls i need the command for window
ReplyDelete