Passing parameters between screens in React Native

Introduction

Passing parameters between screens lets you send information from one screen to another. This helps screens show different content based on what you send.

You want to show details about a selected item on a new screen.

You need to send user input from one screen to another for processing.

You want to pass settings or preferences between screens.

You want to navigate to a screen and show different content based on where you came from.

Syntax

React Native

navigation.navigate('ScreenName', { paramName: paramValue })

// To read the parameter in the target screen:
const { paramName } = route.params;

Use navigation.navigate to move to another screen and send parameters as an object.

In the receiving screen, use route.params to access the parameters.

Examples

Sends a userId parameter with value 42 to the Profile screen.

React Native

navigation.navigate('Profile', { userId: 42 })

Reads the userId parameter in the Profile screen and logs it.

React Native

const { userId } = route.params;
console.log(userId);

Sample App

This app has two screens: Home and Details. When you press the button on Home, it sends a message to Details. Details shows that message on screen.

React Native

import React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { message: 'Hello from Home!' })}
      />
    </View>
  );
}

function DetailsScreen({ route }) {
  const { message } = route.params;
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>{message}</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Important Notes

Always check if route.params exists before using it to avoid errors.

Parameters can be any data type: strings, numbers, objects, or arrays.

Use descriptive parameter names to keep your code clear.

Summary

Use navigation.navigate('Screen', { params }) to send data between screens.

Access sent data in the target screen with route.params.

This helps screens show different content based on passed information.