Web Development: Create Your First React Native Android App

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:

import * as React from 'react';
import {Text, View, Stylesheet} from 'react-native';

const ExampleScreen = (props) {

  return (

    <View style = {styles.containerStyling}>
    <Text style = {styles.textStyling}> Hello world!</Text>
    </View>
    );
}

const styles = Stylesheet.create({
  containerStyling:{
    background: '#0000FF'
  },
  textStyling :{
    marginBottom :20,
    color:'#FFF'
  }
});

export default ExampleScreen

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:

Expo CLI
React Native CLI

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, 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 for professional app developers.

For this tutorial, we'll use Expo since that is 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, 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:

NodeJS 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 nodejs.org and download the latest version of Node. Node is available for Windows, Mac OS, 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:

node -v

This command will display the installed Node version.

Install Expo Client

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

 npm install expo-cli --global

For macOS and Linux users, ensure you use sudo.

sudo  npm install expo-cli --global

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:

expo init tasklist

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.

expo init tasklist-app
? Choose a template: expo-template-blank

📦 Using npm to install packages. You can pass --yarn to use Yarn instead.

✔ Downloaded and extracted project files.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd tasklist-app
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web

Navigate to the project folder and run the following command:

cd tasklist-app
npm start

npm start will start the Expo dev tools and open a new tab in your browse 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 process usually takes a couple of minutes. When the process is completed, 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 <Text> and <View> as opposed to standard HTML components, like <div>, and <p>. The <View> component is the most fundamental component in React Native and is used for grouping other child components—like <div> in HTML. The <Text> component is used to display text content on the screen—like <p> in HTML.

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.

import { StatusBar } from 'expo-status-bar';
import React , {useState} from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {

  return (
    <View style= {styles.container}>
      <View style = {styles.inputContainer}>
        <TextInput
          placeholder = "Task List"
          style = {styles.input}
        />
        <Button title = "+"/> 
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input :{
    borderColor:"black", 
    borderWidth:1 , 
    padding :20,
  },
  inputContainer :{
    flexDirection :'row', 
    justifyContent :'space-between', 
    alignContent:'center',
    bottom:20
  },
});

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:

const [newTask, setNewTask] = useState('');

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:

  const taskInputHandler = (enteredText) => {
    setNewTask(enteredText);
  };

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

   <TextInput
      placeholder = "Task List"
      style = {styles.input}
      onChangeText = {taskInputHandler}
      value = {newTask}
    />

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:

  const [appTasks, appTask] = useState([]);

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

 const addTaskHandler = () =>{
    appTask(currentTask => [...currentTask, newTask]);
    console.log(newTask);
  };

And register that event handler with the <Button> component:

  <Button title = "+"
      onPress = {addTaskHandler}
  />

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.

    <View>
      {appTasks.map((task) => <Text>{task}</Text>)}
    </View>

Completed Source Code for App.js

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

 import { StatusBar } from 'expo-status-bar';
import React , {useState} from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default function App() {

  const [newTask, setnewTask] = useState('');

  const [appTasks, appTask] = useState([]);

  const taskInputHandler = (enteredText) => {
    setnewTask(enteredText);
  };

  const addTaskHandler = () =>{
    appTask(currentTask => [...currentTask, newTask]);
    console.log(newTask);
  };

  return (
    <View style= {styles.container}>
      
      <View style = {styles.inputContainer}>
      
        <TextInput
          placeholder = "Task List"
          style = {styles.input}
          onChangeText = {taskInputHandler}
          value = {newTask}
        />
      
        <Button title = "+"
          onPress = {addTaskHandler}
        /> 
      </View>
      <View>
        {appTasks.map((task) => <Text>{task}</Text>)}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input :{
    borderColor:"black", 
    borderWidth:1 , 
    padding :20,
    
  },
  inputContainer :{
    flexDirection :'row', 
    justifyContent :'space-between', 
    alignContent:'center,
    bottom:20
  },
});

The final product of the app is shown below.

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.