React Native Stack Navigation

In this blog we ‘ll learn about react native stack navigation. Navigation is one of the most used and necessary feature in any mobile or web application. Navigation means when we perform any activity say click on a link or click on any button and move to the next screen, We can acheive this using navigation. And in react native application we have stack navigation to handle this. It’s very much similar the way we handle routing in react application. If you want to see how do we use routing in react application please follow this blog Reac t Routing

As the name suggest Stack navigation, it maintains a stack and push each screen details on it. On the basis of this we can navigate between different screens. Let’s see how can we implement this stack navigation in react application.

We have to follow the below steps to implement stack navigation in our react native application.

Install the required npm dependencies.
Create a file that contains all the screen details
In your App.tsx file create the NavigationContainer and provide the details of screen.
Create all screen typescript file. And use the useNavigation() and useRoute() hook.
Create each screen typescript file and do navigation to another screen on any event say on button click navigate to some other screen

Implementations

We have already defined all the points that require to use the stack navigation in react native application. It’s time to do the implementation. Let’s see each step in details.

Let’s create the react native project first. Use the below command to create the project.

npx @react-native-community/cli init NavigationExampleCode language: CSS (css)

Step 1

First we have to install all the required npm package use for stack navigation. Open your Visual studio code terminal and install the below npm packages. Run each commands one by one and after running all these commands just see the package.json file you ‘ll see all the dependencies there.

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimatedCode language: CSS (css)

Step 2

In Second step we ‘ll create a typescript file. In this file we export a type that contains the details of screen and parameter require by them. Let’s create a typescript file.

Create a folder with any name in our case we are creating with name components and inside that create a file where we define a type that contains information related to screen and their property. Our file name is Navigation.tsx.

export type RootStackParamList = {
    Home: undefined,
    Profile: { userId: string, password: string },
    RideDetails: undefined
}Code language: JavaScript (javascript)

You can see in this file we define three screens (Home, Profile and Product). Only on Profile screen we are passing the parameters.

Step 3

Go to your App.tsx file. It’s time for the main thing. In this file we map our application inside NavigationContainer and define all the screens that use in this navigation. Let’s do the implementation now.

App.tsx

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StackNavigationParamList } from './components/NavigationRouteType';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './Screens/HomeScreen';
import ProfileScreen from './Screens/ProfileScreen';
import ProductScreen from './Screens/ProductScreen';

function App() {

  const Stack = createNativeStackNavigator<StackNavigationParamList>();
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Home' screenOptions={{title: 'Vasu App', animation: 'fade', headerTitleAlign:'center', headerTintColor: 'grey'}}>
        <Stack.Screen name='Home' component={HomeScreen}></Stack.Screen>
        <Stack.Screen name='Profile' component={ProfileScreen}></Stack.Screen>
        <Stack.Screen name='Product' component={ProductScreen}></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
Code language: JavaScript (javascript)

Step 4

Now create all the screens that we define inside our App.tsx file. and use the useNavigation() hook to navigate between screens. Let’s create all screen and see in details how do we navigate.

HomeScreen.tsx

import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { Button, Text, View } from "react-native"
import { StackNavigationParamList } from "../components/NavigationRouteType";
import { useNavigation } from "@react-navigation/native";

type HomeScreenNavigationProps = NativeStackNavigationProp<StackNavigationParamList, 'Home'>

const HomeScreen = () => {
    const navigationHook = useNavigation<HomeScreenNavigationProps>();
    return (
        <View>
            <Text>This is Home Screen</Text>
            <Button title="Go To Product Page" onPress={() => navigationHook.navigate('Product')}></Button>
        </View>
    )
}

export default HomeScreen;Code language: JavaScript (javascript)

See here we are using the useNavigation hook. This hook have many method but most useful one is navigate. This navigate method needs the screen name on which we need to navigate. You can see on button click event we are calling this navigate method.

ProductScreen.tsx

import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { Button, Text, View } from "react-native"
import { StackNavigationParamList } from "../components/NavigationRouteType";
import { useNavigation } from "@react-navigation/native";

type ProductScreenNavigationProps = NativeStackNavigationProp<StackNavigationParamList, 'Product'>
const ProductScreen = () => {
    const navigationHook = useNavigation<ProductScreenNavigationProps>();
    return (
        <View>
            <Text>This is Product Screen</Text>
            <Button title="Go To Profile Screen" onPress={() => navigationHook.navigate('Profile', { userId: 123, userName: 'Vasu Rajput' })}></Button>
        </View>
    )
}

export default ProductScreen;Code language: JavaScript (javascript)

ProfileScreen.tsx

import { RouteProp, useRoute } from "@react-navigation/native";
import { Button, Text, View } from "react-native"
import { StackNavigationParamList } from "../components/NavigationRouteType";

type ProfileScreenProp = RouteProp<StackNavigationParamList, 'Profile'>
const ProfileScreen = () => {
    const routeHook = useRoute<ProfileScreenProp>();
    const { userId, userName } = routeHook.params;
    return (
        <View>
            <Text>This is Profile Screen</Text>
            <Text>UserId is: {userId}</Text>
            <Text>UserName is: {userName}</Text>
        </View>
    )
}

export default ProfileScreen;Code language: JavaScript (javascript)

You can see here we are using useRoute hook. We use this hook when we have to fetch the parameter from the navigation. So we can say whenever we need to fetch the params we use the useRoute hook.

We are all done now run the project and see the output. As we are working on windows so we run and check on android device. You can check for apple device as well. Run below command to run on android.

npx react-native run-android

Output:

Hope you like this blog. If you like this blog please share this with others. If you need blog on any specific topic please comment the topic in our comment section.

Others blog you may like

React Native Setup, Hello word Mobile Applica tion

Routing in React web application

Share with others