React Native Tutorial

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!

We will cover the following topics in this article:

  1. What is React Native?
  2. Why Use React Native?
  3. View, State, Props, and Style
  4. React Native Apps vs. Platform-specific Apps
  5. React Native Prerequisites
  6. Industry Trends
  7. Create a React Native Application—To-do: 
    1. Set-up the development environment
    2. Create components of the app
    3. Summarize the steps, enjoy the result

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 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 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.

Development of To-do-app

  1. Header:

  1. Inside the components folder, create a new file named Header.js
  2. Add the following code in that file. We see below how the code works.
  1. import React from "react";
  2. import { StyleSheet, View, Text } from "react-native";
  3.  
  4. const Header = props => {
  5.   return (
  6.     <View style={styles.header}>
  7.       <Text style={styles.headerTitle}>{props.title}</Text>
  8.     </View>
  9.   );
  10. };
  11.  
  12. const styles = StyleSheet.create({
  13.   header: {
  14.     width: "100%",
  15.     height: 100,
  16.     paddingTop: 40,
  17.     backgroundColor: "purple",
  18.     alignItems: "center",
  19.     justifyContent: "center"
  20.   },
  21.   headerTitle: {
  22.     color: "white",
  23.     fontSize: 20
  24.   }
  25. });
  26.  
  27. export default Header;
  1. Import React. (Line 1)
  2. Import React Native components. (Line 2)
  3. Return Header text along with style. (Lines 5 – 9)
  4. Add style to create the Header using StyleSheet. (Lines 12 – 25)
  5. Export the component. (Line 27)

     2. Display Image:

  1. Inside the components folder, create a new file named DisplayImage.js
  2. Add the following code in that file. We see below how the code works.
  1. import React from "react";
  2. import { Image, StyleSheet } from "react-native";
  3.  
  4. const DisplayImage = props => {
  5.   if (props.taskStatus.length < 1) {
  6.     return (
  7.       <Image style={styles.image} source={require("../assets/tick.png")} />
  8.     );
  9.   } else {
  10.     return null;
  11.   }
  12. };
  13.  
  14. const styles = StyleSheet.create({
  15.   image: {
  16.     width: 250,
  17.     height: 250,
  18.     margin: 80,
  19.     marginTop: 250
  20.   }
  21. });
  22.  
  23. export default DisplayImage;
  24.  
  1. Import React. (Line 1)
  2. Import React native components. (Line 2)
  3. If condition (conditional rendering) to display the image only when there is no task. (Lines 5 – 11)
  4. Image source is the location of the image where it is to be imported from. (Line 7)
  5.  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)
  6.  Export the component. (Line 23)

     3. To-do Item:

  1. Inside the components folder, create a new file named TodoItem.js
  2. Add the following code to that file. We see below how the code works.
  1. import React, { useState } from "react";
  2. import {
  3.   View,
  4.   Text,
  5.   StyleSheet,
  6.   TouchableOpacity,
  7.   CheckBox
  8. } from "react-native";
  9.  
  10. const TodoItem = props => {
  11.   const [check, setCheck] = useState(false);
  12.   return (
  13.     <View style={styles.screen}>
  14.       <View style={styles.listItem}>
  15.         <Text>{props.title}</Text>
  16.       </View>
  17.       <CheckBox value={check} onValueChange={() => setCheck(!check)} />
  18.       <TouchableOpacity
  19.         onPress={props.onDelete.bind(this, props.id)}
  20.         style={styles.button}
  21.       >
  22.         <Text style={styles.text}>Delete</Text>
  23.       </TouchableOpacity>
  24.     </View>
  25.   );
  26. };
  27.  
  28. const styles = StyleSheet.create({
  29.   listItem: {
  30.     padding: 10,
  31.     backgroundColor: "#eee",
  32.     borderColor: "black",
  33.     borderWidth: 1,
  34.     width: "60%"
  35.   },
  36.   screen: {
  37.     flexDirection: "row",
  38.     marginTop: 30,
  39.     justifyContent: "space-between",
  40.     width: "100%"
  41.   },
  42.   button: {
  43.     display: "flex",
  44.     height: 40,
  45.     borderRadius: 5,
  46.     padding: 10,
  47.     backgroundColor: "red",
  48.     alignItems: "center",
  49.     justifyContent: "center"
  50.   },
  51.   buttonGreen: {
  52.     display: "flex",
  53.     height: 40,
  54.     borderRadius: 5,
  55.     padding: 10,
  56.     backgroundColor: "green",
  57.     alignItems: "center",
  58.     justifyContent: "center"
  59.   },
  60.   text: {
  61.     fontSize: 14,
  62.     color: "white"
  63.   }
  64. });
  65.  
  66. export default TodoItem;
  67.  
  1.   Import React and useState hook. (Line 1)
  2.   Import React native components. (Lines 2 - 8)
  3.   Define a state to toggle the checkbox. (Line 11)
  4.   Render list items, checkbox, and Delete button. (Lines 13 – 25)
  5.   Add styles using StyleSheet to the components. (Lines 28 – 64)
  6.   Export the component. (Line 66)

     4. To-do Input:

  1. Inside the components folder, create a new folder named TodoInput.js
  2. Add the following code to that file. We see below how the code works.
  1. import React, { useState } from "react";
  2. import {
  3.   View,
  4.   TextInput,
  5.   Button,
  6.   StyleSheet,
  7.   Modal,
  8.   Alert,
  9.   Image
  10. } from "react-native";
  11. import Header from "./Header";
  12.  
  13. const TodoInput = props => {
  14.   const [enteredTask, setEnteredTask] = useState("");
  15.  
  16.   const TodoInputHandler = enteredText => {
  17.     setEnteredTask(enteredText);
  18.   };
  19.  
  20.   const addTaskHandler = () => {
  21.     props.onAddTask(enteredTask);
  22.     setEnteredTask("");
  23.   };
  24.  
  25.   const checkInput = enteredTask => {
  26.     if (enteredTask.length > 0) addTaskHandler();
  27.     else {
  28.       Alert.alert("Error", "Please enter a Task", [{ text: "OK" }], {
  29.         cancelable: false
  30.       });
  31.     }
  32.   };
  33.  
  34.   return (
  35.     <Modal visible={props.visible} animationType="slide">
  36.       <Header title="To-Do App"></Header>
  37.  
  38.       <View style={styles.inputContainer}>
  39.         <TextInput
  40.           placeholder="Task"
  41.           style={styles.input}
  42.           onChangeText={TodoInputHandler}
  43.           value={enteredTask}
  44.         />
  45.         <View style={styles.buttonContainer}>
  46.           <View style={styles.button}>
  47.             <Button
  48.               title="CANCEL"
  49.               color="red"
  50.               onPress={props.onCancel}
  51.             ></Button>
  52.           </View>
  53.           <View style={styles.button}>
  54.             <Button
  55.               title="ADD"
  56.               color="green"
  57.               onPress={() => checkInput(enteredTask)}
  58.             />
  59.           </View>
  60.         </View>
  61.       </View>
  62.     </Modal>
  63.   );
  64. };
  65.  
  66. const styles = StyleSheet.create({
  67.   inputContainer: {
  68.     flex: 1,
  69.     justifyContent: "center",
  70.     alignItems: "center"
  71.   },
  72.   input: {
  73.     width: "80%",
  74.     borderColor: "black",
  75.     borderWidth: 1,
  76.     padding: 10,
  77.     marginBottom: 10
  78.   },
  79.   buttonContainer: {
  80.     flexDirection: "row",
  81.     justifyContent: "space-around",
  82.     width: "60%"
  83.   },
  84.   button: {
  85.     width: "40%"
  86.   }
  87. });
  88.  
  89. export default TodoInput;
  90.  
  1.  Import React and useState hook. (Line 1)
  2.  Import React native components. (Lines 2 – 10)
  3.  Import Header component. (Line 11)
  4.  Define a state, enteredText,  to add a task to our application. (Line 14)
  5.  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
  6. Return a modal (react native component) that contains the input field and buttons. (Lines 35 – 62)
  7. Add styles using StyleSheet to the components. (Lines 66 – 87)
  8. Export the component. (Line 89)

     5. App:

  1. Replace the default code in the App.js file with the following code. We show below how the code works.
  1. import React, { useState } from "react";
  2. import { StyleSheet, View, Button, FlatList, Image } from "react-native";
  3.  
  4. import TodoItem from "./components/TodoItem";
  5. import TodoInput from "./components/TodoInput";
  6. import DisplayImage from "./components/DisplayImage";
  7. import Header from "./components/Header";
  8.  
  9. export default function App() {
  10.   const [tasks, setTasks] = useState([]);
  11.   const [addTasks, setAddTasks] = useState(false);
  12.  
  13.   const addTaskHandler = taskTitle => {
  14.     setTasks(currentTasks => [
  15.       ...currentTasks,
  16.       { id: Math.random().toString(), value: taskTitle }
  17.     ]);
  18.     setAddTasks(false);
  19.   };
  20.  
  21.   const deleteTaskHandler = taskId => {
  22.     setTasks(currentTasks => {
  23.       return currentTasks.filter(task => task.id !== taskId);
  24.     });
  25.   };
  26.  
  27.   const canceltaskAdditionHandler = () => {
  28.     setAddTasks(false);
  29.   };
  30.  
  31.   return (
  32.     <View>
  33.       <Header title="To-Do App"></Header>
  34.       <View style={styles.screen}>
  35.         <Button title="Add New task" onPress={() => setAddTasks(true)}></Button>
  36.         <TodoInput
  37.           visible={addTasks}
  38.           onAddTask={addTaskHandler}
  39.           onCancel={canceltaskAdditionHandler}
  40.         />
  41.       </View>
  42.       <DisplayImage taskStatus={tasks} />
  43.  
  44.       <View style={styles.screenlist}>
  45.         <FlatList
  46.           keyExtractor={(item, index) => item.id}
  47.           data={tasks}
  48.           renderItem={itemData => (
  49.             <TodoItem
  50.               title={itemData.item.value}
  51.               onDelete={deleteTaskHandler}
  52.               id={itemData.item.id}
  53.             />
  54.           )}
  55.         ></FlatList>
  56.       </View>
  57.     </View>
  58.   );
  59. }
  60.  
  61. const styles = StyleSheet.create({
  62.   screen: {
  63.     paddingTop: 70,
  64.     paddingHorizontal: 70
  65.   },
  66.   screenlist: {
  67.     marginLeft: 20,
  68.     marginRight: 20
  69.   }
  70. });
  71.  
  1. Import React and useState hook. (Line 1)
  2. Import React native components. (Line 2)
  3. Import these components of the project into the app component: (Lines 4 – 7)
    > TodoItem
    > TodoInput
    > DisplayMessage
    > Header
  4. Define initial states for the data to be rendered. (Lines 10 – 11)
  5. 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)
  6. Return the components while passing props to each component. (Lines 31 -58)
  7. 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. 

Mobile Application Creation

Summary of the Steps:

  1. Set-up an environment for the development of the application
  2. Install the Expo app on the mobile device to preview the application in real-time
  3. Visualize the application in terms of components and then maintain the project structure accordingly in the text editor
  4. Add all the components to the project
  5. Make sure each component works as expected
  6. 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 React.js Training Course

About the Author

Taha SufiyanTaha Sufiyan

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.