Build android app react native

Publishing to Google Play Store

Android requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via Google Play store it needs to be signed with a release key that then needs to be used for all future updates. Since 2017 it is possible for Google Play to manage signing releases automatically thanks to App Signing by Google Play functionality. However, before your application binary is uploaded to Google Play it needs to be signed with an upload key. The Signing Your Applications page on Android Developers documentation describes the topic in detail. This guide covers the process in brief, as well as lists the steps required to package the JavaScript bundle.

Generating an upload 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 .

This command prompts you for passwords for the keystore and key and for the Distinguished Name fields for your key. It then generates the keystore as a file called my-upload-key.keystore .

The keystore contains a single key, valid for 10000 days. The alias is a name that you will use later when signing your app, so remember to take note of the alias.

On Mac, if you’re not sure where your JDK bin folder is, then perform the following command to find it:

It will output the directory of the JDK, which will look something like this:

Navigate to that directory by using the command cd /your/jdk/path and use the keytool command with sudo permission as shown below.

Note: Remember to keep the keystore file private. In case you’ve lost upload key or it’s been compromised you should follow these instructions.

Setting up Gradle variables​

1. Place the my-upload-key.keystore file under the android/app directory in your project folder.
2. Edit the file

/.gradle/gradle.properties or android/gradle.properties , and add the following (replace ***** with the correct keystore password, alias and key password),

These are going to be global Gradle variables, which we can later use in our Gradle config to sign our app.

Note about using git: Saving the above Gradle variables in

/.gradle/gradle.properties instead of android/gradle.properties prevents them from being checked in to git. You may have to create the

/.gradle/gradle.properties file in your user’s home directory before you can add the variables.

Note about security: If you are not keen on storing your passwords in plaintext, and you are running macOS, you can also store your credentials in the Keychain Access app. Then you can skip the two last rows in

Adding signing config to your app’s Gradle config​

The last configuration step that needs to be done is to setup release builds to be signed using upload key. Edit the file android/app/build.gradle in your project folder, and add the signing config,

Generating the release AAB​

Run the following in a terminal:

Gradle’s bundleRelease will bundle all the JavaScript needed to run your app into the AAB (Android App Bundle). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at android/app/build.gradle to see how you can update it to reflect these changes.

Note: Make sure gradle.properties does not include org.gradle.configureondemand=true as that will make the release build skip bundling JS and assets into the app binary.

The generated AAB can be found under android/app/build/outputs/bundle/release/app.aab , and is ready to be uploaded to Google Play.

In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn’t use App Signing by Google Play, please check our migration section to learn how to perform that configuration change.

Testing the release build of your app​

Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using the following command in the project root:

Note that —variant release is only available if you’ve set up signing as described above.

You can terminate any running bundler instances, since all your framework and JavaScript code is bundled in the APK’s assets.

Publishing to other stores​

By default, the generated APK has the native code for both x86 and ARMv7a CPU architectures. This makes it easier to share APKs that run on almost all Android devices. However, this has the downside that there will be some unused native code on any device, leading to unnecessarily bigger APKs.

You can create an APK for each CPU by changing the following line in android/app/build.gradle:

Upload both these files to markets which support device targeting, such as Google Play and Amazon AppStore, and the users will automatically get the appropriate APK. If you want to upload to other markets, such as APKFiles, which do not support multiple APKs for a single app, change the following line as well to create the default universal APK with binaries for both CPUs.

Enabling Proguard to reduce the size of the APK (optional)​

Proguard is a tool that can slightly reduce the size of the APK. It does this by stripping parts of the React Native Java bytecode (and its dependencies) that your app is not using.

IMPORTANT: Make sure to thoroughly test your app if you’ve enabled Proguard. Proguard often requires configuration specific to each native library you’re using. See app/proguard-rules.pro .

To enable Proguard, edit android/app/build.gradle :

Migrating old Android React Native apps to use App Signing by Google Play​

If you are migrating from previous version of React Native chances are your app does not use App Signing by Google Play feature. We recommend you enable that in order to take advantage from things like automatic app splitting. In order to migrate from the old way of signing you need to start by generating new upload key and then replacing release signing config in android/app/build.gradle to use the upload key instead of the release one (see section about adding signing config to gradle). Once that’s done you should follow the instructions from Google Play Help website in order to send your original release key to Google Play.

Default Permissions​

By default, INTERNET permission is added to your Android app as pretty much all apps use it. SYSTEM_ALERT_WINDOW permission is added to your Android APK in debug mode but it will be removed in production.

Источник

React Native Generate APK — Debug and Release APK

An Android Package Kit (APK) is the package file format used by the Android OS for distribution and installation of mobile apps. It is similar to the .exe file you have on Windows OS, a .apk file is for android.

Debug APK

What can I use it for?

A debug .apk file will allow you to install and test your app before publishing to app stores. Mind you, this is not yet ready for publishing, and there are quite a few things you’ll need to do to before you can publish. Nevertheless, it’ll be useful for initial distribution and testing.

You’ll need to enable debugging options on your phone to run this apk.

Prerequisite:

How to generate one in 3 steps?

Step 1: Go to the root of the project in the terminal and run the below command:

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

Step 2: Go to android directory:

Step 3: Now in this android folder, run this command

There! you’ll find the apk file in the following path:
yourProject/android/app/build/outputs/apk/debug/app-debug.apk

Release APK

You will need a Java generated signing key which is a keystore file used to generate a React Native executable binary for Android. You can create one using the keytool in the terminal with the following command

keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

Once you run the keytool utility, you’ll be prompted to type in a password. * Make sure you remember the password

You can change your_key_name with any name you want, as well as your_key_alias. This key uses key-size 2048, instead of default 1024 for security reason.

Step 2. Adding Keystore to your project

Firstly, you need to copy the file your_key_name.keystore and paste it under the android/app directory in your React Native project folder.

mv my-release-key.keystore /android/app

You need to open your android\app\build.gradle file and add the keystore configuration. There are two ways of configuring the project with keystore. First, the common and unsecured way:

This is not a good security practice since you store the password in plain text. Instead of storing your keystore password in .gradle file, you can stipulate the build process to prompt you for these passwords if you are building from the command line.

To prompt for password with the Gradle build file, change the above config as:

Place your terminal directory to android using:
cd android

For Windows,
gradlew assembleRelease

For Linux and Mac OSX:
./gradlew assembleRelease

Источник

Create Your First React Native Android App

React Native is an open-source mobile application framework created by Facebook. You can use it to develop applications for Android and iOS devices with a single codebase. React Native powers some of the world’s most popular apps, such as Instagram and Facebook, and in this post I’ll show you how to create your first React Native app for Android.

Example of React Native Code

The React Native code for a typical mobile app screen looks like this:

If you look closely, you’ll see that React Native uses a combination of JavaScript, HTML-like markup, and CSS. This code snippet defines a screen with a text display and styling.

React Native Development Environments: Expo vs. React Native CLI

There are two ways to create a React Native app:

I’ll talk about the pros and cons of each below.

Expo CLI

Expo is an open-source framework and a platform for universal React applications that gives a managed app development workflow. It is a set of tools and services built around React Native and native platforms that help develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript or TypeScript codebase.

Expo takes away all the complexities associated with building React Native apps. Some of the features of the Expo CLI include:

• Universal APIs which provide access to features like camera, maps, notifications, sensors, haptics, and much more.
• A cloud-based build service that gives you app-store-ready binaries and handles certificates.
• Over-the-air updates which let you update your app at any time without the hassle and delays of submitting to the store.

React Native CLI

The React Native CLI is a more basic and bare-metal development environment. The good thing is that it makes it possible to build app binaries on your own machine, without relying on a cloud service. On the other hand, the setup is much more complicated—to build apps for Android, you’ll need to install Android Studio and configure many features before getting started. This process can be a bit complex, but the React Native CLI environment is more suited to professional app developers.

For this tutorial, we’ll use Expo since that’s the easiest way to get started building React Native apps.

How Expo Works

To use Expo, you first need to install the Expo Client app, which is available on the Play Store (a version is also available on the iOS App Store). The Expo Client app will allow you to run the app for testing purposes in real time.

You can code your React Native app on your own computer with your favorite programming text editor, and then use the Expo CLI to test or publish your app. Behind the scenes, Expo will package your React Native code and make it available to the Expo Client app on your device. You can also use the Expo CLI to publish your app and make it available to anyone with the Expo Client, or to build a standalone version of your app that can be uploaded to the app store and run without installing the Expo Client.

Creating an App With Expo

In this tutorial, we will use the Expo CLI to create our app.

Prerequisites

To create a React Native app with Expo, you need to meet the following:

• Node.js version 12 LTS or higher and Git on your computer
• an Android device with Lollipop (Android 5) or higher
• the Expo client application installed on your Android device (download the Expo client for Android from the Play Store)
• a basic understanding of ReactJS or JavaScript

Also, note that your development computer and phone must be connected to the same wireless network.

Download Node.js

Visit the Node.js website and download the latest version of Node. Node is available for Windows, macOS, and Linux operating systems. Simply choose your operating system and install it according to the instructions available on the site.

To check if Node.js is installed, open a terminal window and type:

This command will display the installed Node version.

Install Expo Client

After you’ve installed Node, you will also need to install the Expo CLI client. Simply run the following command:

For macOS and Linux users, ensure you use sudo .

Ignore any warnings or errors which occur in the process of installing the Expo CLI. After a successful installation, you should see the message below.

Create a To-Do List App With React Native

We will create a simple to-do list app that lets you input a list of tasks you need to get done and displays them on the screen.

Create a New Project With Expo

To get started, run the following Expo CLI command to create a new project:

tasklist is the name of the project. You will be prompted to choose a template for your project. For now, choose the blank template, which gives you minimal dependencies.

The expo init command creates a project folder and installs all the dependencies required by the React Native app.

Navigate to the project folder and run the following command:

npm start will start the Expo dev tools and open a new tab in your browser that looks like this:

This window allows you to run your app on a simulator or a connected device.

Connect a Device

Now, open the Expo client app on your physical Android device and select the Scan QR Code option, as shown below.

Next, go back to the Expo dev window, scan the bar code, and wait for the JavaScript bundle build process to complete. This usually takes a couple of minutes. When the process is complete, the application should be running on your phone!

Project Structure

Now that your development environment is ready, you can edit the code for the project using your preferred code editor. The project folder looks something like this:

• assets: holds the images for the app
• node_modules: contains all the dependencies for the project
• App.js: holds the code which renders the UI and is an essential file

App.js is open in the screenshot above. Let’s take a closer look. First, we import React from react . We then import the Text and View components from react-native . We also import Stylesheet , which helps with styling.

React Native comes with built-in components such as

and as opposed to standard HTML components, like

. The component is the most fundamental component in React Native and is used for grouping other child components—like

component is used to display text content on the screen—like

In the boilerplate version of App.js that Expo creates, there is a simple view with a text component and a status bar. This view is returned from the App() function. The styles constant contains some basic CSS to style the view.

Next, let’s add some new components and styles to the app!

Create the App UI

Open the App.js file and enter the following code.

The code above adds a simple text input and a button for adding new tasks. We use CSS flexbox styling to position the components next to each other.

Add Event Handling

To get the user input, we first import the useState() function from react and use it to update the state of the newTask() and setnewTask() functions. Since the user hasn’t typed anything yet, the initial state will be empty. Add the following code to the top of the App() function, just above return :

We then define the taskInputHandler , which listens to the change in the input and updates the content of the setNewTask() function. Add these lines to the App() function next:

Now we register this input handler with the TextInput component. Update your TextInput component so it looks like the following.

Now we need to handle button presses. When the user presses the + button, we want to add the new task to a list.

First, we’ll define our state for the list of tasks:

Next, we define an addTaskHandler function to add the new task (found in the newTask state) to the list.

And register that event handler with the component:

Finally, we’ll add a new view to show all the tasks in the list we’ve created. This goes just after the input container view, but still inside the main container view.

Complete Source Code for App.js

The full code for App.js is shown below. Compare it to what you have.

Conclusion

In this tutorial, you learned how to create a React Native app with Expo.

React Native is a great framework and a popular platform for both developers and businesses. Apps created with React Native are guaranteed to work smoothly on any platform or system. React Native also saves development work by letting you code your app once and run it on any mobile platform.

Premium Mobile App Templates From CodeCanyon

CodeCanyon is an online marketplace that has hundreds of mobile app templates—for Android, iOS, React Native, and Ionic. You can save days, even months, of effort by using one of them.

Whether you’re just getting started with React Native, or are a seasoned developer, a React Native app template is a great way to save time and effort on your next app project.

If you have trouble deciding which template on CodeCanyon is right for you, these articles should help:

Источник