← Back to Chapters

Passing Data Between Screens

? Passing Data Between Screens

? Quick Overview

Passing data between screens is a common requirement in React Native applications. Using navigation libraries like React Navigation, data can be sent from one screen to another using route parameters.

? Key Concepts

  • Navigation stack
  • Route parameters
  • props and route objects
  • One-way data flow

? Syntax / Theory

In React Navigation, data is passed while navigating using the navigate function. The target screen receives this data through the route.params object.

? Code Example(s)

? View Code Example
// Navigating and passing data to another screen
navigation.navigate("Profile", {
username: "Meghraj",
age: 25
});
? View Code Example
// Receiving passed data in target screen
const { username, age } = route.params;

? Live Output / Explanation

The Profile screen will display the username Meghraj and age 25 that were sent from the previous screen.

? Interactive Example

Select a user from the list below to "navigate" to their profile. This simulates passing the User ID and Name to the next screen via route.params.

9:41 ? 100%
Home Screen

Select a user to view details:

? Use Cases

  • User profile details
  • Product details screens
  • Passing IDs for API calls
  • Multi-step forms

✅ Tips & Best Practices

  • Always validate route parameters
  • Keep passed data minimal
  • Use global state for complex sharing

? Try It Yourself

  • Pass an object instead of primitive values
  • Send data back using navigation.goBack()
  • Combine params with API fetching