React Native - Navigation with React Navigation


What is React Navigation?

React Navigation is a widely-used library in the React Native ecosystem. It enables developers to implement easy navigation in their apps. The library offers an intuitive API for various navigation patterns, including stack navigation, tab navigation, and drawer navigation.

One standout feature of React Navigation is its ability to manage navigation state. This means it can keep track of where users are in the app and what screens they have visited before. This functionality helps developers create a smooth and seamless user experience.

Setting Up React Navigation

Getting started with React Navigation requires installing a few essential packages. Use these commands in your project directory:

npm install @react-navigation/native @react-navigation/native-stack


You will also need to install some additional dependencies:

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


Once the installation is complete, you can initialize navigation in your app's entry file, typically named `App.js`. Here’s a basic example of how to set up the navigation container:


import * as React from 'react';

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

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

import HomeScreen from './screens/HomeScreen';

import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {

return (

<NavigationContainer>

<Stack.Navigator>

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Details" component={DetailsScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}


With this setup, you are well on your way to creating different screens for your app.

Creating Screens

Let’s create two basic screens: `HomeScreen` and `DetailsScreen`.

HomeScreen.js:


import React from 'react';

import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {

return (

<View>

<Text>Welcome to the Home Screen!</Text>

<Button

title="Go to Details"

onPress={() => navigation.navigate('Details')}

/>

</View>

);

}

export default HomeScreen;


DetailsScreen.js:


import React from 'react';

import { View, Text } from 'react-native';

function DetailsScreen() {

return (

<View>

<Text>This is the Details Screen!</Text>

</View>

);

}

export default DetailsScreen;


In this example, the `HomeScreen` includes a button. When pressed, this button takes users to the `DetailsScreen`. This demonstrates a straightforward stack navigation setup where you can move from one screen to another.

Understanding Stack Navigation

Stack navigation is a central concept in React Navigation. It stacks screens on top of each other, letting users see the previous screen below the current one. Users can go back with a back button that React Navigation provides automatically.

To customize your stack further, you can define options for screens. For instance, adding titles can enhance clarity. Here’s how to add a title to the `DetailsScreen`:


<Stack.Screen

name="Details"

component={DetailsScreen}

options={{ title: 'Details Information' }}

/>


This change means that the header will show the title "Details Information" when users navigate to the `DetailsScreen`.

Additional Navigator Types

While stack navigation is essential, React Navigation also supports other types of navigation, including:

  1. Tab Navigation: Users can switch between different screens using tabs at the bottom.

  2. Drawer Navigation: Users can access navigation links from a side drawer that can slide in from the edge.

If you want to create a Tab navigator, install the necessary package first:


npm install @react-navigation/bottom-tabs


Next, you can set up a simple tab navigator like this:


import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {

return (

<Tab.Navigator>

<Tab.Screen name="Home" component={HomeScreen} />

<Tab.Screen name="Details" component={DetailsScreen} />

</Tab.Navigator>

);

}


Now, users can switch between `HomeScreen` and `DetailsScreen` effortlessly by tapping the corresponding tabs.

Handling Navigation Parameters

There may be times you want to share data between screens. React Navigation makes it easy to pass parameters. Here's how you can send a parameter from the `HomeScreen` to the `DetailsScreen`:


<Button

title="Go to Details"

onPress={() => navigation.navigate('Details', { itemId: 42 })}

/>


In the `DetailsScreen`, you can access this parameter like this:


const itemId = route.params.itemId; // where route is coming from props


This approach allows the `DetailsScreen` to adapt its content based on selections made on the `HomeScreen`, improving the overall user experience.