React Native Tutorial for Beginners [Updated]

React Native is the most popular framework for developing cross-platform mobile applications. This framework has made it possible to create native mobile apps for multiple platforms simultaneously. You can develop full-blown mobile applications for both iOS and Android using a single language, i.e., JavaScript. This is a huge advantage, as it saves a lot of time and money and also eliminates the steep learning curves that are associated with each platform’s native development language (Java or Kotlin for Android, and C or C++ for iOS).

This article will help you get a grip on the basic concepts of React Native. First, we’ll go through the framework’s fundamental aspects. After the basics have been covered, we are going to make our mobile application, a “To-do” app. This application is all about improving productivity as it will allow us to add, manage, and remove tasks. Let’s get started.

Master the fundamentals of React including JSX, props, state, and events. Consider the React.js Certification Training Course. Enroll now!

What is React Native?

React Native is a JavaScript framework that is used to develop mobile applications for iOS and Android. It lets you build cross-compatible mobile applications using only JavaScript, and you don’t have to worry about learning platform-specific application development languages such as Kotlin for Android or Swift for iOS.

React Native applications are real mobile applications and not just web applets. Facebook released the first version of React Native in March 2015.

react-native

Fig: React Native to Platform

Why Use React Native?

Cross-Platform
One of the most significant advantages of React Native is that you can develop an application for both Android and iOS ecosystems simultaneously by writing the same code with just a few modifications for each platform.
JavaScript
There is no need to know the languages used for platform-specific application development, as React Native uses only JavaScript, probably the most popular programming language right now, for the development of mobile applications.
Performance
React Native enables speedy development of mobile applications since a similar code is used for applications for both platforms. It also facilitates a hot reloading feature that makes sure that small changes done to the application are immediately visible to the developer.

Large Developers’ Community
A huge developers’ community ensures that all the queries are resolved in time, and therefore, adequate support is available for the React Native framework.
It Keeps Getting Better
The community, as mentioned above, also keeps updating React Native with new functionalities and making sure that bugs do not occur.
Used by Many Companies
Though the framework is relatively new, many companies have already migrated the applications to this framework. Additional companies are looking to use the framework to speed up the process of development and maintenance.

Excellent Career Opportunities
React Native has become very popular lately due to advantages like cross-compatibility. Consequently, this popularity has led to high demand for React Native developers.

View, State, Props, and Style

View

The View is an elemental component of React Native for building a user interface. It is a container that supports layout with flexbox, style, touch handling, and accessibility controls. It maps directly to the native view similar to whatever platform on React Native app is running on.

react-hello

The code inside the “View” block is outputted to the screen

State

There are two types of data that control a component in React Native: props and state. For data that is going to change in the future, we use state. The state contains the data or information about the component. It determines the behavior of the component and how it will render.

import-react

The “state” object contains the data that gets rendered on screen
The “Text” code block renders the state on screen

Props

Props is short for Properties. The components can be customized at the time of creation using different parameters, and those parameters are known as props. Props are passed from one container to another as a means of passing data between them.

In the class “TVshows,” prop is passed to another component called “Watch”
In the class “Watch,” the received prop is used in the component

Style

React Native uses JavaScript for styling the application. All core components use a prop named “style.” The style names and values are similar to CSS that works for the web. To style our components, we can either use inline styling or use StyleSheet, which is a React Native component.

inline-style

Inline style is used for the text “inline style”
Stylesheet object is created to style the texts, “blue” and “bigBlack”

React Native Apps VS Platform-Specific Apps

These are the most critical differences between React Native and platform-specific mobile applications:

	React Native	Platform-Specific
Cross-Platform	Apps work in both iOS and Android	The app is made for a specific platform
Developers	Developers having a strong web development background	Developers having a strong platform knowledge
Build time	Fast	Slow
Applications	Simple	Complex
Long-term support	Not recommended as the framework can get shut down	Recommended for long-term investment
Resources	Best for small development teams with limited resources	Best for experienced development reams with adequate resources

React Native Prerequisites

Here are some ideas and concepts that you should be familiar with before starting to work on React Native:

You should be familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes
You should have a basic knowledge of JavaScript
You should have some familiarity with HTML and CSS
Finally, if you have worked with React before, you already know a lot about React Native, and there should be absolutely no problem in working with it

Create a React Native Application: To-do App

We are going to make our mobile application, and we will call it To-do. This application will allow us to add and manage tasks in the application. In this react native tutorial, we will focus on running the app in Android OS, so the code is optimized accordingly. We recommend using an Android mobile for this tutorial.

Our final mobile application will look like this. Let’s get started!

Set-Up the Development Environment

to-do-app

“Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript codebase.” - Expo documentation

Navigate to https://expo.io/learn. We will use the Expo framework to develop our React Native application. There you will find all the instructions you need to start creating.

fall-in-love

The first step is not relevant in our case; so let’s skip it and directly start with Step 02, which is to install nodeJS on the computer.

node

After nodeJS is installed, we need to follow Step 03 and get the command-line tool for Expo; for that, type the following command in the command prompt or terminal

npm install Expo-cli --global

After the Expo-cli tool is installed, we need to follow Step 04 and create our project. To do that, type the following command in the command prompt or terminal.

expo init todo-app

Next, choose blank from this screen for a blank application while including Expo workflow features.

command-prompt.

Enter the name of your application, and press Enter to continue setting up the application.

command-prompt2

To start the application, you can navigate to the newly created project folder and type “npm start.” To stop the application, press Ctrl + C.

cd todo-app

npm start

The development server will start running, and a new tab will open in your web browser with the Expo manager screen.

expo

There are two ways you can now preview the application:

You can either run the app on an Android emulator, which you can get by installing Android Studio on the computer.
Or, you can install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes in the code.

Install a text editor of your choice. We are using the Visual Studio Code in this react native tutorial. Still, you can also use other editors like Atom and Sublime Text if you are more comfortable with those.

/code-editing

Now we have all the tools we need to create a new React Native application. We have already created one, the To-do app. So let’s get started by creating the components of our mobile application.

Create Components of the App

Similar to React, everything here is a component. Everything you see here is a separate component that has been combined to create a complete mobile application. The following are the components that we will be creating for this application:

App
This component will act as a container for all the other components to come together and provide a complete application
Header
As the name suggests, this component will be the header of the mobile application
Display Image
This component is used here to display the image on the main screen
To-do Item
Each task added is a separate component
To-do Input
This component is used to add tasks to the application

It is very important to visualize a React Native application in terms of components before starting to work on it, and that’s precisely what we are doing here.

Let’s now start with the development of To-do App:

display

Open the project folder in the text editor, and inside the src folder, create a components folder into which we will add all our components.

Header:

Inside the components folder, create a new file named Header.js
Add the following code in that file. We see below how the code works.

import React from "react";
import { StyleSheet, View, Text } from "react-native";
const Header = props => {
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>{props.title}</Text>
</View>
);
};
const styles = StyleSheet.create({
header: {
width: "100%",
height: 100,
paddingTop: 40,
backgroundColor: "purple",
alignItems: "center",
justifyContent: "center"
},
headerTitle: {
color: "white",
fontSize: 20
}
});
export default Header;

Import React. (Line 1)
Import React Native components. (Line 2)
Return Header text along with style. (Lines 5 – 9)
Add style to create the Header using StyleSheet. (Lines 12 – 25)
Export the component. (Line 27)

2. Display Image:

Inside the components folder, create a new file named DisplayImage.js
Add the following code in that file. We see below how the code works.

import React from "react";
import { Image, StyleSheet } from "react-native";
const DisplayImage = props => {
if (props.taskStatus.length < 1) {
return (
<Image style={styles.image} source={require("../assets/tick.png")} />
);
} else {
return null;
}
};
const styles = StyleSheet.create({
image: {
width: 250,
height: 250,
margin: 80,
marginTop: 250
}
});
export default DisplayImage;

Import React. (Line 1)
Import React native components. (Line 2)
If condition (conditional rendering) to display the image only when there is no task. (Lines 5 – 11)
Image source is the location of the image where it is to be imported from. (Line 7)
Add style using StyleSheet to define the size and alignment of the image. You may adjust the size of the image according to your screen size. (Lines 14 – 21)
Export the component. (Line 23)

3. To-do Item:

Inside the components folder, create a new file named TodoItem.js
Add the following code to that file. We see below how the code works.

import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity,
CheckBox
} from "react-native";
const TodoItem = props => {
const [check, setCheck] = useState(false);
return (
<View style={styles.screen}>
<View style={styles.listItem}>
<Text>{props.title}</Text>
</View>
<CheckBox value={check} onValueChange={() => setCheck(!check)} />
<TouchableOpacity
onPress={props.onDelete.bind(this, props.id)}
style={styles.button}
>
<Text style={styles.text}>Delete</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
listItem: {
padding: 10,
backgroundColor: "#eee",
borderColor: "black",
borderWidth: 1,
width: "60%"
},
screen: {
flexDirection: "row",
marginTop: 30,
justifyContent: "space-between",
width: "100%"
},
button: {
display: "flex",
height: 40,
borderRadius: 5,
padding: 10,
backgroundColor: "red",
alignItems: "center",
justifyContent: "center"
},
buttonGreen: {
display: "flex",
height: 40,
borderRadius: 5,
padding: 10,
backgroundColor: "green",
alignItems: "center",
justifyContent: "center"
},
text: {
fontSize: 14,
color: "white"
}
});
export default TodoItem;

Import React and useState hook. (Line 1)
Import React native components. (Lines 2 - 8)
Define a state to toggle the checkbox. (Line 11)
Render list items, checkbox, and Delete button. (Lines 13 – 25)
Add styles using StyleSheet to the components. (Lines 28 – 64)
Export the component. (Line 66)

4. To-do Input:

Inside the components folder, create a new folder named TodoInput.js
Add the following code to that file. We see below how the code works.

import React, { useState } from "react";
import {
View,
TextInput,
Button,
StyleSheet,
Modal,
Alert,
Image
} from "react-native";
import Header from "./Header";
const TodoInput = props => {
const [enteredTask, setEnteredTask] = useState("");
const TodoInputHandler = enteredText => {
setEnteredTask(enteredText);
};
const addTaskHandler = () => {
props.onAddTask(enteredTask);
setEnteredTask("");
};
const checkInput = enteredTask => {
if (enteredTask.length > 0) addTaskHandler();
else {
Alert.alert("Error", "Please enter a Task", [{ text: "OK" }], {
cancelable: false
});
}
};
return (
<Modal visible={props.visible} animationType="slide">
<Header title="To-Do App"></Header>
<View style={styles.inputContainer}>
<TextInput
placeholder="Task"
style={styles.input}
onChangeText={TodoInputHandler}
value={enteredTask}
/>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<Button
title="CANCEL"
color="red"
onPress={props.onCancel}
></Button>
</View>
<View style={styles.button}>
<Button
title="ADD"
color="green"
onPress={() => checkInput(enteredTask)}
/>
</View>
</View>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
inputContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
input: {
width: "80%",
borderColor: "black",
borderWidth: 1,
padding: 10,
marginBottom: 10
},
buttonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "60%"
},
button: {
width: "40%"
}
});
export default TodoInput;

Import React and useState hook. (Line 1)
Import React native components. (Lines 2 – 10)
Import Header component. (Line 11)
Define a state, enteredText, to add a task to our application. (Line 14)
Functions are appropriately named according to the tasks they perform:
> TodoInputHandler: sets enteredTask state to enteredText. (Lines 16 – 18)
> addTaskHandler: clears the text field after adding a task. (Lines 20 – 23)
> checkInput: checks if the user has entered the task or left the field blank. (Lines 25 – 32
Return a modal (react native component) that contains the input field and buttons. (Lines 35 – 62)
Add styles using StyleSheet to the components. (Lines 66 – 87)
Export the component. (Line 89)

5. App:

Replace the default code in the App.js file with the following code. We show below how the code works.

import React, { useState } from "react";
import { StyleSheet, View, Button, FlatList, Image } from "react-native";
import TodoItem from "./components/TodoItem";
import TodoInput from "./components/TodoInput";
import DisplayImage from "./components/DisplayImage";
import Header from "./components/Header";
export default function App() {
const [tasks, setTasks] = useState([]);
const [addTasks, setAddTasks] = useState(false);
const addTaskHandler = taskTitle => {
setTasks(currentTasks => [
...currentTasks,
{ id: Math.random().toString(), value: taskTitle }
]);
setAddTasks(false);
};
const deleteTaskHandler = taskId => {
setTasks(currentTasks => {
return currentTasks.filter(task => task.id !== taskId);
});
};
const canceltaskAdditionHandler = () => {
setAddTasks(false);
};
return (
<View>
<Header title="To-Do App"></Header>
<View style={styles.screen}>
<Button title="Add New task" onPress={() => setAddTasks(true)}></Button>
<TodoInput
visible={addTasks}
onAddTask={addTaskHandler}
onCancel={canceltaskAdditionHandler}
/>
</View>
<DisplayImage taskStatus={tasks} />
<View style={styles.screenlist}>
<FlatList
keyExtractor={(item, index) => item.id}
data={tasks}
renderItem={itemData => (
<TodoItem
title={itemData.item.value}
onDelete={deleteTaskHandler}
id={itemData.item.id}
/>
)}
></FlatList>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: 70,
paddingHorizontal: 70
},
screenlist: {
marginLeft: 20,
marginRight: 20
}
});

Import React and useState hook. (Line 1)
Import React native components. (Line 2)
Import these components of the project into the app component: (Lines 4 – 7)
> TodoItem
> TodoInput
> DisplayMessage
> Header
Define initial states for the data to be rendered. (Lines 10 – 11)
Functions are appropriately named according to the tasks they perform:
> addTaskHandler: adds tasks to the list. (Lines 13 – 19)
> deleteTaskHandler: deletes tasks from the list. (Lines 21 – 25)
> canceltaskAdditionHandler: cancels adding tasks to the list. (Lines 27 – 29)
Return the components while passing props to each component. (Lines 31 -58)
Add styling to components using StyleSheet. (Lines 61 - 70)

We have completed the development of our To-do mobile application, and it should be working as illustrated below. Let’s go ahead and summarize all that we have done to create this mobile application.

Summary of the Steps:

Set-up an environment for the development of the application
Install the Expo app on the mobile device to preview the application in real-time
Visualize the application in terms of components and then maintain the project structure accordingly in the text editor
Add all the components to the project
Make sure each component works as expected
Enjoy the result and feel free to tweak the design and functionality as you want

We have now created a fully functional mobile application using React Native that works and looks great! We hope you were able to follow all of the instructions easily and can sit back and bask in your accomplishment!

Industry Trends

React Native has become very popular in the world of mobile app development, and that popularity is steadily increasing.

With the adoption of React Native on the rise, the digital world needs more knowledgeable developers. As a result, React Native developer salaries are on the higher side of the spectrum when compared with that of other front-end developers.

react-pay1.

The average salary for a React Native developer across the United States is a whopping USD 91,000 per year!

react-pay2

The average salary for a React Native developer in India is ₹7,25,000 per year!

React Native is a relatively new tool in the world of app development but has already been adopted by many well-known companies such as Facebook, Instagram, Airbnb, and Netflix.

react3

This brings us to the end of our tutorial. Remember, React Native is the most popular framework for building mobile applications, and it is here to stay. The framework’s increasing popularity has led to a growing need for more React Native developers, a demand that shows no signs of abating, making this a very attractive career choice. To learn more, check out our Full Stack Developer - MERN Stack.

Program Name	Duration	Fees
Caltech Coding Bootcamp Cohort Starts: 16 Dec, 2024	6 Months	$ 8,000
Automation Test Engineer Masters Program Cohort Starts: 27 Nov, 2024	8 months	$ 1,499
Full Stack Java Developer Masters Program Cohort Starts: 18 Dec, 2024	7 months	$ 1,449
Full Stack (MERN Stack) Developer Masters Program Cohort Starts: 8 Jan, 2025	6 Months	$ 1,449

Table of Contents

What is React Native?

Why Use React Native?

View, State, Props, and Style

React Native Apps VS Platform-Specific Apps

React Native Prerequisites

Create a React Native Application: To-do App

Set-Up the Development Environment

Create Components of the App

Summary of the Steps:

Industry Trends

The Ultimate React Native Tutorial

Table of Contents

What is React Native?

Why Use React Native?

View, State, Props, and Style

React Native Apps VS Platform-Specific Apps

React Native Prerequisites

Create a React Native Application: To-do App

Set-Up the Development Environment

Create Components of the App

Summary of the Steps:

Industry Trends

What is React Native?

Want a Top Software Development Job? Start Here!

Why Use React Native?

Cross-Platform

JavaScript

Performance

Want a Top Software Development Job? Start Here!

Large Developers’ Community

It Keeps Getting Better

Used by Many Companies

Want a Top Software Development Job? Start Here!

Excellent Career Opportunities

Want a Top Software Development Job? Start Here!

View, State, Props, and Style

View

State

Props

Style

Want a Top Software Development Job? Start Here!

React Native Apps VS Platform-Specific Apps

React Native Prerequisites

Create a React Native Application: To-do App

Set-Up the Development Environment

Master Core Java 8 Concepts, Java Servlet & More!

Create Components of the App

App

Header

Display Image

To-do Item

To-do Input

Let’s now start with the development of To-do App:

Header:

2. Display Image:

3. To-do Item:

4. To-do Input:

5. App:

Summary of the Steps:

Industry Trends

Our Software Development Courses Duration And Fees

Recommended Reads

Get Affiliated Certifications with Live Class programs

Full Stack Developer - MERN Stack Masters Program

Java Certification Training