Hi guys, in this article we are going to learn about How to use React-navigation 5.0 example react-native, as we have already familiar with previous versions of react-navigation. in this version in this, we can change configuration dynamically, also can access context, props, and state in the navigator, this is a most important update of react-navigation so let’s start with making a new project using expo
1. Create a new project
Firstly, install expo client using the following command
npm install --global expo-cli
Create a project using the following command
expo init projectName
2. Install React-navigation 5.0
first, install the following library for react-navigation
npm install @react-navigation/native
then install supportive libraries using the following command
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3. Create screens
We are going to create two screens one is Home.js and the second is details.js
1. Home.js
import React from "react"; import { StyleSheet, View, Text, TouchableOpacity } from "react-native"; const characterDetails = { name: "Techup.co.in", desc: "Learn React-native application development" }; function Home(props) { const { navigation } = props; //<--- Get navigation from props return ( <View style={styles.container}> <Text style={styles.text}>React-navigation 5.x example</Text> <TouchableOpacity style={styles.buttonContainer} onPress={() => navigation.navigate("Detail", { item: characterDetails }) //<--- Code to navigate between screens } > <Text style={styles.buttonText}>Who is {characterDetails.name}?</Text> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#ebebeb" }, text: { color: "#101010", fontSize: 24, fontWeight: "bold" }, buttonContainer: { backgroundColor: "#3e78f4", borderRadius: 5, padding: 10, margin: 20 }, buttonText: { fontSize: 20, color: "#fff" } }); export default Home;
As we can see in the above code, I have added one button on the Home screen to navigate to next screen for this we have to get navigation from props as below
const { navigation } = props;
To navigate between screens
navigation.navigate("Detail");
2. Details.js
import React from "react"; import { StyleSheet, View, Text } from "react-native"; function Detail(props) { const { route } = props; const { item } = route.params; const { name, desc } = item; return ( <View style={styles.container}> <Text style={styles.text}>Detail Screen</Text> <View style={styles.card}> <Text style={styles.cardText}>Name: {name}</Text> <Text style={styles.cardText}>{desc}</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#ebebeb" }, text: { color: "#101010", fontSize: 24, fontWeight: "bold" }, card: { width: 350, height: 100, borderRadius: 10, backgroundColor: "#3e78f4", margin: 10, padding: 10, alignItems: "center" }, cardText: { fontSize: 18, color: "#FFFFFF", marginBottom: 5, textAlign: "center" } }); export default Detail;
4. Create stack navigator
Import the following components
import * as React from "react"; import { Text, View, Button } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import Home from "../screens/Home"; import Detail from "../screens/Detail"; const Stack = createStackNavigator();
We have to define screens inside Stack.navigator and add this Stack.Navigator inside parent NavigationContainer
1. MainStackNavigation.js
import * as React from "react"; import { Text, View, Button } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import Home from "../screens/Home"; import Detail from "../screens/Detail"; const Stack = createStackNavigator(); function MainStackNavigator() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home" screenOptions={{ gestureEnabled: true, //<--React-navigation 5.0 gesture enabled headerStyle: { backgroundColor: "#3e78f4" }, headerTitleStyle: { fontWeight: "bold" }, headerTintColor: "#FFFFFF" }} > <Stack.Screen name="Home" component={Home} options={{ title: "Home Screen" }} /> <Stack.Screen name="Detail" component={Detail} options={({ route }) => ({ title: route.params.item.name })} /> </Stack.Navigator> </NavigationContainer> ); } export default MainStackNavigator;
5. App.js
Simply define MainStackNavigation in App.js
import React from 'react'; import MainStackNavigator from './src/navigation/MainStackNavigator'; export default function App() { return <MainStackNavigator /> }
Note: Data transfer between screen is the same as previous versions of react-navigation
to start expo project use following command
expo start
6. How to use React-navigation 5.0 example