Stack Navigator in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the stack navigator from React Navigation.

React Native

import { create[1] } from '@react-navigation/stack';

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

Astack

BStack

CcreateStackNavigator

DStackNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Stack' or 'stack' which are not valid imports.

Using 'StackNavigator' which is not the correct function name.

The function to create a stack navigator is createStackNavigator from '@react-navigation/stack'.

2fill in blank

medium

Complete the code to create a stack navigator instance.

React Native

const Stack = [1]();

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

AcreateStack

BStack

CStackNavigator

DcreateStackNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call 'StackNavigator' which is not a function.

Using 'Stack' which is the variable name, not a function.

You call createStackNavigator() to create the stack navigator instance.

3fill in blank

hard

Fix the error in the code to define a screen inside the stack navigator.

React Native

<Stack.Navigator>
  <Stack.Screen name="Home" component=[1] />
</Stack.Navigator>

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

ANavigator

BHomeScreen

CScreen

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string like 'Home' instead of a component.

Using 'Screen' or 'Navigator' which are not components.

The component prop must be a React component, such as HomeScreen.

4fill in blank

hard

Fill both blanks to navigate to the Profile screen using the navigation prop.

React Native

navigation.[1]('[2]');

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

Anavigate

BgoBack

CProfile

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'goBack' which goes back to the previous screen.

Using 'push' which also works but is less common here.

Use navigation.navigate('Profile') to go to the Profile screen.

5fill in blank

hard

Fill all three blanks to define a stack navigator with two screens: HomeScreen and ProfileScreen.

React Native

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name=[1] component=[2] />
        <Stack.Screen name=[3] component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

A"Home"

BHomeScreen

C"Profile"

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around screen names.

Using component names as strings instead of variables.

The first screen's name is "Home" and component is HomeScreen. The second screen's name is "Profile".

Practice

1. What is the main purpose of a Stack Navigator in React Native?

easy

A. To fetch data from an API

B. To style components with CSS

C. To manage screen navigation like a stack of pages

D. To handle user input events

Solution

1. Step 1: Understand navigation concepts

   Stack Navigator organizes screens so you can move forward and back like a stack of pages.

2. Step 2: Identify the correct purpose

   It is not for styling, fetching data, or handling input but for navigation.

3. Final Answer:

   To manage screen navigation like a stack of pages -> Option C

4. Quick Check:

   Stack Navigator = navigation management [OK]

Hint: Stack Navigator stacks screens for forward/back navigation [OK]

Common Mistakes:

• Confusing navigation with styling
• Thinking it handles data fetching
• Assuming it manages user input

2. Which of the following is the correct way to wrap your app with a stack navigator?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize correct nesting

   The NavigationContainer must wrap the entire navigator, which contains Stack.Navigator and its screens.

2. Step 2: Check each option's structure

   Only <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator></NavigationContainer> correctly wraps Stack.Navigator inside NavigationContainer and includes Stack.Screen.

3. Final Answer:

   <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator></NavigationContainer> -> Option A

4. Quick Check:

   NavigationContainer wraps Stack.Navigator [OK]

Hint: NavigationContainer wraps Stack.Navigator, which holds screens [OK]

Common Mistakes:

• Placing Stack.Screen outside Stack.Navigator
• Wrapping Stack.Screen directly in NavigationContainer
• Incorrect nesting order of components

3. Given this code snippet, what screen will be shown first when the app runs?

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

medium

A. Profile screen

B. Error: No initial screen defined

C. Home screen

D. Settings screen

Solution

1. Step 1: Identify default initial screen

   By default, the first Stack.Screen listed is the initial screen shown.

2. Step 2: Check the order of screens

   The first screen is named "Profile", so the app shows ProfileScreen first.

3. Final Answer:

   Profile screen -> Option A

4. Quick Check:

   First Stack.Screen = initial screen [OK]

Hint: First Stack.Screen listed is the initial screen [OK]

Common Mistakes:

• Assuming Settings is first because of alphabetical order
• Thinking Home screen appears without definition
• Believing an error occurs without initial screen prop

4. What is wrong with this code snippet?

const Stack = createStackNavigator();

function App() {
  return (
    
      
    
  );
}

medium

A. Stack.Screen name must be lowercase

B. Missing NavigationContainer wrapping the navigator

C. HomeScreen component must be imported from react-native

D. Stack.Navigator cannot have only one screen

Solution

1. Step 1: Check for NavigationContainer

   React Navigation requires NavigationContainer to wrap the navigator for proper navigation context.

2. Step 2: Verify other parts

   Screen names can be uppercase, components can be custom, and one screen is allowed.

3. Final Answer:

   Missing NavigationContainer wrapping the navigator -> Option B

4. Quick Check:

   NavigationContainer is required [OK]

Hint: Always wrap Stack.Navigator inside NavigationContainer [OK]

Common Mistakes:

• Omitting NavigationContainer causes navigation failure
• Thinking screen names must be lowercase
• Assuming only built-in components can be screens

5. You want to navigate from the Home screen to the Details screen using a Stack Navigator. Which code snippet correctly performs this navigation inside a button press handler?

function HomeScreen({ navigation }) {
  return (
     ???}
    />
  );
}

hard

A. navigation.push(Details)

B. navigation.popToTop('Details')

C. navigation.goBack('Details')

D. navigation.navigate('Details')

Solution

1. Step 1: Understand navigation methods

   navigation.navigate('ScreenName') moves to a screen, pushing it on the stack if needed.

2. Step 2: Compare options

   push(Details) has a syntax error (missing quotes around screen name); goBack and popToTop are for going back, not forward.

3. Final Answer:

   navigation.navigate('Details') -> Option D

4. Quick Check:

   Use navigate() to go forward to a screen [OK]

Hint: Use navigation.navigate('ScreenName') to move forward [OK]

Common Mistakes:

• Using goBack to go forward
• Using popToTop incorrectly
• Confusing push and navigate methods