Passing parameters between screens in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Passing parameters with React Navigation

What will be displayed on the second screen when navigating with this code snippet?

React Native

navigation.navigate('Details', { itemId: 42, message: 'Hello' });

// On Details screen:
const { itemId, message } = route.params;
return <Text>{`ID: ${itemId}, Msg: ${message}`}</Text>;

A ID: 42, Msg: Hello

B ID: 42, Msg: undefined

C ID: undefined, Msg: undefined

D ID: Hello, Msg: 42

💡 Hint

Check how parameters are passed and accessed via route.params.

The parameters passed in navigation.navigate are accessible in the target screen via route.params. Here, itemId is 42 and message is 'Hello', so the text shows both correctly.

📝 Syntax

intermediate

Correct way to access route parameters

Which option correctly accesses the parameter 'userName' passed to a screen?

React Native

navigation.navigate('Profile', { userName: 'Alice' });

A const user = props.navigation.userName;

B const user = props.route.params.userName;

C const user = route.params.userName;

D const user = navigation.params.userName;

💡 Hint

Parameters are accessed from route.params, not navigation or props.navigation.

In React Navigation, the route object contains params. So route.params.userName is the correct way to get the parameter.

❓ lifecycle

advanced

Parameter update on screen focus

If a screen receives parameters and you want to update UI when parameters change after navigation, which React hook is best to use?

A componentDidMount lifecycle method

B useState without dependencies

C useLayoutEffect without dependencies

D useEffect with route.params as dependency

💡 Hint

Think about reacting to changes in parameters.

useEffect with route.params as dependency runs when parameters change, allowing UI update. componentDidMount runs only once, so it won't detect changes.

❓ navigation

advanced

Passing parameters back to previous screen

How can you pass data back to the previous screen after navigating back?

A Use navigation.navigate with params on the previous screen

B Use navigation.goBack() and a callback function passed as a param

C Use global variables to share data between screens

D Use route.params to send data back automatically

💡 Hint

Passing data back usually involves callbacks or events, not just params.

You can pass a callback function as a parameter when navigating to a screen. When going back, call that function with data to send it back.

🔧 Debug

expert

Why does parameter not update on screen?

Given this code, why does the displayed parameter not update when navigating back with new params? Screen A: navigation.navigate('ScreenB', { count: 1 }); Screen B: const { count } = route.params; return {count}; Later, Screen A navigates again: navigation.navigate('ScreenB', { count: 2 });

A Screen B is already mounted, so params do not update automatically

B route.params is immutable and cannot change after first render

C navigation.navigate does not accept parameters

D Text component cannot display numbers

💡 Hint

Think about screen mounting and parameter updates in navigation stacks.

If Screen B is already mounted, navigating to it again does not remount it, so route.params do not update automatically. You need to listen to focus events or use hooks to update.

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