React Native – Navigation
By using react-navigation, you can easily navigate between different screens and pass data between them, making your app more interactive and dynamic.
We’ll create a simple app with a home screen and a detail screen. The home screen will have a button that navigates to the detail screen.
Step 1: Setting Up the Environment
Ensure you have Node.js, Watchman, and React Native CLI installed. Then create a new React Native project:
npx react-native init NavigationExample
cd NavigationExampleStep 2: Installing Navigation Library
Install react-navigation and its dependencies:
npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-contextStep 3: Setting Up Navigation
Create the basic navigation structure by modifying App.js to include a stack navigator with two screens: HomeScreen and DetailScreen.
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 DetailScreen from './src/screens/DetailScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;Step 4: Creating Screens
Create a screens directory under src and add HomeScreen.js and DetailScreen.js.
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}>This is the Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details', { message: 'Hello from Home Screen!' })}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
marginBottom: 20,
},
});
export default HomeScreen;src/screens/DetailScreen.js:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const DetailScreen = ({ route }) => {
const { message } = route.params;
return (
<View style={styles.container}>
<Text style={styles.text}>This is the Detail Screen</Text>
<Text style={styles.message}>{message}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
marginBottom: 20,
},
message: {
fontSize: 16,
color: 'gray',
},
});
export default DetailScreen;Step 5: Running the Application
Ensure you have a simulator or device set up. Run the app using the following command:
npx react-native run-android # For Android
npx react-native run-ios # For iOSExplanation
App.js:- Sets up the navigation container and defines a stack navigator with two screens:
HomeandDetails.
- Sets up the navigation container and defines a stack navigator with two screens:
HomeScreen.js:- Displays a welcome message and a button. When the button is pressed, it navigates to the
DetailScreenand passes a message as a parameter usingnavigation.navigate.
- Displays a welcome message and a button. When the button is pressed, it navigates to the
DetailScreen.js:- Receives the message from
HomeScreenvia route parameters and displays it along with a message indicating that it is the detail screen.
- Receives the message from
Key Concepts
- NavigationContainer: Manages the navigation tree and contains the navigation state.
- createStackNavigator: Creates a stack navigator, which allows for navigating between different screens in a stack-like manner (e.g., pushing and popping screens off the stack).
- navigation.navigate: Navigates to a specified screen and can pass parameters to the target screen.
- route.params: Used to access the parameters passed to the screen.