How to Implement Stack Navigation in a React Native App?

Navigation is an important consideration when creating a React Native mobile application, as it will have a significant impact on the customer journey. Stack navigation, the most common and user-friendly navigation pattern, mimics the push/pop behavior of a call stack, which is ideal for navigating multiple screens, in much the same way as both the back and forward buttons on most browsers.

Let’s learn how to implement stack navigation using React Navigation.

Key Concepts in Stack Navigation:

• Navigator: The container that manages the stack. The createStackNavigator function creates a stack navigator in React Navigation.
• Screen: Each screen provides a unique view or component to the app. Therefore, a screen is also added to the stack and forms part of the navigation flow within the app.
• Navigation Actions: Navigation actions can be triggered by user actions or programatically. The most common actions that can be taken are navigating to a screens and going back.

Implementing Stack Navigation

Now, let’s create a simple application with two screens: Home and Details.

Import Necessary Modules:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

Create Screens:

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
);

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

Create a Stack Navigator:

const Stack = createStackNavigator();

Define the Main App Component:

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Run the App:

npx react-native run-android

or

npx react-native run-ios

Navigating Between Screens

In the provided example, the HomeScreen component contains a button that navigates to the DetailsScreen when pressed. The navigation.navigate function is used to trigger the navigation action.

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

This button, when pressed, adds the Details screen to the top of the navigation stack.

Final Thoughts

Stack navigation is a basic feature of any mobile app that enables user to navigate to any screen whilst doing so in a organic fashion. The React Navigation native stack, easily creates performant native-like navigation.