Passing Params With React Navigation

How to pass parameters with route prop in React-Navigation 5.x

I recently published an article on how to set up a basic navigator using the react-navigation 5.x library. React-Navigation is a fantastic way to add navigtion to a React-Native applicaiton. It allows us to safely travel between screens and keep a history if where we were before. However, in any application there will be a time when we will need to also pass information form one screen to the next. This becomes especially important when that information refers to information either from state, or from an API. In this article I will be discussing how to pass information using routes.

A quick caveat: To speed things up I am going to use the code from my previous blog post and I am not going to worry about state management at this time.

Snipets from “Using React Navigation 5x”

// App.js
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import HomeScreen from './src/screens/HomeScreen
import FirstScreen from './src/screens/FirstScreen'
import SecondScreen from './src/screens/SecondScreen
const Stack = createStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          component={HomeScreen}
          name="Home"
        />
        <Stack.Screen 
          component={FirstScreen}
          name="First"
        />
        <Stack.Screen 
          component={SecondScreen}
          name="Second"
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}
...
//HomeScreen
import React from 'react'
import { View, Button } from 'react-native'
const HomeScreen = ({navigation}) => {
  return (
    <View>
      <Button
        title='First'
        onPress={() => navigation.navigate("First")}
      />
      <Button
        title='Second'
        onPress={() => navigation.navigate("Second")}
      />
    </View>
  )
}
export default HomeScreen
...
// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = () => {
  return (
    <View>
      <Text> First Screen </Text>
    </View>
  )
}export default FirstScreenconst styles = StyleSheet.create({})
...
//Second Screen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'const 
SecondScreen = () => {
  return (
    <View>
      <Text> Second Screen </Text>
    </View>
  )
}
export default SecondScreenconst styles = StyleSheet.create({})

What is the Route Prop?

The route prop is provided to us through the ‘react-navigation’ library. Every screen in our appicaiton will have access to this prop automatically. When passed to any screen it has access to several pieces of information about the current screen:

key - key of the screen. Created automatically or added while navigating to this screen.
name - name of the screen. Defined i navigator component hierarchy.
params -  set of params which is defined while navigating.

Or objective will be to pass a param, which can be named

How to create params?

To create our params we are going to pass a second argument to both the navigation.navigate calls in the HomeScreen component:

import React from 'react'
import { View, Button } from 'react-native'
const HomeScreen = ({navigation}) => {
  return (
    <View>
      <Button
        title='First'
        onPress={() => navigation.navigate("First", {text: "First"})}
      />
      <Button
        title='Second'
        onPress={() => navigation.navigate("Second",  {text: "Second"})}
      />
    </View>
  )
}
export default HomeScreen

This second arguemnet will be an object with a key called whatever we want (in this case I am using “text”) and the value we want to pass with it (in this case “first” or “second.” That is all we need to do to create our params.

Accessing Params in our Screens

Now that we have created some params we can now call on them to inside of our First and Second screen components to do so we will destructure the route prop in the initaliziation of our various screens:

...
// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = ({route}) => {
  return (
    <View>
      <Text> First Screen </Text>
    </View>
  )
}export default FirstScreenconst styles = StyleSheet.create({})
...
//Second Screen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'const
SecondScreen = ({route}) => {
  return (
    <View>
      <Text> Second Screen </Text>
    </View>
  )
}
export default SecondScreenconst styles = StyleSheet.create({})

Now if we can console log our route prop, our route params and then our route params text:

// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = ({route}) => {
  console.log(route)
  console.log(route.params)
  console.log(route.params.text)
  return (
    <View>
      <Text> First Screen </Text>
    </View>
  )
}
export default FirstScreenconst styles = StyleSheet.create({})

Once we navigate to our First Screen we will see:

I am currently using the expo web browser extension here. Most console logs will render to the terminal.

Rendering our Route Params

Now with a slight change to our First and second screens we can render our params:

...
// FirstScreen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
const FirstScreen = ({route}) => {
return (
    <View>
      <Text> {route.params.text} Screen </Text>
    </View>
  )
}export default FirstScreenconst styles = StyleSheet.create({})
...
//Second Screen
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'const
SecondScreen = ({route}) => {
  return (
    <View>
      <Text> {route.params.text} Screen </Text>
    </View>
  )
}
export default SecondScreenconst styles = StyleSheet.create({})

With this we are still rendering the strings First and Second but they are coming from our prarms instead:

Conclusion

With this we have now successfully passed our params and rendered them on to the screen. The screen in this case will not look any different, but the route params is a great way to pass information from one screen to another epsecially information realted to state, or from an api. Thanks for reading. Happy Coding!