React Native – Stack Navigation
Purpose:
- Manages a stack of screens, allowing users to navigate forward and backward through screens.
Key Features:
- Push and Pop: Similar to a web browser’s history, you can push new screens onto the stack and pop them off.
- Header Configuration: Customizable headers for each screen.
- Transition Animations: Built-in transition animations between screens.
- Deep Linking: Supports deep linking to navigate directly to specific screens.
Let’s create a basic example of Stack Navigation in React Native from scratch. This example will include two screens: a Home screen and a Details screen. We’ll navigate from the Home screen to the Details screen using React Navigation’s stack navigator.
Setup
First, ensure you have React Navigation installed in your project. If not, you can install it using the following commands:
npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-contextExample Code
- App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;2. src/screens/HomeScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', { itemId: 42, otherParam: 'anything you want here' })}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
marginBottom: 20,
},
});
export default HomeScreen;3. src/screens/DetailsScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const DetailsScreen = ({ route, navigation }) => {
const { itemId, otherParam } = route.params;
return (
<View style={styles.container}>
<Text style={styles.text}>Details Screen</Text>
<Text style={styles.text}>Item ID: {itemId}</Text>
<Text style={styles.text}>Other Param: {otherParam}</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details', { itemId: Math.floor(Math.random() * 100), otherParam: 'another random param' })}
/>
<Button
title="Go back to Home"
onPress={() => navigation.navigate('Home')}
/>
<Button
title="Go back"
onPress={() => navigation.goBack()}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 18,
marginBottom: 10,
},
});
export default DetailsScreen;Explanation
- App.js:
- NavigationContainer: Wraps the whole app to provide navigation functionality.
- createStackNavigator: Creates a stack navigator.
- Stack.Navigator: Contains the stack of screens.
- Stack.Screen: Defines each screen in the stack.
- HomeScreen.js:
- Displays a welcome message and a button.
- Navigates to the Details screen when the button is pressed, passing some parameters.
- DetailsScreen.js:
- Receives parameters passed from the Home screen.
- Displays the received parameters.
- Contains buttons to navigate back to the Home screen, push another instance of the Details screen, and go back to the previous screen.
Running the Application
After setting up the above files, you can run the application using the following commands:
npx react-native run-android # For Android
npx react-native run-ios # For iOS