Passing parameters between screens in React Native - Deep Dive

Overview - Passing parameters between screens

What is it?

Passing parameters between screens means sending information from one screen to another in a mobile app. This lets screens share data, like user choices or details, so the app feels connected. For example, tapping a list item can open a detail screen showing that item's info. Without this, screens would be isolated and unable to communicate.

Why it matters

Apps need to share data between screens to create smooth, interactive experiences. Without passing parameters, users would see empty or unrelated screens, making apps confusing and less useful. Passing parameters solves the problem of keeping context and user data consistent as they move through the app.

Where it fits

Before learning this, you should understand basic React Native components and navigation setup. After this, you can learn about advanced navigation patterns, state management, and data persistence to build richer apps.

Mental Model

Core Idea

Passing parameters between screens is like handing a note from one friend to another so they know what to talk about next.

Think of it like...

Imagine you and a friend are playing a game where you pass secret messages. Each message tells the next player what to do or what information to use. Passing parameters in an app works the same way: one screen sends a message (data) to the next screen so it knows what to show.

Screen A ──passes──> Parameters ──received by──> Screen B

┌─────────┐          ┌───────────────┐          ┌─────────┐
│ Screen A│─────────▶│ Parameters    │─────────▶│ Screen B│
└─────────┘          └───────────────┘          └─────────┘

Build-Up - 7 Steps

1

Foundation

Understanding screen navigation basics

Concept: Learn how to move from one screen to another using React Navigation.

In React Native, navigation libraries like React Navigation let you switch screens. You set up a navigator and define screens inside it. To move to another screen, you call navigation.navigate('ScreenName'). This changes the visible screen.

Result

You can tap a button and see a new screen appear.

Knowing how to navigate between screens is the foundation for passing data, because parameters travel during navigation.

2

Foundation

What are parameters in navigation?

Concept: Parameters are pieces of data sent along when navigating to a new screen.

When you call navigation.navigate, you can add a second argument: an object with key-value pairs. These pairs are parameters. For example, navigation.navigate('Details', {id: 5}) sends the id 5 to the Details screen.

Result

The next screen receives the parameters and can use them to show specific content.

Parameters let screens share context, making the app dynamic and responsive to user actions.

3

Intermediate

Accessing parameters on the target screen

🤔Before reading on: do you think parameters are accessed via props or a special hook? Commit to your answer.

Concept: Learn how the receiving screen reads the parameters passed to it.

In React Navigation, the target screen gets a route object as a prop. The parameters are inside route.params. For example, const {id} = route.params extracts the id parameter. You can then use this data to customize the screen.

Result

The screen shows content based on the passed parameters, like details for item id 5.

Understanding where parameters live in the route object helps you build screens that react to user input.

4

Intermediate

Passing multiple and optional parameters

🤔Before reading on: do you think all parameters must be passed every time? Commit to your answer.

Concept: You can send many parameters and handle cases when some are missing.

You can pass multiple parameters as an object: navigation.navigate('Profile', {name: 'Anna', age: 30}). On the receiving screen, check if parameters exist before using them to avoid errors. For example, const age = route.params?.age || 'unknown'.

Result

The screen adapts to whatever parameters it receives, showing defaults if needed.

Handling optional parameters prevents crashes and improves user experience.

5

Intermediate

Passing parameters back to previous screens

🤔Before reading on: do you think parameters can only flow forward? Commit to your answer.

Concept: Learn how to send data back when returning to a previous screen.

You can pass parameters back using navigation.navigate with a callback or by setting params on the previous screen. For example, navigation.navigate('Home', {updated: true}) sends data back. Another way is using navigation.goBack() and event listeners to update data.

Result

Previous screens update based on new information from later screens.

Two-way parameter passing enables interactive workflows like forms and edits.

6

Advanced

Using TypeScript for parameter safety

🤔Before reading on: do you think parameters are always safe to use without checks? Commit to your answer.

Concept: TypeScript helps catch errors by defining parameter types for each screen.

Define a type for your navigation params, like type RootStackParamList = { Details: {id: number}; Profile: {name: string; age?: number} }. Use this type with React Navigation to get autocomplete and error checking. This prevents bugs from missing or wrong parameter types.

Result

Your code is safer and easier to maintain with clear parameter contracts.

Type safety reduces runtime errors and improves developer confidence.

7

Expert

Performance and pitfalls of parameter passing

🤔Before reading on: do you think passing large objects as parameters is always fine? Commit to your answer.

Concept: Understand the limits and best practices for passing parameters efficiently.

Passing large or complex objects can slow navigation and cause bugs. Instead, pass IDs or keys and fetch data inside the target screen. Also, avoid passing functions or non-serializable data. Use global state or context for shared data when needed.

Result

Your app stays fast and stable, avoiding navigation glitches.

Knowing when and what to pass prevents performance issues and hard-to-debug errors.

Under the Hood

React Navigation manages a stack of screens internally. When you navigate, it pushes a new screen onto the stack and stores parameters in the route object. The route object is passed as a prop to the screen component. This allows the screen to access parameters synchronously during rendering. Parameters are stored in memory and not persisted unless you implement storage.

Why designed this way?

This design keeps navigation simple and fast by passing only necessary data during screen transitions. It avoids global state complexity and keeps screens loosely coupled. Alternatives like global stores exist but add overhead and complexity. Passing parameters directly fits the common use case of contextual data sharing.

┌───────────────┐       navigation.navigate('ScreenB', params)       ┌───────────────┐
│ Screen A      │────────────────────────────────────────────────────▶│ Screen B      │
│ (current)     │                                                    │ (new)         │
│ route.params  │                                                    │ route.params  │
└───────────────┘                                                    └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think parameters passed to a screen are automatically saved if you close and reopen the app? Commit to yes or no.

Common Belief: Parameters passed during navigation are saved permanently and available after app restarts.

Reality: Parameters exist only in memory during navigation and are lost if the app closes or the screen unmounts.

Why it matters: Relying on parameters for permanent data causes bugs where data disappears unexpectedly, confusing users.

Quick: do you think you can pass functions as parameters between screens? Commit to yes or no.

Common Belief: You can pass functions as parameters to call them on the next screen.

Reality: Passing functions as parameters is not supported and can cause errors because navigation parameters must be serializable.

Why it matters: Trying to pass functions leads to crashes or silent failures, breaking app flow.

Quick: do you think parameters are merged automatically when navigating multiple times to the same screen? Commit to yes or no.

Common Belief: Parameters merge automatically, so new navigation calls add or update existing parameters.

Reality: Each navigation call replaces parameters for that screen; old parameters are not merged automatically.

Why it matters: Assuming merging causes unexpected data loss or stale data display.

Quick: do you think parameters can be accessed directly from props without route? Commit to yes or no.

Common Belief: Parameters are available directly as props on the screen component.

Reality: Parameters are inside the route.params object, not directly on props.

Why it matters: Accessing parameters incorrectly causes undefined errors and confusion.

Expert Zone

1

Passing only IDs and fetching data on the target screen improves performance and keeps navigation lightweight.

2

Using deep linking with parameters allows apps to open specific screens with context from outside the app.

3

React Navigation's param list typing with TypeScript prevents subtle bugs in large apps with many screens.

When NOT to use

Avoid passing large or complex objects as parameters; instead, use global state management tools like Redux or Context API for shared data. Also, do not use parameters for permanent storage; use persistent storage solutions instead.

Production Patterns

In production apps, parameters are often minimal identifiers. Screens fetch fresh data on mount to ensure accuracy. Parameters are validated and sanitized to prevent crashes. Navigation stacks are managed carefully to avoid stale parameters after deep linking or back navigation.

Connections

State Management

complements

Understanding parameter passing helps decide when to use local navigation data versus global state for sharing information.

Web URL Query Parameters

similar pattern

Passing parameters between screens in mobile apps is like using query parameters in web URLs to share context between pages.

Human Communication

analogous process

Just as people pass notes or messages to share information, screens pass parameters to communicate context and intent.

Common Pitfalls

#1 Passing large objects as parameters causing slow navigation and crashes.

Wrong approach:

navigation.navigate('Details', {item: bigObjectWithManyFields})

Correct approach:

navigation.navigate('Details', {itemId: bigObjectWithManyFields.id})

Root cause:

Misunderstanding that parameters should be small and serializable; large objects increase memory and processing overhead.

#2 Accessing parameters directly from props instead of route.params causing undefined errors.

Wrong approach:

const id = props.id; // wrong

Correct approach:

const id = route.params.id; // correct

Root cause:

Confusing the structure of navigation props and where parameters are stored.

#3 Assuming parameters persist after app restart leading to missing data.

Wrong approach:

Relying on route.params to restore screen state after app closes.

Correct approach:

Use persistent storage like AsyncStorage or databases to save important data.

Root cause:

Not knowing that navigation parameters exist only during runtime and are not saved.

Key Takeaways

Passing parameters between screens lets apps share data and context, making navigation meaningful and dynamic.

Parameters are passed as objects during navigation and accessed via route.params on the target screen.

Always pass small, serializable data like IDs, not large objects or functions, to keep navigation efficient.

Use TypeScript or careful checks to avoid errors from missing or wrong parameters.

Parameters exist only during runtime and are not saved permanently; use storage for persistent data.