How to Pass and Get Params to Route in React Native

React Native Params Tutorial; In this guide, we will explain how to set param to route in react native app and get route param in react native component. We will show you how to configure stack navigator in react native application using the react native navigation package.

Route parameters are commonly known as params, and these are named URL portions which are useful to capture the values defined at their place in the URL. In this guide, we will elaborate on how to set param and get the param to use on the screen using the react native navigation.

How to Create Navigation in React Native using React Native Navigation and Stack Navigator

  • Step 1: Set Up Expo CLI
  • Step 2: Install React Native Project
  • Step 3: Add React Native Navigation Package
  • Step 4: Create New Components
  • Step 5: Create Stack Navigation
  • Step 6: Set and Pass Param
  • Step 7: Get Route Params
  • Step 8: Run App in Device

Set Up Expo CLI in React Native

If you haven’t configured Expo CLI yet, run the provided command to install Node 12 LTS or greater version on your development machine.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Install React Native Project

If you haven’t created the react native app, make sure to use the given command to install the new react native app using expo cli.

expo init RnBlogProject

Add React Native Navigation Package

In this step, use the suggested command to install the react native navigation package. Also, install the other dependencies of react-native navigation.

npm install @react-navigation/native
npm install react-native-gesture-handler react-native-screens react-native-reanimated react-native-safe-area-context @react-native-community/masked-view

Next, use command to install the stack navigation library in react native app.

npm install @react-navigation/stack

Create New Components

Now, we need few screens to pass and get the route params, so create the components/ folder, inside this folder create the screen files.

Create and update given code in components/ProductScreen.js file.

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ProductScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Product Screen</Text>
      </View>
    );
  }
}

export default ProductScreen;

Create and insert the given code in components/ProductDetailScreen.js file.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class ProductDetailScreen extends Component {

  render() {

    const { pId, textParam } = this.props.route.params;

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Product Id: {pId}</Text>
         <Text>{textParam}</Text>

         <Button
            title="Product Screen"
            onPress={() => {
              this.props.navigation.navigate('ProductScreen');
            }}
          />         
      </View>
    );
  }
  
}

export default ProductDetailScreen;

Create Stack Navigation

In this step, we must set up the stack navigation using the react native navigation and stack navigator, import the screens, and use Stack.Navigator method.

Update the App.js file.

import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import ProductScreen from './components/ProductScreen';
import ProductDetailScreen from './components/ProductDetailScreen';


const Stack = createStackNavigator();

function StackRnRoutes() {
  return (
     <Stack.Navigator
        initialRouteName="ProductScreen"
        screenOptions={{
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: 'blue',
          },
          headerTintColor: '#fff',
          headerTitleStyle :{
            fontWeight: 'bold',
          },
        }}
      >
      <Stack.Screen 
        name="ProductScreen" 
        component={ProductScreen} 
        options={{ title: 'ProductScreen' }}
      />
      <Stack.Screen 
       name="ProductDetailScreen" 
       component={ProductDetailScreen} 
       options={{ title: 'Product Detail' }}
      />
    </Stack.Navigator>     
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <StackRnRoutes />
    </NavigationContainer>
  );
}

Set and Pass Param

It is easy to invoke the param; in the example below, we bind the two params, pId and textParam, to the navigation navigate method.

Add code in components/ProductScreen.js file.

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

class ProductScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button
            title="Product Detail"
            onPress={() => {
              this.props.navigation.navigate('ProductDetailScreen', {
                pId: 55599,
                textParam: 'I travel screen to screen',
              });
            }}
        />
      </View>
    );
  }
}

export default ProductScreen;

Get Route Params

In the product screen, we passed the params in the product details screen, and we will get the params.

Add code in components/ProductDetailScreen.js file.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

class ProductDetailScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Product Id: {pId}</Text>
         <Text>{textParam}</Text>

         <Button
            title="Product Screen"
            onPress={() => {
              this.props.navigation.navigate('ProductScreen');
            }}
          />         
      </View>
    );
  }
}

export default ProductDetailScreen;

Run App in Device

Lastly, we need to run the app on the device; first, install the Expo Client on your smartphone.

You may get the expo client either from Google Play Store or App Store.

Run either of the suggested command.

# npm
npm start

# yarn
yarn start

Now, on your browser or terminal screen, you must be seeing a QR code, you have to scan that QR code through your expo app.

Wait for some time while your app is being compiled. Ensure that your development machine and smartphone are on the same network.

How to Pass and Get Params to Route in React Native

Summary

React Native navigation offers handy features to navigate between screens; since mobile apps work on screens pattern, using react native navigation is useful with stack navigator. On top of that, we learned how to set and pass parameters in react native from one screen to another and get the params in react native screen.