Passing Params With React Navigation

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

Kenny Marks
Jul 5, 2020 · 4 min read
Image for post
Image for post

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.jsimport { 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:

// FirstScreenimport 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:

Image for post
Image for post
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:

Image for post
Image for post

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!

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store