How to Use Stack Navigator in React Native for Screen Navigation

To use Stack Navigator in React Native, install @react-navigation/native and @react-navigation/stack, then create a stack navigator with createStackNavigator(). Wrap your app in NavigationContainer and define screens inside the stack to enable navigation between them.

Syntax

The basic syntax involves importing createStackNavigator from @react-navigation/stack and NavigationContainer from @react-navigation/native. You create a stack navigator instance, then define screens inside it using Stack.Screen. Finally, wrap the stack navigator inside NavigationContainer to manage navigation state.

• NavigationContainer: Root component that manages navigation tree.
• createStackNavigator: Function to create a stack navigator object.
• Stack.Navigator: Component that holds all screens in the stack.
• Stack.Screen: Defines each screen with a name and component.

javascript

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

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

Output

App with two screens: Home and Details, navigable via stack navigation.

Example

This example shows a simple app with two screens: Home and Details. The Home screen has a button to navigate to Details. The stack navigator manages the screen transitions automatically.

javascript

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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

Output

App shows Home Screen with a button; pressing it navigates to Details Screen.

Common Pitfalls

Common mistakes when using stack navigator include:

• Not wrapping the navigator inside NavigationContainer, which breaks navigation.
• Forgetting to install required packages like @react-navigation/native and dependencies such as react-native-screens and react-native-safe-area-context.
• Using incorrect screen names in navigation.navigate(), causing navigation to fail silently.
• Not passing the navigation prop to screen components, so navigation functions are undefined.

Example of a wrong and right way:

javascript

// Wrong: Missing NavigationContainer
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

// Right: Wrap with NavigationContainer
import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import HomeScreen from './HomeScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Quick Reference

Here is a quick reference for key stack navigator components and props:

Component/Function	Purpose
NavigationContainer	Wraps the whole navigation tree and manages state
createStackNavigator	Creates a stack navigator object
Stack.Navigator	Container for stack screens
Stack.Screen	Defines a screen with a name and component
navigation.navigate('ScreenName')	Navigates to a named screen
navigation.goBack()	Returns to the previous screen

Key Takeaways

Always wrap your stack navigator inside NavigationContainer to enable navigation.

Define screens inside Stack.Navigator using Stack.Screen with unique names.

Use navigation.navigate('ScreenName') to move between screens.

Install all required packages and dependencies before using stack navigator.

Pass the navigation prop to your screen components to access navigation methods.