Passing Values Between Screens in React Native

With multiple screens (React Navigation, see the tab/drawer chapters), data often needs to travel from one screen to the next – e.g. a tapped list item whose details a detail screen should display. React Navigation solves this via route.params.

1. Description

When navigating, navigation.navigate('TargetScreen', { ... }) passes an object as the second argument. The target screen reads these values via the route prop (route.params) – no global state, no context needed for this simple case.

2. Short example

// Sending:
navigation.navigate('Detail', { productId: 42, name: 'Backpack' });

// Receiving in the detail screen:
function DetailScreen({ route }) {
  const { productId, name } = route.params;
  return <Text>{name} (#{productId})</Text>;
}

3. Complete project: a product list with a detail screen

npx create-expo-app screen-params-demo
cd screen-params-demo
npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

screens/ProductListScreen.js

import { FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';

const PRODUCTS = [
  { id: '1', name: 'Backpack 30L', price: 59.5, description: 'Waterproof hiking backpack.' },
  { id: '2', name: 'Rain Jacket', price: 74.0, description: 'Lightweight jacket for any weather.' },
  { id: '3', name: 'Hiking Boots', price: 89.99, description: 'Sturdy sole, ankle protection.' },
];

function ProductListScreen({ navigation }) {
  return (
    <FlatList
      contentContainerStyle={styles.list}
      data={PRODUCTS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={styles.row}
          onPress={() => navigation.navigate('Detail', item)}
        >
          <Text style={styles.name}>{item.name}</Text>
          <Text style={styles.price}>${item.price.toFixed(2)}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  list: { padding: 16 },
  row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  name: { fontSize: 16 },
  price: { fontSize: 16, fontWeight: 'bold' },
});

export default ProductListScreen;

screens/DetailScreen.js

import { View, Text, StyleSheet } from 'react-native';

function DetailScreen({ route }) {
  const { name, price, description } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.price}>${price.toFixed(2)}</Text>
      <Text style={styles.description}>{description}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 24 },
  name: { fontSize: 24, fontWeight: 'bold' },
  price: { fontSize: 18, color: '#2563eb', marginVertical: 8 },
  description: { fontSize: 16, color: '#374151' },
});

export default DetailScreen;

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ProductListScreen from './screens/ProductListScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Products" component={ProductListScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. Explanation

navigation.navigate('Detail', item) – the ENTIRE product object is passed as the params object, no manual field-by-field assembly needed.
route.params on the target screen is ONLY set when navigating WITH params – if the screen is reached another way (e.g. a direct tab switch), route.params can be undefined; real apps should guard against that with a fallback.
Passed values are a purely ONE-TIME snapshot at navigation time – if the original product later changes in the list, an already-open detail screen does NOT update automatically (unlike with shared context state).
For more deeply nested or truly global data (e.g. the logged-in user), React Context or a state management library is a better fit than navigation params, which are meant for SCREEN-local handoffs.

5. Outputs

Ausgabe

A list with three products (name on the left, price on the right). Tapping "Hiking Boots" opens the detail screen with a large title "Hiking Boots", a blue price "$89.99", and the description "Sturdy sole, ankle protection." below it; an automatic back arrow at the top left returns to the list.