Compile react native android

Building React Native apps for Android

App Center can build React Native apps using React Native version 0.34 or newer.

To start building your first React Native Android app, you must:

1. Connect to your repository service account (GitHub, Bitbucket, VSTS, Azure DevOps).
2. Select a repository and a branch where your app lives.
3. Choose the project’s package.json that you want to build.
4. Set up your first build.

For the app to run on a real device, the build must be code signed with a valid certificate.

1. Linking your repository

If you haven’t previously connected to your repository service account, you must do this first. Once your account is connected, select the repository where your React Native project is located. You must have admin and pull permissions to set up a build for a repository.

2. Selecting a branch

After selecting a repository, select the branch you want to build. By default, App Center lists all active branches.

3. Setting up your first build

Before your first build, you must configure the React Native project.

3.1. Project

Select your project’s package.json . App Center will automatically extract information from its associated build.gradle (app level) file, including dependencies, build tools version, build types, and product flavors.

For best performance, the analysis is currently limited to four directory levels including the root of your repository.

3.2. Build variant

The available build variants will populate from the Build Types and Product Flavors specified in the project’s build.gradle (app level) file. Select which build variant should be built.

App Center Build supports finding build variants as the combination of a Build Type (debug, release or custom defined) and one optional Product Flavor. Detecting combinations of multiple product flavors aren’t supported at this time.

3.3. Node.js version

Select the Node.js version to use for the build Read more about how to select Node.js version

3.4. Build triggers

By default, a new build is triggered every time a developer pushes to a configured branch. This is referred to as «Continuous Integration». If you prefer to trigger a new build manually, you can change this setting in the configuration pane.

3.5. Build Android App Bundle (.aab)

The Android App Bundle is a distribution format that can be uploaded to the Play Store. It’s used to generate optimized APKs for specific devices. You can find out more about the Android App Bundle in the official Android documentation, which also helps you understand whether you want to build a bundle along with your regular .apk.

Toggle on the option for Android App Bundle to produce an .aab in addition to the .apk . If the build.gradle (app level) file contains the android.bundle block, this option will automatically be toggled on.

3.6. Increment version number

When enabled, the version code in the AndroidManifest.xml of your app automatically increments for each build. The change happens during the actual build and won’t be committed to your repository.

3.7. Launch your successful build on a real device

Use the newly produced APK file to test if your app starts on a real device. Launch tests will add approximately 10 more minutes to the total build time. Read more about how to configure launch tests.

3.8. Code signing

A successful build will produce an .apk file and an additional .aab file if enabled. To release the build to the Play Store, it must be signed with a valid certificate stored in a keystore. To sign the builds produced from a branch, enable code signing in the configuration pane, upload your keystore to your repository, and provide the relevant values in the configuration pane. You can read more about Android code signing App Center’s Android code signing documentation. The .aab will be signed using the same credentials as the .apk .

3.9. Distribute the build

You can configure each successful build from a branch to be distributed to a previously created distribution group or a store destination. You can add a new distribution group or configure a store connection from within the Distribute service. There’s always a default distribution group called «Collaborators» that includes all the users who have access to the app.

If distributing to the Google Play Store, an Android App Bundle ( .aab ) is preferred and will be distributed if enabled. For App Center distribution groups and Intune store destinations, a regular .apk will be used even if an .aab is also generated.

4. Build results

After a build triggers, the build will be in one of the following states:

• queued — the build is in a queue waiting for resources to be freed up
• building — the build is running the predefined tasks
• succeeded — the build is completed and it’s succeeded
• failed — the build has completed but it’s failed; you can troubleshoot what went wrong by downloading and inspecting the build log
• canceled — the build has been canceled by a user action or it’s timed out

4.1. Build logs

For a completed build (succeeded or failed), download the logs to understand more about how the build went. App Center provides an archive with the following files:

The build step-specific logs (located in the build/ directory of the archive) are helpful for troubleshooting and understanding in what step and why the build failed.

4.2. The app (.apk)

The .apk file is an Android application packaged file that stores the Android app. If the build has been correctly signed, the app can be installed on a real device and deployed to the Play Store. If the build hasn’t been signed, the app can run on an emulator or be used for other purposes.

5. Supported versions and requirements

The minimum version supported to build Android apps is 5.0 (API level 21). Android apps can have a lower minimum API level required to run, but must target at least API level 21.

6. Build tips

6.1. Yarn

The Yarn package manager is a faster, more deterministic replacement for npm . If a yarn.lock file is present in your repository next to package.json , then App Center will use Yarn, doing yarn install at the start of the build. Otherwise, it will do npm install .

6.2. Custom build scripts

There are several options for running scripts before App Center’s default build commands are executed.

Create a postinstall script in your project’s package.json file. This script will automatically execute after your dependencies are installed.

Write a shell script using App Center’s custom build scripts functionality.

6.3. Building multiple APKs

For React Native on Android, universal APK generation is disabled by default. If your app configuration is set up to build multiple APKs, for example different ones per CPU architecture or screen configuration, you need to make sure a universal APK is built as well. App Center’s build system works with one main APK file and will ignore all APKs specific to a certain CPU/ABI or screen density.

To learn more about APK splits and how to build a universal APK, read the corresponding Android developer guide. Consequently, make sure that universalApk is set to true for your React Native build configuration.

Источник

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:

Источник