Using React Navigation to Pass Params

React Navigation is a JavaScript library that allows you implement screen navigation features in a React Native app. It has become the conventional method for configuring both simple and complex React Native mobile apps.

Using React Navigation, each screen component in your app automatically gains access to a route and navigation prop. The route prop contains information about the current route in the component hierarchy. The navigation prop deals with dispatching navigation actions to other screen components.

This article will cover the React Navigation library’s route and navigation prop, its elements, and how to use the .navigate function contained in the navigation prop to pass parameters(params) when navigating between different app screens.

Prerequisites

This article assumes that you have basic knowledge of React Native and how to properly set up a stack navigator using the React Navigation library.

You can brush up on both topics by visiting their official documentation:

• React Native basics
• Setting up the stack navigator

Passing Params

navigation.navigate( )

The navigation prop provided by the React Navigation stack navigator is an object holding various functions for dispatching specific actions. One of them is the .navigate function, which is used to navigate and pass param data successively to other screens in your app.

Although the navigation prop is automatically provided, you will need to receive it as an argument on each screen component defined in the stack navigator to access its functions. Then, by simply calling it like so, navigation.navigate( ) you can pass in a screen route name to navigate to and a param object to carry to the route.

import { Button, View } from "react-native";
import React from "react";

const HomeScreen = (props) => {
  return (
    <View>
      <Button
        title="Button"
        onPress={() => props.navigation.navigate("ScreenRouteName", {params})}
      />
    </View>
  );
};

export default HomeScreen;

Using 2015 ES6 Javascript syntax, you can destructure the props object to grab just the navigation prop. As that is the only prop object necessary here.

//Your code will then look like this 
const HomeScreen = ({navigation}) => {
        console.log(navigation);
    ...
    onPress={() => navigation.navigate("ScreenRouteName", {params})}
    ...
};

If you console console.log(navigation), you can see all the underlying functions available in the navigation prop object.

The navigation prop is only provided to components defined inside the stack navigator wrapper in a React Native app. This means any child or nested components you create will not have access to the navigation prop. So, what do you do when a child component needs navigation features?

You can import the useNavigation hook provided by React Navigation version 6.0 into such a child component, and assign it to a constant. Then call that constant in the onPress prop with .navigate( )

Here the constant is named navigation because that makes sense and avoids confusion.

import { View, Button } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const NavigationButton = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        title ="Button" 
        onPress={() => navigation.navigate("screenRouteName", {params})} 
      />
    </View>
  );
};

export default NavigationButton;

Receiving Params

After passing a param, the associated component screen will be ready to receive it. As previously stated, the route param automatically provided to each screen in the stack navigator holds some information about the current component screen. It contains a params object that provides access to all the params supplied to the component.

So to read the params available, all you need to do is receive this route prop as a component argument.

//HomeScreen
import { View, Text } from "react-native";
import React from "react";

const HomeScreen = ({route}) => {

//ES6 object destructuring
const {Param Name}= route.params;

  return (
    <View>
      <Text>{Param Name}</Text>
    </View>
  );
};

export default HomeScreen;

It's important to remember the sort of data passed as params. It should only be data configuring what would be rendered on the screen. For instance, in a user authentication flow, a user ID would ideally be passed as a param to decide which user’s data your app would show.

navigation.setParams( )

Another function nested in the navigation prop object is the setParams function. This is helpful if you need to update a screen's received parameter. Just like you would update a components state with the useState hook, the setParams function shallow merges the passed params with the current one to return a new result.

//HomeScreen
import { View, Button } from "react-native";
import React from "react";

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="SecondScreen"
        onPress={() => navigation.navigate("SecondScreen", {text: "hello"})}
      />
    </View>
  );
};

export default HomeScreen;

//SecondScreen
import { Text, View, Button } from "react-native";
import React from "react";

const SecondScreen = ({ route, navigation }) => {
  const {text} = route.params;
  return (
    <View>
      <Text style={{ fontSize: 30 }}>{text} World!</Text>
      <Button
        title="change text"
    //Calling setParams
        onPress={() => navigation.setParams({text: "hey"})}
      />
    </View>
  );
};

export default SecondScreen;

By calling navigation.setParams( ), you change the received text param:

Conclusion

In this post, you learned about the route and navigation props provided to a screen component by the React Navigation library. You also learned how to pass params to a route screen using the navigation prop and how to reach into the route prop to read the param data of the current route screen. Lastly, you learned how to use the set params function to change the current passed param in a component.

That concludes this article!