Why Passing parameters between screens in React Native? - Purpose & Use Cases

The Big Idea

What if your app could instantly show the right info on every screen without confusion or errors?

The Scenario

Imagine you have a mobile app with multiple pages, like a shopping app. You want to show details of a product when a user taps on it. Without passing parameters, you would have to recreate or guess which product to show on the details page.

The Problem

Manually trying to share data between screens means repeating code, risking mistakes, and making your app confusing. You might show wrong info or crash the app because the details page doesn't know what to display.

The Solution

Passing parameters between screens lets you send exactly the data you want from one page to another. It's like handing a note with the product info directly to the details page, so it can show the right content easily and safely.

Before vs After

✗ Before

navigate('Details'); // no info passed
// Details screen guesses what to show

✓ After

navigate('Details', { productId: 42 });
// Details screen receives productId and shows correct info

What It Enables

This lets your app flow smoothly, showing personalized content on each screen based on user actions.

Real Life Example

In a messaging app, when you tap a contact, passing their ID to the chat screen lets you see your conversation with them instantly.

Key Takeaways

Passing parameters helps screens share data clearly and safely.

It prevents errors and makes your app easier to build and maintain.

It creates a smooth user experience by showing relevant info on each screen.

Practice

1. What is the correct way to pass a parameter named userId with value 42 when navigating to a screen called Profile in React Native?

easy

A. navigation.move('Profile', { userId })

B. navigation.goTo('Profile', userId=42)

C. navigation.push('Profile', userId=42)

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

Solution

1. Step 1: Understand navigation method

   To pass parameters, use navigation.navigate with the screen name and an object of params.

2. Step 2: Check parameter syntax

   The parameter must be inside an object like { userId: 42 } as the second argument.

3. Final Answer:

   navigation.navigate('Profile', { userId: 42 }) -> Option D

4. Quick Check:

   Pass params with navigate(screen, { params }) [OK]

Hint: Use navigate with screen name and params object [OK]

Common Mistakes:

• Using wrong method like goTo or move
• Passing params outside an object
• Forgetting to include params argument

2. Which of the following is the correct syntax to access a parameter named itemId inside a React Native screen component?

easy

A. const itemId = props.navigation.params.itemId;

B. const itemId = navigation.route.params.itemId;

C. const itemId = route.params.itemId;

D. const itemId = params.route.itemId;

Solution

1. Step 1: Identify how params are accessed

   In React Navigation, the screen receives a route prop containing params.

2. Step 2: Use correct property chain

   Access the parameter with route.params.itemId.

3. Final Answer:

   const itemId = route.params.itemId; -> Option C

4. Quick Check:

   Use route.params to get passed parameters [OK]

Hint: Use route.params to access passed data [OK]

Common Mistakes:

• Trying to get params from navigation instead of route
• Incorrect property order like navigation.route.params
• Using props.navigation.params which is invalid

3. Given this code snippet in a React Native app:

navigation.navigate('Details', { productId: 101 });

// In Details screen component:
const Details = ({ route }) => {
  return {route.params.productId};
};

What will be displayed on the screen?

medium

A. productId

B. 101

C. route.params.productId

D. undefined

Solution

1. Step 1: Understand parameter passing

   The productId with value 101 is passed to the Details screen via navigation.navigate.

2. Step 2: Check how parameter is used in Details

   The component accesses route.params.productId and displays it inside a Text component.

3. Final Answer:

   101 -> Option B

4. Quick Check:

   Passed param value is displayed [OK]

Hint: route.params contains passed values to display [OK]

Common Mistakes:

• Expecting param name string instead of value
• Using undefined or wrong property to access param
• Not passing params correctly in navigate

4. What is wrong with this code snippet that tries to pass a parameter name to a screen called Welcome?

navigation.navigate('Welcome', name: 'Alice');

medium

A. Parameters must be passed inside an object as the second argument.

B. The screen name should be lowercase.

C. The parameter name cannot be a string.

D. navigate method does not accept parameters.

Solution

1. Step 1: Check navigate method syntax

   The second argument to navigate must be an object containing parameters.

2. Step 2: Identify error in parameter passing

   The code passes name: 'Alice' without wrapping it in curly braces, which is invalid syntax.

3. Final Answer:

   Parameters must be passed inside an object as the second argument. -> Option A

4. Quick Check:

   Params go inside an object in navigate [OK]

Hint: Always wrap params in an object when navigating [OK]

Common Mistakes:

• Passing params without curly braces
• Using wrong syntax for navigate arguments
• Assuming screen names must be lowercase

5. You want to navigate from a Home screen to a Profile screen and pass both userId and userName. How should you write the navigation call to pass these parameters correctly?

hard

A. navigation.navigate('Profile', { userId: 5, userName: 'John' })

B. navigation.navigate('Profile', userId=5, userName='John')

C. navigation.navigate('Profile', ['userId', 5, 'userName', 'John'])

D. navigation.navigate('Profile', { 'userId': 5 }, { 'userName': 'John' })

Solution

1. Step 1: Understand parameter object structure

   Multiple parameters must be passed inside a single object with key-value pairs.

2. Step 2: Check each option's syntax

   navigation.navigate('Profile', { userId: 5, userName: 'John' }) correctly passes both userId and userName inside one object.

3. Final Answer:

   navigation.navigate('Profile', { userId: 5, userName: 'John' }) -> Option A

4. Quick Check:

   Pass multiple params inside one object [OK]

Hint: Put all params inside one object in navigate call [OK]

Common Mistakes:

• Passing params as separate arguments
• Using array instead of object for params
• Splitting params into multiple objects