Passing parameters between screens in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to navigate to the Details screen with a parameter.

React Native

navigation.navigate('Details', { userId: [1] });

Drag options to blanks, or click blank then click option'

A'42'

B42

CuserId

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the parameter without quotes causing a reference error.

Using a variable name that is not defined.

We pass the userId as a string inside the object when navigating.

2fill in blank

medium

Complete the code to read the parameter 'userId' from route params in the Details screen.

React Native

const { [1] } = route.params;

Drag options to blanks, or click blank then click option'

Aparams

Buser

CuserId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong parameter name that was not passed.

Trying to access route.params.user instead of route.params.userId.

We extract 'userId' from route.params to use it in the screen.

3fill in blank

hard

Fix the error in the code to correctly pass multiple parameters when navigating.

React Native

navigation.navigate('Profile', { name: [1], age: [2] });

Drag options to blanks, or click blank then click option'

A'Alice', '30'

B'Alice'

C30

D'Alice', 30

Attempts:

3 left

💡 Hint

Common Mistakes

Passing multiple values as a single string.

Using the same blank for two different values.

Both parameters must be passed as separate key-value pairs inside the object.

4fill in blank

hard

Fill both blanks to correctly define a function that navigates with a parameter.

React Native

function goToDetails([1]) {
  navigation.[2]('Details', { itemId: 5 });
}

Drag options to blanks, or click blank then click option'

Anavigation

Bnavigate

CnavigateTo

Dnav

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name like navigateTo.

Not passing the navigation object as a parameter.

The function receives the navigation object and calls its navigate method.

5fill in blank

hard

Fill all three blanks to create a button that navigates to 'Home' with a parameter 'welcome' set to true.

React Native

return (
  <Button
    title="Go Home"
    onPress={() => navigation.[1]('[2]', { [3]: true })}
  />
);

Drag options to blanks, or click blank then click option'

Anavigate

BHome

Cwelcome

Dgo

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name like go.

Passing the parameter name incorrectly.

The button calls navigation.navigate to the 'Home' screen with the parameter 'welcome' set to true.