welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

Introduction to React Native Navigation

By Himanshu on 2/12/2023

Introduction to React Native Navigation

Navigating your app is one of the most critical aspects of creating a successful user experience. React Native Navigation provides a powerful solution for creating and managing Navigation in your React Native app. 

With React Native Navigation, you can easily add and remove components, set up routing, and pass data between screens. The library provides a rich set of APIs to help you customize the navigation experience. For example, you can add custom animations, gestures, and transitions between screens.

Installation of React Native Navigation library into your React Native Project:

> Installing the react-navigation library in your React Native Project by using:
> npm install @react-navigation/native.
> npx expo installs react-native-screens react-native-safe-area-context.

After the installation of the library is done, we need to import the functions as shown below in the given example code:

App.js :

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}
function AboutScreen() {
  return (
    <View>
      <Text>About Screen</Text>
    </View>
  );
}
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
     <Stack.Navigator>
        {/*Define our routes*/}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigator

Stack navigators provide users with a consistent experience across multiple platforms, making them an excellent option for creating cross-platform apps.
The Stack Navigator supports a wide range of components and controls, including tab bars, side menus, and bottom navigation bars. 
Using the Stack Navigator to switch between screen components :
 
For using the stack navigator, we first need to install the react-navigation/native-stack module by using the following command.

-    npm install @react-navigation/native-stack

Then we begin by creating two components i.e, HomeScreen.js , About.js in the root of our react native project. The code for the following is given below:

HomeScreen.js :

import React from "react";
import { Button, View, Text } from "react-native";

export default function HomeScreen({ navigation }) {
  return (
    <View style=>
      <Text>Home Screen</Text>
      <Button
        title="Go to About"
        onPress={() => navigation.navigate("About")}
      />
    </View>
  );
}

About.js : 
import React, { Component } from "react";
import { Button, View, Text } from "react-native";
export default function AboutScreen() {
  return (
    <View style=>
      <Text>About Screen</Text>
    </View>
  );
}

It makes it very useful to implement our Navigation in the root of our project i.e., we export the above components in the App.js, which is the point of entry for a React Native Project.

App.js :

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./components/HomeScreen";
import AboutScreen from "./components/AboutScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tab Navigator

Tab navigators are a common way of organizing multiple screens in both web and mobile applications, and React Native makes it easy to implement them with its built-in navigators.
The React Native, Navigation Tab Navigator, consists of the tab bar and the tab view. The tab bar is the component that contains the tab labels and is used to switch between screens. The tab view is the component that holds all the screens that the user can switch between. 
The React Native Navigation Tab Navigator is capable of displaying both tabbed and non-tabbed views and can be customized to fit the look and feel of your application. 

For using tab-based Navigation, we first need to install the react-navigation/bottom-tabs module by using the following command.

-    npm install @react-navigation/bottom-tabs

To implement React-Navigation/bottom-tabs, we first need to import createBottomTabNavigator in place of createStackNavigator in the App.js code file : 

App.js : 
import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from "./components/HomeScreen";
import AboutScreen from "./components/AboutScreen";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="About" component={AboutScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Drawer Navigator

React Native Navigation Drawer Navigator is an incredibly powerful tool for building a navigation system for your mobile applications. With React Native Navigation Drawer Navigator, you can quickly and easily create a navigation system that provides an immersive user experience and lets users quickly access the content they need.
Navigation Drawer Navigator allows you to quickly and easily create a navigation system tailored to your application's needs. You can easily customize the navigation system to fit the specific needs of your application. 

For implementing drawer navigation, we need to install the dependencies required, i.e.:

> npm install @react-navigation/drawer
> npx expo install react-native-gesture-handler react-native-reanimated

After we’ve done these installations import the statements in App.js:

import "react-native-gesture-handler"; //this should be the first import in your code
import { createDrawerNavigator } from "@react-navigation/drawer";

Now we can update the App.js file that is working as the navigator variable :
 
import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import "react-native-gesture-handler"; 
import { createDrawerNavigator } from "@react-navigation/drawer";

import HomeScreen from "./components/HomeScreen";
import AboutScreen from "./components/AboutScreen";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

We can customize the drawer navigator using the inbuilt prop navigation options in the following screen component file, for example : 

<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen
      name="Home"
      component={HomeScreen}
      options=[ //change the configuration of our screen
        drawerIcon: ({ color, number, focused }) => { //set the icon:
          return ( //the icon will be an image
            <Image
              source={require("../assets/home-icon.png")}
              style=
            />
          );
        },
      ]
    />
    <Drawer.Screen
      name="About"
      component={AboutScreen}
      options=[
        drawerIcon: ({ color, number, focused }) => { //set the icon for all screens
          return (
            <Image
              source={require("../assets/about-icon.png")}
              style=
            />
          );
        },
      ]
    />
  </Drawer.Navigator>
</NavigationContainer>


 

React Native
Author
Blog Calendar
Blog Calendar List
2024 Apr  18  4
2024 Mar  33  4
2024 Feb  28  3
2024 Jan  8  7
2023 Dec  14  6
2023 Nov  45  5
2023 Oct  118  12
2023 Sep  245  9
2023 Aug  63  7
2023 Jul  31  5
2023 Jun  20  4
2023 May  43  5
2023 Apr  35  5
2023 Mar  98  6
2023 Feb  112  5
2023 Jan  41  4
2022 Dec  94  7
2022 Nov  257  2
2022 Sep  13  1
2022 Aug  28  2
2022 Jun  7  2
2022 May  4  2
2022 Apr  6  2
2022 Mar  2  1
2022 Feb  2  1
2022 Jan  1  1
2021 Dec  4  1
2021 Nov  2  1
2021 Oct  2  1
2021 Sep  12  1
2021 Aug  38  5
2021 Jul  36  4
2021 Jun  1246  5
2021 May  31  3
2021 Apr  2036  3
2021 Mar  189  5
2021 Feb  2142  7
2021 Jan  3108  9
2020 Dec  446  7
2020 Sep  74  3
2020 Aug  685  3
2020 Jul  128  1
2020 Jun  75  3
2020 Apr  69  3
2020 Mar  13  2
2020 Feb  28  5
2020 Jan  34  7
2019 Dec  17  4
2019 Nov  30  1
2019 Jan  23  2
2018 Dec  71  4
2018 Nov  68  3
2018 Oct  18  3
2018 Sep  1152  11
2018 Aug  7  2
2018 Jun  14  1
2018 Jan  68  2
2017 Sep  585  5
2017 Aug  17  1
2017 Jul  17  2
2017 Jun  62  2
2017 May  21  1
2017 Apr  35  2
2017 Mar  135  4
2017 Feb  784  4
2016 Dec  204  3
2016 Nov  834  8
2016 Oct  307  10
2016 Sep  705  6
2016 Aug  39  1
2016 Jun  1876  6
2016 May  110  3
2016 Jan  71  2
2015 Dec  485  6
2015 Nov  4  1
2015 Oct  13  1
2015 Sep  1464  6
2015 Aug  14  1
2015 Jul  128  2
2015 Jun  11  1
2015 May  20  1
2015 Apr  30  3
2015 Mar  80  3
2015 Jan  5335  4
2014 Dec  17  1
2014 Nov  2257  4
2014 Oct  68  1
2014 Sep  107  2
2014 Aug  5280  1
2014 Jul  49  2
2014 Apr  2578  12
2014 Mar  301  17
2014 Feb  220  6
2014 Jan  1510  16
2013 Dec  21  2
2013 Nov  690  2
2013 Oct  256  3
2013 Sep  11  1
2013 Aug  40  3
2013 Jul  214  1
2013 Apr  57  6
2013 Mar  2292  10
2013 Feb  127  3
2013 Jan  343  2
2012 Nov  57  2
2012 Oct  499  10
Tag Cloud
Interested in our services? Still not sure about project details? get a quote