In this section, we will learn how to pass parameters to routes in React Navigation. This is a crucial feature for creating dynamic and interactive applications where different screens need to communicate with each other.

1. Navigation Parameters: Data passed between screens.
2. Route Parameters: Parameters specific to a route.
3. Navigation Prop: A prop automatically passed to each screen component, containing methods and properties for navigation.

To pass parameters to a route, you use the navigate method provided by the navigation prop. Here’s a basic example:

In this example, when the button is pressed, the navigate method is called with the name of the route ('Details') and an object containing the parameters ({ itemId: 86, otherParam: 'anything you want here' }).

To access the parameters in the target route, you use the route prop. Here’s how you can do it:

In this example, route.params contains the parameters passed from the HomeScreen.

Let’s create a simple app with two screens: HomeScreen and DetailsScreen. We will pass parameters from HomeScreen to DetailsScreen.

1. Install React Navigation:

   npm install @react-navigation/native
   npm install @react-navigation/stack
   npm install react-native-screens react-native-safe-area-context
   

2. Set Up Navigation:

   // App.js
   import * as React from 'react';
   import { NavigationContainer } from '@react-navigation/native';
   import { createStackNavigator } from '@react-navigation/stack';
   import HomeScreen from './HomeScreen';
   import DetailsScreen from './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;
   

3. Create HomeScreen:

   // HomeScreen.js
   import React from 'react';
   import { Button, View, Text } from 'react-native';
   
   const HomeScreen = ({ navigation }) => {
     return (
       <View>
         <Text>Home Screen</Text>
         <Button
           title="Go to Details"
           onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
         />
       </View>
     );
   };
   
   export default HomeScreen;
   

4. Create DetailsScreen:

   // DetailsScreen.js
   import React from 'react';
   import { View, Text } from 'react-native';
   
   const DetailsScreen = ({ route, navigation }) => {
     const { itemId, otherParam } = route.params;
   
     return (
       <View>
         <Text>Details Screen</Text>
         <Text>Item ID: {itemId}</Text>
         <Text>Other Param: {otherParam}</Text>
       </View>
     );
   };
   
   export default DetailsScreen;
   

Modify the HomeScreen to pass an additional parameter called description to the DetailsScreen. Display this parameter in the DetailsScreen.

Solution:

Modify the DetailsScreen to include a button that navigates back to the HomeScreen and passes a parameter called message with the value "Returned from Details".

Solution:

In this section, we learned how to pass parameters between routes in React Navigation. We covered the basics of passing and accessing parameters and implemented a practical example to solidify our understanding. This knowledge is essential for creating dynamic and interactive applications where different screens need to communicate with each other. In the next module, we will explore networking and data handling in React Native.