React Native navigation allows users to move between different screens in a mobile application. It manages screen transitions, headers, history stacks, and user flow across the app.
React Native navigation is commonly implemented using the @react-navigation library. It wraps the app inside a navigation container and defines navigators to control screen flow.
// Import navigation container from react-navigation
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
</NavigationContainer>
);
}
// Basic stack navigation setup
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function AppNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
);
}
The app starts on the Home screen. When navigation actions are triggered, the stack pushes or pops screens while maintaining navigation history.
Use the simulated phone below to understand how Stack Navigation works. Notice how screens stack on top of each other.
This is the bottom of the stack.
You pushed a new screen.
Top of the stack.
Press back to pop.