react native-tutorial

React Native Navigation

You may integrate navigational features into a React Native application using React Navigation, a standalone library.

JavaScript is used to create React Navigation, which does not directly use the iOS and Android native navigation APIs. Instead, it generates a portion of those APIs from scratch. This eliminates the need to learn Objective-C, Swift, Java, Kotlin, etc. It enables the integration of third-party JS plugins, maximum customisation, and simpler debugging.

What is React Native Navigation?

A well-liked substitute for React Navigation is React Native Navigation. It’s a module made for usage with React Native and is dependant on it. React Native Navigation is different in that it makes use of the native navigation APIs on iOS and Android, giving it a more authentic appearance and feel.

Installing React Navigation

The first step is to start up a React Native app, presuming Yarn is already installed. Expo tools make it simple to start a project without setting up Xcode or Android Studio, making them the best approach to learn React Native.

Install Expo by running this:

npm install -g expo-cli

If you encounter any error on Mac, try running it this way:

sudo npm install --unsafe-perm -g expo-cli

Then run the following to create a new React Native project:

expo init ReactNavigationDemo

This will kickstart some downloads and ask you to enter some configuration variables. Select expo-template-blank and choose yarn for the dependency installation.

Next, cd into the project folder and open your code editor:

cd ReactNavigationDemo

If you are using VS Code, you can open the current folder in the editor using:

code .

Start the app with:

yarn start

The next step is to install the react-navigation library in your React Native project:

yarn add react-navigation

The React Native stack navigator

You may design components and navigation patterns that look and feel like they were truly native using the JavaScript-based React Native stack navigator.

React Navigation manages the navigation history and displays the relevant screen based on the user’s path across the app using something known as a stack navigator. A user is only ever shown one screen at a time.

Imagine a stack of paper; moving to a new screen adds it to the stack, while moving backwards removes it. The transitions and motions that mimic those of native iOS and Android are also offered by the stack navigator. It should be noted that an app may contain many stack navigators.

Example Using tab navigation

Most mobile apps have more than one screen. A common style of navigation in such mobile apps is tab-based navigation. Here we will focus on how to implement tab navigation using createBottomTabNavigator.

Let’s add another screen in our app by creating a ContactScreen.js file under /components.

import React, { Component } from 'react'
export default class ContactScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Contact Screen</Text>
      </View>
    )
  }
}

Now let’s add to the imports at the top of our App.js file:

import ContactScreen from './components/ContactScreen';

Recall that it is useful to implement our navigation in the root App.js component. Therefore, we will implement our tab navigation by importing createBottomTabNavigator in App.js.

Let’s replace createStackNavigator:

import { createBottomTabNavigator, createAppContainer } from "react-navigation";

Also replace createStackNavigator with createBottomTabNavigator in the AppNavigator object:

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
}, {
  initialRouteName: "Home"
});

Add the new screen to the navigator object:

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Contact: {
    screen: ContactScreen
  }
}, {
  initialRouteName: "Home"
});

If you run the app with npm start and open it on your Expo client, you should see the bottom nav implemented.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *