How to add Stack Navigation in React Native

on

Navigation is one of the most common features we will be using in mobile apps for demonstrating different screens to the user. We have 3 types of navigations in React native. 

1. Stack Navigation

2. Tab Navigation

3. Drawer Navigation.

In this tutorial, we will focus mostly on How to Integrate Stack Navigation in our react native application.

Commands to Install: 

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context


Now we need to import NavigationContainer where we can place all our navigation code.

import {NavigationContainer} from '@react-navigation/native';

In App.js 

<NavigationContainer>

[Your Navigation code]

</NavigationContainer>

For Stack Navigation

npm install @react-navigation/stack

npm install react-native-gesture-handler 

npm install @react-native-masked-view/masked-view


 Once the installation is completely done then we need to import createStackNavigator like below.

  • import { createStackNavigator } from '@react-navigation/stack'

Assign it to const variable
  • const Stack = createStackNavigator();

Now Create Different screens/components like Home and Navigation components. and Import these components in your root component like App.js.

Add Stack Navigator and Stack Screens to your App.js like below.

<Stack.Navigator>
        <Stack.Screen  name='home'  component={HomeComponent}/>
        <Stack.Screen  name='notification'  component={NotificationComponent}/>
</Stack.Navigator>

Here, Navigator Screen will have two main properties,
1. name  2. component

name: we will give the route name here.
component: we will give the component name here.

Once all the changes are completed your app.js component will look like below.







Now You can run your project using the below command:
  • npx react-native run-android


RESULTS CAN BE SEEN LIKE BELOW

                               


If you like this tutorial please follow this Page.

Detailed video can be viewed on our youtube channel. Pls, subscribe to our channel for more content.






Comments

Post a Comment