Building Your First React Native Application with Expo

For all the talk of web apps being the future, mobile applications still are one the easiest ways to reach your users. But building and maintaining apps for iOS, Android, and the web can literally triple your workload.

React Native solves this by helping developers build cross-platform mobile applications, reducing the time and effort involved. As such, React Native is an extremely popular tool used by tons of companies to simplify their workflow. Let's see how React Native achieves this.

---

What is React Native?

React Native is based on the popular JavaScript framework React. Hence, people familiar with the basics of React (states/props) can easily transition to React Native.
Since it is cross-platform, React Native helps avoid separate code bases for different platforms. It provides components and APIs which act as building blocks for the mobile application.
Some of the core components of React Native are:

1. View
2. Text
3. Image
4. ScrollView
5. StyleSheet
6. Touchables

Developers working with React Native use these components on a regular basis.

It is recommended that developers who are new to mobile application development, use the Expo CLI to develop apps faster, easier, and more efficiently. Expo CLI is a framework built on top of React Native making it much easier to start developing mobile applications.

Let's see React Native in action along with Expo CLI. We’ll be building a basic Todo application for mobile. We will use an android emulator to test our application. To start with, let’s install all the required software and packages.

---

Setting up our development environment

First, in the terminal run the following command to install the Expo CLI globally
npm install -g expo-cli

We’ll be using the Expo mobile app(Available on both Android and iOS) to simulate our app on mobile.

---

Creating a new Expo project

In a terminal, run the command
expo init <project name>

This will create a base project (just like create-react-app) that we can use to create our application. For now, we can just run the application to test our setup by following the instructions below.

Run cd todoapp to change the directory.

Run the application by executing

expo start

Once the app spins up, you should be able to access the expo menu through a local host.

From there, you can find a number of options to test your app, including:

• Running it in a web browser
• Running in an iOS or Android Simulator
• Scanning the QR code from a device with the expo app installed

While there may be some delays depending on the way you do it, Expo is generally pretty seamless in allowing you to test your app.

---

Creating our ToDo App

We will edit the App.js file and add additional components to build our app. The source code for App.js can be found below.

	import React from "react";
	import {
	KeyboardAvoidingView,
	StyleSheet,
	Text,
	View,
	TextInput,
	TouchableOpacity,
	Keyboard,
	ScrollView,
	} from "react-native";
	import Task from "./Task";
	export default function App() {
	const [task, setTask] = React.useState();
	const [taskItems, setTaskItems] = React.useState([]);
	function handleAddTask() {
	Keyboard.dismiss();
	setTaskItems([...taskItems, task]);
	setTask(null);
	}
	function completeTask(index) {
	let itemsCopy = [...taskItems];
	itemsCopy.splice(index, 1);
	setTaskItems(itemsCopy);
	}
	return (
	<View style={styles.container}>
	{/* Scroll view to enable scrolling when list gets longer than the page */}
	<ScrollView
	contentContainerStyle={{
	flexGrow: 1,
	}}
	keyboardShouldPersistTaps="handled"
	>
	{/* Today's Tasks */}
	<View style={styles.tasksWrapper}>
	<Text style={styles.sectionTitle}>My ToDo List</Text>
	<View style={styles.items}>
	{/* This is where the tasks will go! */}
	{taskItems.map((item, index) => {
	return (
	<TouchableOpacity
	key={index}
	onPress={() => completeTask(index)}
	>
	<Task text={item} />
	</TouchableOpacity>
	);
	})}
	</View>
	</View>
	</ScrollView>
	{/* Write a task */}
	{/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
	<KeyboardAvoidingView
	behavior={Platform.OS === "ios" ? "padding" : "height"}
	style={styles.writeTaskWrapper}
	>
	<TextInput
	style={styles.input}
	placeholder={"Add new item"}
	value={task}
	onChangeText={(text) => setTask(text)}
	/>
	<TouchableOpacity onPress={() => handleAddTask()}>
	<View style={styles.addWrapper}>
	<Text style={styles.addText}>+</Text>
	</View>
	</TouchableOpacity>
	</KeyboardAvoidingView>
	</View>
	);
	}
	const styles = StyleSheet.create({
	container: {
	flex: 1,
	backgroundColor: "#E5E5E5",
	},
	tasksWrapper: {
	paddingTop: 80,
	paddingHorizontal: 20,
	},
	sectionTitle: {
	fontSize: 24,
	fontWeight: "bold",
	},
	items: {
	marginTop: 30,
	},
	writeTaskWrapper: {
	position: "absolute",
	bottom: 60,
	width: "100%",
	flexDirection: "row",
	justifyContent: "space-around",
	alignItems: "center",
	},
	input: {
	paddingVertical: 15,
	paddingHorizontal: 15,
	backgroundColor: "#FFF",
	width: 250,
	},
	addWrapper: {
	width: 60,
	height: 60,
	backgroundColor: "#FFF",
	justifyContent: "center",
	alignItems: "center",
	},
	addText: {},
	});

view raw App.js hosted with ❤ by GitHub

The App.js contains:

• Imports - To import the required libraries, native and custom components
• Function - Our App function will contain the entire code.
• Basic components - Basic React Native components such as View, ScrollView, and TouchableOpacity
• Custom component - Just like React we can create our own custom components and use them inside the App.js by importing. We are using a single custom component called Task written inside Task.js. The source is located below.

	import React from "react";
	import { View, Text, StyleSheet } from "react-native";
	function Task(props) {
	return (
	<View style={styles.item}>
	<View style={styles.itemLeft}>
	<Text style={styles.itemText}>{props.text}</Text>
	</View>
	</View>
	);
	}
	const styles = StyleSheet.create({
	item: {
	backgroundColor: "#FFF",
	padding: 15,
	flexDirection: "row",
	alignItems: "center",
	marginBottom: 20,
	},
	itemLeft: {
	width: "100%",
	flexDirection: "row",
	alignItems: "center",
	flexWrap: "wrap",
	},
	itemText: {
	maxWidth: "80%",
	},
	});
	export default Task;

view raw Task.js hosted with ❤ by GitHub

States and Props - Just like React we will utilise useState and pass props to our Task component.

---

There we have it!

We created our first mobile application using React Native and Expo CLI and tested it on our mobile device.

At Codesphere we’re building an all-in-one devtool that supercharges web development. Check us out here.

Happy Coding!

Comments

[Omkar Sathe]

Great, Nice work.
As a beginner, I really wanted a simple, comprehensive, and easy-to-follow guide, but it didn't seem to be.
Instructions are also a little bit unclear:

Step 1:
In a terminal, run the command
expo init <project name>

Step 2:
Run cd todoapp to change the directory.

If suppose in the first step I have used "my-project" as a <project name> then how can I navigate to "todoapp"?

[flower78]

Thx for the tutorial,
just wanted to briefly mention, that you forgot to import Platform in your App.js, from which is being called in line 61. Since this is a beginner tutorial you might want to edit that.