Stack Navigator
Master Stack Navigator for screen-to-screen navigation with push, pop, and replace operations in React Native applications. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples
Stack Navigator Basics
Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack. It's perfect for hierarchical navigation patterns.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Navigation Methods
- navigation.navigate() - Navigate to a screen — a critical concept in cross-platform mobile development that you will use frequently in real projects
- navigation.push() - Push a new screen onto the stack
- navigation.pop() - Go back to previous screen — a critical concept in cross-platform mobile development that you will use frequently in real projects
- navigation.replace() - Replace current screen — a critical concept in cross-platform mobile development that you will use frequently in real projects
- navigation.goBack() - Go back to previous screen — a critical concept in cross-platform mobile development that you will use frequently in real projects
- navigation.reset() - Reset navigation state — a critical concept in cross-platform mobile development that you will use frequently in real projects
Passing Parameters
You can pass parameters to screens through navigation. Parameters are available in the route prop of the screen component and can be used to configure the screen or pass data.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Stack Navigator Example
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
const Stack = createStackNavigator();
// List Screen
const ListScreen = ({ navigation }) => {
const items = [
{ id: 1, title: 'Item 1', description: 'Description for item 1' },
{ id: 2, title: 'Item 2', description: 'Description for item 2' },
{ id: 3, title: 'Item 3', description: 'Description for item 3' },
];
return (
<View style={styles.container}>
<Text style={styles.title}>List Screen</Text>
{items.map((item) => (
<TouchableOpacity
key={item.id}
style={styles.item}
onPress={() => navigation.navigate('Detail', { item })}
>
<Text style={styles.itemTitle}>{item.title}</Text>
<Text style={styles.itemDescription}>{item.description}</Text>
</TouchableOpacity>
))}
</View>
);
};
// Detail Screen
const DetailScreen = ({ route, navigation }) => {
const { item } = route.params;
return (
<View style={styles.container}>
<Text style={styles.title}>Detail Screen</Text>
<View style={styles.detailContainer}>
<Text style={styles.detailTitle}>{item.title}</Text>
<Text style={styles.detailDescription}>{item.description}</Text>
<Text style={styles.detailId}>ID: {item.id}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.goBack()}
>
<Text style={styles.buttonText}>Go Back</Text>
</TouchableOpacity>
</View>
);
};
// Main App
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#2196F3',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="List"
component={ListScreen}
options={{ title: 'Items List' }}
/>
<Stack.Screen
name="Detail"
component={DetailScreen}
options={({ route }) => ({
title: route.params?.item?.title || 'Detail'
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#333',
},
item: {
backgroundColor: 'white',
padding: 15,
marginBottom: 10,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
itemTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
marginBottom: 5,
},
itemDescription: {
fontSize: 14,
color: '#666',
},
detailContainer: {
backgroundColor: 'white',
padding: 20,
borderRadius: 8,
marginBottom: 20,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 3,
},
detailTitle: {
fontSize: 24,
fontWeight: 'bold',
color: '#333',
marginBottom: 10,
},
detailDescription: {
fontSize: 16,
color: '#666',
marginBottom: 10,
},
detailId: {
fontSize: 14,
color: '#999',
},
button: {
backgroundColor: '#2196F3',
padding: 15,
borderRadius: 8,
alignItems: 'center',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default App;