React Native is an open-source Javascript library developed by Facebook that allows you to build native mobile apps. Remember the catch-phrase for React Native “Learn once, write anywhere.” Cross-platform ability accurately portrays React Native as previously we used to code in Java for Android and Swift/Obj-C for IOS applications. But with React Native, the codebase written in Javascript is rendered with native code.

The applications implemented with React Native can work on multiple platforms such as Android and iOS. 

With gaining popularity and taking the community support behind, it slightly increased its market share and was considered commercially viable.

Facebook, Skype, Instagram, Discord, and Walmart mobile applications are only a few examples that have been developed with React Native.

As I aim for this tutorial to be a hands-on practice for new beginners, I’ll get you started to code in React Native with an easy and smooth example.

How to set up your local environment for React Native?

Install NodeJS

Make sure you have a recent version of node.js installed. 

Download the installer from nodejs.org and run it. Then, follow the instructed steps to finalize the installation.

Verify the installation;

% node --version
v16.13.0

Install Expo in your local environment

We will create a React Native application with the Expo framework. It is easier to design, develop, build, and deploy react-native applications with Expo. So make sure you have Expo installed with the instructions below;

Install command-line tools for Expo;

$ npm install --global expo-cli

Install Expo on your phone & tablet

Install Expo to your mobile device from Google Play Store for Android or App Store for IOS.

Initialize a new application with Expo

Create a project named todo. Select the “blank” template when prompted;

$ expo init todo
┌────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (5.3.0).                 │
│   You are currently using expo-cli 5.0.3                                │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
 Choose a template: › blank               a minimal app as clean as an empty canvas
 Downloaded and extracted project files.
 Using npm to install packages.
 Installed JavaScript dependencies.
 Your project is ready!

To run your application, navigate to the project’s root directory and run the following npm commands based on your choice for Android, IOS, or WEB.

$ cd todo
// npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
$ npm run android
$ npm run ios
$ npm run web

Opening the mobile application on your phone & tablet

It is pretty straightforward to run/test React Native applications with Expo. Once you run the application for the platform of your choice, you will be prompted with a QR code in the console, and that will lead you to the application to be opened on your phone or tablet.

With the below command, you will be directed to localhost:19002 to scan the QR code.

$ npm run ios;

You can run “npm run web” to work only on your laptop from localhost:19002.  

You can open App.js from the source code and change the text to “Hello, world!” to see it updated right away on your device or browser.

A simple React Native navigation example

In this example, we will add navigation to the to-do project.

Please run the below commands to install the React navigation libraries in your project. There are multiple navigation options in React Native; for this particular example, I will go with native-stack.

$ npm install @react-navigation/native
$ npm install @react-navigation/native-stack

Please re-run the application and update the App.js file with the following code.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
  return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
            title="Go to Account"
            onPress={() => navigation.navigate('Accounts')}
        />
      </View>
  );
}
function AccountScreen({ navigation }) {
  return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      </View>
  );
}
const Stack = createNativeStackNavigator();
function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Accounts" component={AccountScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}
export default App;

Verify the changes for Home Screen and Account Screen on your device.

Conclusion

React Native’s official website has excellent documentation and many examples. The best way to learn a tool or a language is through practice.

So I highly encourage you to go through the official documents to understand them in detail and challenge it yourself after this tutorial.

 

Exceptionly blog has excellent tutorials for challenging language methodologies or tools. 

Check out some of the Javascript-based posts for beginners. 

• How to start coding Flutter in 60 minutes
• Start Coding VueJS in 60 minutes
• Start Coding React in 60 minutes
• Start Coding JavaScript in 60 minutes
• Start Coding AngularJS in 60 minutes
• Start Coding NodeJS in 60 minutes