Navigation parameters allow us to pass data from one screen to another screen in a React Native application. This is useful when the destination screen needs information about the item, user, product, course or record selected on the previous screen.
For example, when a user selects a course, we may pass the course ID to the Course Details screen.
Courses
↓
Select Course
↓
Course Details
↓
Course ID = 101navigation.navigate() and accessed through the
destination screen's route.params.
Navigation parameters are values passed from one screen to another during navigation.
navigation.navigate(
'Profile',
{
userId: 101
}
);
Here, userId is a navigation parameter.
Parameters are useful when the next screen needs information from the current screen.
navigation.navigate(
'Profile',
{
userId: 101
}
);The first argument is the route name and the second argument contains the parameters.
navigation.navigate(
'Profile',
{
name: 'Rahul'
}
);
The destination screen can receive the string value
Rahul.
navigation.navigate(
'Details',
{
productId: 101
}
);Numbers can be used for IDs, quantities, prices and other numeric values.
navigation.navigate(
'Profile',
{
userId: 101,
name: 'Rahul',
age: 22
}
);Multiple related values can be passed together in the parameter object.
The destination screen receives a route object.
Parameters can be accessed using route.params.
function ProfileScreen({
route
}) {
console.log(
route.params
);
}function ProfileScreen({
route
}) {
const name =
route.params.name;
return (
<Text>
Name: {name}
</Text>
);
}
The name parameter is read from
route.params.
Instead of repeatedly writing route.params, we can
destructure the values.
function ProfileScreen({
route
}) {
const {
userId,
name
} = route.params;
return (
<View>
<Text>
ID: {userId}
</Text>
<Text>
Name: {name}
</Text>
</View>
);
}navigation.navigate(
'Details',
{
isStudent: true
}
);Boolean values can be used when the destination screen needs a true/false value.
navigation.navigate(
'Courses',
{
courses: [
'React Native',
'JavaScript',
'Python'
]
}
);An array can be passed when the destination screen needs a collection of values.
navigation.navigate(
'ProductDetails',
{
product: {
id: 101,
name: 'Laptop',
price: 50000
}
}
);Objects can contain several related properties.
function ProductDetails({
route
}) {
const {
product
} = route.params;
return (
<View>
<Text>
{product.name}
</Text>
<Text>
₹{product.price}
</Text>
</View>
);
}Course applications commonly pass a course ID to the details screen.
navigation.navigate(
'CourseDetails',
{
courseId: 25
}
);The Course Details screen can use this ID to display the selected course.
navigation.navigate(
'StudentProfile',
{
studentId: 1001
}
);A student profile screen can receive the student ID and use it to load the appropriate student information.
<FlatList
data={courses}
keyExtractor={
item => item.id.toString()
}
renderItem={({ item }) => (
<Pressable
onPress={() =>
navigation.navigate(
'CourseDetails',
{
courseId: item.id
}
)
}
>
<Text>
{item.name}
</Text>
</Pressable>
)}
/>This pattern is commonly used when selecting an item from a list.
<Pressable
onPress={() =>
navigation.navigate(
'Profile',
{
userId: 101
}
)
}
>
<Text>
Open Profile
</Text>
</Pressable>Pressable is useful for creating custom navigation buttons.
Sometimes a screen may receive a parameter only in certain situations. Before using it, the application should account for the possibility that it is unavailable.
const name =
route.params?.name;Optional chaining can prevent an error when the parameter object or property is missing.
const {
name = 'Guest'
} = route.params || {};A default value can be used when the parameter is not available.
A screen may need to update its route parameters in certain navigation flows.
navigation.setParams({
title: 'Updated Profile'
});This can update parameters associated with the current route.
<Stack.Screen
name="Details"
component={DetailsScreen}
/>The destination route can receive parameters when navigating to this registered screen.
navigation.navigate(
'Details',
{
productId: 101
}
);Navigation parameters can also be used when moving between screens managed by tab navigation.
navigation.navigate(
'Profile',
{
userId: 101
}
);The exact navigation structure determines how nested navigators should be addressed.
A drawer-managed screen can also receive navigation parameters.
navigation.navigate(
'Profile',
{
userId: 101
}
);The Profile screen can read the value from its route parameters.
A common real-world pattern is to pass an ID and use that ID to load data from an API.
useEffect(() => {
const loadCourse = async () => {
const response =
await fetch(
`https://example.com/api/courses/${courseId}`
);
const data =
await response.json();
setCourse(data);
};
loadCourse();
}, [courseId]);
Here, courseId can come from the navigation parameters.
Parameters are especially useful for detail screens.
Course List
↓
Course ID: 25
↓
Course Details
↓
Load Course 25The list screen does not need to send all course information if the details screen can load the record using its ID.
import React from 'react';
import {
View,
Text,
Button
} from 'react-native';
import {
NavigationContainer
} from '@react-navigation/native';
import {
createNativeStackNavigator
} from '@react-navigation/native-stack';
const Stack =
createNativeStackNavigator();
function HomeScreen({
navigation
}) {
return (
<View>
<Text>
Home Screen
</Text>
<Button
title="Open Student"
onPress={() =>
navigation.navigate(
'Student',
{
studentId: 101,
name: 'Rahul'
}
)
}
/>
</View>
);
}
function StudentScreen({
navigation,
route
}) {
const {
studentId,
name
} = route.params;
return (
<View>
<Text>
Student Profile
</Text>
<Text>
ID: {studentId}
</Text>
<Text>
Name: {name}
</Text>
<Button
title="Go Back"
onPress={() =>
navigation.goBack()
}
/>
</View>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Student"
component={StudentScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
}| Concept | Purpose |
|---|---|
| navigation.navigate() | Navigate to another screen and optionally pass parameters |
| route | Provides information about the current route |
| route.params | Contains parameters passed to the route |
| Parameter Object | Stores values passed to the destination screen |
| studentId | Example of an identifier parameter |
| productId | Example of a product identifier |
| route.params?.name | Safely accesses an optional parameter |
| navigation.setParams() | Updates parameters for the current route |
Select an Item
↓
Get Item ID
↓
Call navigation.navigate()
↓
Pass Parameter Object
↓
Open Destination Screen
↓
Read route.params
↓
Use Parameter
↓
Load Additional Data if Required
↓
Display Details
↓
Navigate BackNavigation parameters are essential when screens need to exchange specific information. A common pattern is to pass an ID from a list screen to a details screen and then use that ID to load the required data.
navigation.navigate().route.params.navigation.setParams() can update route parameters.Question: Where are navigation parameters commonly accessed in the destination screen?