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>