params
- React Native course
- Beginner
- Lesson 91/116
- 5 min
Learn to pass data between screens with params.
Passing data with params
To carry data when navigating you pass an object as the second parameter to navigate: navigation.navigate('Details', { itemId: 42 }). This object is read from the target screen's route.params property.
In the target screen you destructure the params: const { itemId } = route.params;. If the param is missing the app may crash; using route.params?.itemId or a default value is safer. You must also receive the route prop from the component parameters.
Practice Your turn: read and display params
Have the DetailsScreen component receive the route prop. Destructure itemId from route.params and display it inside a <Text>.
Starter code
function DetailsScreen({ route }) {
// get the parameter from params
return (
<View>
{/* show the parameter in a Text */}
</View>
);
}Sample solution
function DetailsScreen({ route }) {
const { itemId } = route.params;
return (
<View>
<Text>Item no: {itemId}</Text>
</View>
);
}Default params
Sometimes a screen can be opened without params. In that case route.params is undefined and destructuring directly crashes the app. The safe approach: const { itemId = 0 } = route.params ?? {};.
Here ?? {} uses an empty object when params are missing; = 0 provides a default value when itemId is absent. This way your app works in every case. This pattern is standard for screens with optional params.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Fill in the blank: destructure params
const { itemId } = route.____;const { itemId } = route.params;Explanation: Passed params live in route.params.
2 How do you pass itemId to the Details screen?
navigation.navigate('Details', ?)- navigation.navigate('Details', 'itemId: 42')
- navigation.navigate('Details', { itemId: 42 }) Correct answer
- navigation.navigate('Details', (itemId) => 42)
- navigation.navigate('Details', [42])
Explanation: params are passed as an object.
3 Match: concept and description
| Term | Meaning |
|---|---|
route.params |
passed data |
navigate |
screen opening |
itemId |
param key |