How to navigate between screens in React Native

How to navigate between screens in React Native

In this article, we are going to learn about How to navigate between screens in React Native. To navigate between screens react native provides a powerful React-Navigation package. which you need to install in the project. this package provides different types of navigators like Stack, Native Stack, Drawer, Bottom Tabs, Material Bottom Tabs, and Material Top Tabs. So in this article, we are going to use a stack navigator which needs to be set up in the App.js file and pass our screens in the stack navigator. Also, this package provides functionality to pass data from one screen to another screen. so let’s start with the Implementation of React navigation package in our project.

How to navigate between screens in React Native

 

1. Create a new project

Use the following command to create a new React Native project

react-native init ProjectName

2. Install React Navigation package

Use the following command to install the package

npm install @react-navigation/native

This package needs some supported packages that need to install. use the following command to install.

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

If you are using mac then you much use the pod install command to set up this package for iOS.

3. Use of React navigation

In the App.js file, you need to wrap all your stack navigators in NavigationContainer. let’s understand with code

import * as React from 'react';
//Import this NavigationContainer from @react-navigation/native
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Use stack navigator with your screens name */}</NavigationContainer>
  );
}

4. Use of stack navigator

After completing the third step. you need to install another package called native stack navigator. to install this package using the following command.

npm install @react-navigation/native-stack

After successfully installation you need to create this navigator and then register different screens that should be a part of that navigator for that see the following code.

import * as React from 'react';
import { View } from 'react-native';

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

//Import native-stack navigator like this
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import DashboardScreen from './components/screens/DashboardScreen';
import ProfileScreen from './components/screens/ProfileScreen';

//Create Native-Stack Navigator like this
const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Dashboard" component={DashboardScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />  
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

You need to register all screens inside Stack.Navigator component and In Stack.Screen the component is the actual imported component and the name is the identifier that you can use anywhere in the app.

6. Navigate between screens

After registering your screens in Stack Navigator you are ready to use these screens names for navigation. you can just use navigation.navigate let’s understand with the following code

import * as React from 'react'; 
import { View, TouchableOpacity, Text } from 'react-native'; 
 
function DashboardScreen({ navigation }) { 
  return ( 
     <View>
     <TouchableOpacity onPress={()=> navigation.navigate('profile')}>  
      <Text>Open Profile</Text>
     </TouchableOpacity>
     </View>
  ); 
} 

export default DashboardScreen;

Note: You must register your screens in the stack navigator to use in navigation.navigate(‘ScreenName’);

7. Transfer data

To transfer data from one screen to another you need to pass an object in the navigation.navigate

navigation.navigate('profile',{data: yourContent});

This is how to navigate between screens in React Native.

 

 

Leave a Reply

Your email address will not be published.