Stack Navigation is the most common navigation pattern in React Native apps. It allows screens to be placed on top of each other like a stack, enabling push and pop based navigation.
Stack navigation is implemented using @react-navigation/native-stack. Each screen is registered inside a stack navigator.
// Creating a stack navigator
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
// Basic stack navigation example
import React from 'react';
import { Text, Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen({ navigation }) {
return (
<View>
<Text>Home Screen</Text>
<Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
</View>
);
}
function DetailsScreen() {
return (
<View>
<Text>Details Screen</Text>
</View>
);
}
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>
);
}
When the app launches, the Home screen appears first. Pressing the button pushes the Details screen onto the stack, showing a back button automatically.
The stack works like browser history: new screens are pushed, and the back button pops the current screen. Use the simulator below to understand how screens stack on top of each other.