What is React Native? (The Essential Guide)

Creating separate applications for each platform is tricky. Still, React Native solves the problem by offering native applications from a single codebase. Some popular applications created with the help of React Native are Facebook, Instagram, Discord, and more.

In the following sections, we’ll explore what React Native is in an in-depth fashion.

What is React Native and Why use it?

React Native is a cross-platform JavaScript-based framework for writing native iOS and Android mobile application code. It has attracted a lot of business because it is an open-source framework backed by Facebook (Meta).

• While developing a mobile application, React Native simplifies the process. 
• Develop an application for two platforms with one codebase, thus saving time and money on maintenance and development. 
• While working on development with React Native, you don’t have to stress over learning a new language. 
• Every front-end web developer is accustomed to JavaScript, and with a little more effort, one can grasp React Native as well. 
• Initially, React was entirely under Facebook, but ever since it has gone open-source, it receives never-ending and valuable updates regularly, improving the framework manifold times.

What is Cross-Platform Development?

As many operating systems are hanging around today, such as Android, iOS, Linux, and more, creating applications for each platform was challenging yet highly costly. Performing cost-cutting in the development process became difficult until some cross-platform frameworks were invented. 

• Cross-platform development refers to writing a single codebase that renders well on all operating systems. 
• The idea behind implementing cross-platform development is to allow an application to work perfectly on multiple platforms to maximize the targetted audience’s coverage.
• Some other benefits include easy maintenance and deployment, the development is quick, and it serves a uniform user experience across the platforms.

How does React Native work?

React Native uses the concept of a ‘bridge’ between the application and the target platform. This bridge allows communication between the JavaScript and native threads. The JavaScript threads are present in the application. However, the native threads are off the platform, you’re running your application.

For instance, when a click occurs, a JavaScript event is generated, and afterward, the React Native bridge translates native React events into JavaScript events for React to handle.

As React Native has become open-source, not only have businesses recognized its capabilities, but many of them jumped right in to create their online presence.

Examples of popular applications built with React Native: 

1. Instagram 
2. UberEats
3. Tesla 
4. Soundcloud Pulse
5. Wix

We will now look at a practical example of how React Native applications are developed and will deploy on iOS and Android.

Setting up the Development Environment

Let’s set up the environment before creating our React native project. If you’re a slight beginner in React Native, using Expo to render the output of the React Native application is a good choice; however, if you’re familiar with native development, you might use Android Studio or Xcode.

Expo is a tool built for React Native to enhance the development experience by offering several features, such as you can run the React Native app without having the actual device or emulator.

Prerequisites of the project:

1. You must have the latest version of Node.js installed on your system. 
2. Consider any IDE of your choice, in this example, we use VSCode.

Step 1: Installing dependencies 

In this step, we shall install all the required and necessary dependencies for our project. We have to install the dependencies for using the expo on the web.

npx expo install react-native-web@~0.18.9 react-dom@18.1.0 @expo/webpack-config@^0.17.2

Step 2: Create an expo App

npx create-expo-app myApp

cd myApp
npm run web

The default application will look something like this. 

Understanding React Native components

Components are the building blocks of code in a React project. These are independent blocks, which have the great feature of being reusable. As there are functions in JavaScript, there are components in React. However, it returns HTML. 

Let’s create a few components in React Native and also understand props.

Creating a React component is the easiest way to create a JavaScript function. 

function Welcome(props) {
return <h1>Hello World </h1>;
}

To render the above component or simply function, follow the below script in your main app.js file.

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome/>;
root.render(element);

The output will be.

A common yet efficient practice is to create separate files for each component and create a single file to call each component unless it is nested. 

In React, props(stand for properties) are attributes passed into components as parameters. Consequently, properties and values help pass data into a component. The idea behind implementing props is it provides a good user experience with quickly-executable code. 

Let’s implement props into our previous component. 

function Welcome(props) {
return <h1>Hello {props.title}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <Welcome title="World" />;
root.render(element);

Navigation in React Native

React Navigation is a library allowing us to implement navigation functionality in the application. Navigation is often used to go from one state to another. For instance, if you are on the home screen of the application and want to switch to another screen, it is done by implementing the navigation functionality in your application. 

Setting up React Native navigation 

First, install the required navigation package in your React Native project. 

npm install @react-navigation/native

Now, you have to install two core libraries to help implement navigation to your project, react-native-screens, and react-native-safe-area-context. 

npx expo install react-native-screens react-native-safe-area-context

Finally, wrap your entry file(App.js or index.js) in NavigationContainer. 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}

Navigating between screens

Let’s implement navigation between screens by taking the following example: a user clicks on a button in the home screen navigates to the other screen. 

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen name="Other" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};

• First, in the index.js file, inside the NavigationContainer element, define multiple screens using Stack.Screen component. 
• The option prop of Stack.Screen takes component props to define the screen for navigation.

const HomeScreen = ({navigation}) => {
return (
<Button
title="Switch Screen"
onPress={() =>
navigation.navigate('Other')
}
/>
);
};

const ProfileScreen = ({navigation, route}) => {
return <Text>This is Other Screen</Text>;
};

Now create two components between which you want to obtain navigation. 

After clicking the button, the screen switches. 

Using Stack Navigation

In stack navigation, the latest screen stacks on the top of a stack during the transition from one screen to another. It is implemented to save the back stack or navigation history.

To implement stack navigation, install the stack navigator with the following command. 

npm install @react-navigation/stack

Then, install several libraries required by the stack navigator. 

npx expo install react-native-gesture-handler

import 'react-native-gesture-handler';

Note that, you must import the package on your index file on the top of everything. 

npx expo install @react-native-masked-view/masked-view

npx pod-install ios

Note that it is only required if you’re developing on MacOS for iOS platform. 

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="SecondScreen" component={SecondScreen} />
<Stack.Screen name="ThirdScreen" component={ThirdScreen} />
</Stack.Navigator>
);
}

Using Tab Navigation

Tab Navigation is the most common type of navigation existing in mobile applications. In this, the navigation buttons are placed on either the top of the screen as the header or at the bottom for easy navigation throughout the application. 

Styling in React Native

Styling in React Native is achieved with the help of JavaScript. Alternatively, you can create an object of Style and pass it on to the components you want to apply it using props. The latter method is also called creating Stylesheet, similar to a CSS sheet by moving styles away from the render function. 

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Styles = () => {
return (
<View style = {{flex: 1, backgroundColor: "#ffffff" }}>
<View>
<Text style={style.blueHeading}>BrowserStack blue</Text>
<Text style={style.redHeading}>BrowserStack red</Text>
<Text style={style.greenHeading}>what is react native</Text>
</View>
</View>
)
}

const style = StyleSheet.create({
blueHeading : {
fontSize: 50, 
color: "blue"
},
redHeading : {
fontSize: 40, 
color: "red"
},
greenHeading : {
fontSize: 35, 
color: "lightgreen"
}

})

Using Flexbox

The purpose of Flexbox is simple, it is designed to achieve a consistent layout on different screen sizes. It eases the task of creating a responsive design without relying on evaluating the perfect CSS script. 

Moreover, Flexbox is even more accessible in React Native than in the web as React Native defines flex as a number that is easier to work along, unlike in CSS for the web where it is treated as a string. 

import React from 'react';
import {StyleSheet, View} from 'react-native';

const Flex = () => {
return (
<View
style={[
styles.container,
{
flexDirection: 'row',
},
]}>
<View style={{flex: 1, backgroundColor: 'orange'}} />
<View style={{flex: 2, backgroundColor: 'white'}} />
<View style={{flex: 3, backgroundColor: 'green'}} />
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
},
});

export default Flex;

Moreover, you can also perform other operations in the above example, such as defining, Flex Direction, Layout Direction, Align Items, and more. 

Interacting with APIs

API is an abbreviation for Application Programming Interface. In our daily digital life, you may not notice, but APIs are constantly working behind the scenes to provide us smooth user experience in our favorite applications. 

Simply put, APIs are messengers that deliver our requests to the server and carry the response back in real-time. 

Now, let’s understand how to integrate APIs into our application with the help of ‘Fetch’ and ‘Axios’.

Using Fetch

const getMoviesApi = async () => {
try {
let response = await fetch(
'https://examples.com/data.json'
);
let json = await response.json();
return json.movies;
} catch (error) {
console.error(error);
}
};

Using Axios

import axios from 'axios';
const baseUrl = 'https://example.com';

axios({
method: 'get',
url: `${baseUrl}/api/users/1`,
}).then((response) => {
console.log(response.data);
});
axios.get(`${baseUrl}/api/users/1`).then((response) => {
console.log(response.data);
});

Debugging React Native apps

Debugging is the process of examining the code thoroughly and detecting the present errors in the React Native application. The debugging usually happens during the development stage to save cost and time if done during the production stage. 

• In End to end React Native testing, debugging is done on the hardware menu on the simulator on which you’re running your application, either the Android or iOS simulator.
• Open the developer menu in the simulator by pressing CTRL + M for Android and CMD + D for iOS. 

Debugging with remote debugging is achieved when you click on Debug on remote JS remotely. Other options, such as, ‘Show Perf Monitor’ is used to track the performance of your React Native application.

• With BrowserStack Test Observability, teams can access test reporting, precision debugging, and flaky test detection on the same dashboard.
• Fix faster with Smart Failure Analysis, which learns from your testing and identifies the causes of test failures.
• Drill down by test runs, unique errors, or even devices & browsers to find areas to optimize your tests

Sign Up

Deploying React Native apps

Finally, you have reached the last part of the development: deploying your application on the Play Store and App Store. React is one of the most widely used cross-platform frameworks that doesn’t yet take the responsibility of automatically building and deploying your application. 

We shall now understand how to build and deploy our React Native project. 

Building an iOS application

1. Run the command expo build:ios
2. Expo will then ask you to upload Keystore, you can either provide your own or let Expo handle it. Either way, you must have a backup. 
3. To backup Keystore, run the command expo fetch:ios:keystore
4. The application will now start building, and once the build is complete, it will provide you a .ipa URL to download the application. 

Building and deploying for Android

1. Run the command expo build:android 
2. Expo will then ask you to upload Keystore; you can either provide your own or let Expo handle it. Either way, you must have a backup.
3. To backup Keystore, run the command  expo fetch:android:keystore.
4. The application will now start building, and once the build is complete, it will provide you a .apk URL to download the application. 

Deploying to App Store and Play Store

Your app.json file must be set up before publishing your application. Even though there are several properties, three are required and must be properly filled out.

1. name 
2. slug: slug here is the URL slug of your application. expo.io/@username/app-name project
3. sdkVersion: It is the expoSDk version of your project.  

Once the app.json file is set up, run the following command to publish your project. 

expo publish

After which you will get a link to your application for Android and iOS versions.

Closing Notes

React Native has been a hot topic of discussion ever since it rolled out in the market. It deserves the attention it is gaining, being a powerful JavaScript-based cross-platform framework for building applications for Android and iOS simultaneously. Moreover, many businesses such as Uber, Microsoft, Facebook, and more have scaled after adopting React Native for designing their application. 

• React Native’s working mechanics differ from the technologies that co-existed when it was launched. 
• It bridges the JavaScript threads and Native threads and establishes a communication so that each works simultaneously. 
• Some amazing features that encourage developers to integrate React Native in their next project are reusable code, quicker development, an easy learning curve, frequent enhanced updates, a strong community, and more.