Skip to main content

Passing parameters

Now that we know how to create a stack navigator with some routes and navigate between those routes, let's see how we can pass data to routes when navigating to them.

To do this, implement two steps:

  • Pass parameters to the route by placing them in an object as the second parameter of the function navigation.navigate ('RouteName', {/ * parameters go here * /})

  • Read the parameters in the screen component: route.params

info

It is recommended that the parameters you pass in are JSON serializable. This way you can use persistence and your screen components have the correct contract to implement deep linking.

App.js
import * as React from 'react'
import { View, Button, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
const HomeScreen = ({ navigation }) => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here'
})
}}
/>
</View>
)
const DetailsScreen = ({ route }) => {
/* 2. Get the param */
const { itemId, otherParam } = route.params
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
</View>
)
}
const Stack = createStackNavigator()
const App = () => (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
)
export default App

Try this example on Snack

Payment#

Now you are on a stripped-down version of the site, after subscribing to Patreon, you will get full access to the training course, as well as access to our server's private channels in Discord.

Download our mobile application or get tested in our JavaScript telegram bot, and also subscribe to our news.

Become a Patron!

Sumerian school

Contributors โœจ#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

๐Ÿ“–๐Ÿ’ฒ

Become a Patron!