How to handle navigation from one page to another in react native?


While working on the app, we would like to switch from one screen to another and that is handled by react navigation.

To work on navigating pages we need to install few packages as follows −

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

Once you are done with the above installation let us now proceed with the next setup of navigation in react native.

In your app project create a folder called pages/ . Create 2 js files HomePage.js and AboutPage.js.

pages/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate('About', { name: 'About Page' })}/>
   );
};
export default HomeScreen;

In the home page, we want to display a button with title as Click Here. Onclick of the button the user will navigate to AboutPage screen.

The details of AboutPage is as follows −

pages/AboutPage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

In about page we are just displaying the text as shown above.

Now let us call the pages in App.js as follows −

The pages are called as follows −

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

In addition we need to import NavigationContainer from @react-navigation/native will act as a navigation container. Add createStackNavigator from @react-navigation/stack.

Make a call to createStackNavigator() as shown below −

const Stack = createStackNavigator();

Now you can add the pages to this Stack using <Stack.Navigator> as the parent container. Stack.Navigation helps your app to transition between screens where each new screen is placed on top of a stack.

<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} /><Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator></NavigationContainer>

To create a Stack for HomePage screen it is done as follows −

<Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />

To create a Stack for AboutPage screen, it is done as follows −

<Stack.Screen name="About" component={AboutPage} />

Here is the full code that helps in Navigation Screen in React Native −

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const Stack = createStackNavigator();
const MyStack = () => {
   return (
      <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} /><Stack.Screen name="About" component={AboutPage} />
      </Stack.Navigator></NavigationContainer>
   );
};
export default MyStack;

Updated on: 01-Jul-2021

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements