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.