How to handle navigation from one page to another in React Native?

While developing the application we want to switch from one screen to another and this is handled through react navigation.

To work on the navigation page, we need to install some packages as shown below - p>

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

After completing the above installation, now let us proceed to the next navigation setup in React Native.

Create a folder called Pages/ in your application project. 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(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

In the home page, we want to display a button titled "Click Here". Clicking this button will navigate the user to the AboutPage screen. The details of

AboutPage are 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 just display the text as shown above.

Now let us call the page in App.js as follows -

The page is called as follows -

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

Additionally, we need to call the page from @react-navigation/native Importing NavigationContainer will act as a navigation container. Add createStackNavigator from @react-navigation/stack.

Call createStackNavigator() as shown below -

const Stack = createStackNavigator();

Now you can add pages to this stack using as the parent container. Stack.Navigation helps your app transition between screens, with each new screen placed on top of the stack.

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

To create a stack for the Home screen, please complete it as follows-

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

To create a stack for the AboutPage screen, please complete it as follows-

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

Here is the Complete code to provide help 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: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
      </stack.navigator></navigationcontainer>
   );
};
export default MyStack;

The above is the detailed content of How to handle navigation from one page to another in React Native?. For more information, please follow other related articles on the PHP Chinese website!