The Ultimate React Native Tutorial

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.

Fig: React Native to Platform

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

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. 

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

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

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

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

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

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.

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.

• 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 is used for the text “inline style” 
• Stylesheet object is created to style the texts, “blue” and “bigBlack”

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

React Native Apps VS Platform-Specific Apps

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

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

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

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

• 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

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

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

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

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

Become a Certified UI UX Expert in Just 5 Months!

UMass Amherst UI UX BootcampExplore Program

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

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.

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:

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

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

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.

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

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.

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.