React Navigation INTRODUCTION

SELF REVIEW: SET UP ROUTES

1. In this exercise, from where should you have imported the createNativeStackNavigator from? Choose the correct answer.

2. This exercise has two routes; the Welcome screen and the Login screen. In which component did you specify these routes?

3. What other dependencies were installed when you set up Native Stack Navigation and React Navigation? Select all that apply.

4. React Navigation is the most popular navigation library for React Native apps. Which of the following are characteristics of this library? Select all that apply.

5. What are the base packages you would need to install to setup React Navigation within your project? Select all that apply  

6. The name given to a screen within a Stack.Navigator must match the name of the component that it calls. True or false?   

7. You would like to pass in the prop initialRouteName=”DailyOffer”  so that your app opens to a Daily Offer screen instead of the Home screen. Where would you apply this prop?   

KNOWLEDGE CHECK: INTRODUCTION TO REACT NAVIGATION

1. If you were asked to create navigation in your React Native app to move between screens, which library would you choose? Select the correct option.

2. React Navigation can be used for both Expo and simple React Native apps. True or false?

3. The entire app must be wrapped in the NavigationContainer while setting up React Navigation. Which of the following import statements will import NavigationContainer correctly?

4. Study the code below and select the correct answer:

const Stack = createNativeStackNavigator();


function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
     </NavigationContainer>
  );
}

5. Select all the features supported by React Navigation.

SELF REVIEW: MOVING BETWEEN SCREENS

1. In this exercise, which prop was passed to the LoginScreen to navigate between screens?

2. In this exercise, which method was called, along with the route’s name, to move the user to the Welcome screen?

3. Once you move to a new route, you will need additional code to create a back button to move back to the previous route. True or false?

4. In setting up navigation in your app, you’d like to add a new route to the top of the stack, regardless of what the user’s navigation history is. Which method would you call from the navigation prop to do this?

5. You’d like to set up a Pressable with the onPress method, so that it goes to a screen called “Contact” when the user clicks on it. Which of the following lines of code would you type in the Pressable to do this?  

6. You need to add a Pressable component on your screen that calls the goBack function, otherwise users have no way of returning to the previous screen in the stack. True or false?   

7. In your app, you would like to style the header bar, but only for the screen titled “About Us”. To do this, you would apply the header styling options inside of Stack.Screen for “About Us”. True or false?  

KNOWLEDGE CHECK: MOVING BETWEEN SCREENS

1. If you were asked to create navigation in your React Native app to move between screens, which library would you choose?

2. The React Navigation can be used for both apps built using Expo and plain React Native. True or false?

3. Which method would you use to navigate back to the very first screen on the stack with a single action?

4.  Select all the features supported by React Navigation.

5. Which code snippet would you use to move from one screen to another using React Navigation?

<View> 
  <Text>Home Screen</Text> 
    <Button 
       title="Go to Details" 
       onPress={() => navigation.navigate('Details')} 
  /> 
</View> 

<a 
  onClick={() => { 
    window.location.href ='Details.html'; 
  }} 
> 
  Go to Details 
</a> 

SELF REVIEW: CONFIGURE TAB NAVIGATION

1. In this exercise, under which option should you have set the tabBarIcon for the screens?   

2. In this exercise, from where should you have imported the createBottomTabNavigator? Choose the correct answer.

3. For which component would you define the initial route name as a prop in this exercise?

4. You would like to create a tab navigator in your React Native app. Which of the following are possible options? Select all that apply.

5. You would like to add a Bottom Tab Navigator to your React Native. This is included with the NavigationContainer  , so once you’ve imported that then you are ready to go. True or false?  

6. You would like to customize the tab icons in your Tab Navigator. However, only one icon can be assigned to a tab. True or false? 

KNOWLEDGE CHECK: TAB NAVIGATION

1. What are the different types of tab-based navigation supported by React Navigation? Select all that apply.

2. Which of the following code snippets will you use to set up bottom tab navigation to navigate between two screens, Home and Settings?

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();


function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
  );
}

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();


function MyTabs() {
  return (
    <Tab.Screen>
      <Tab.Navigator name="Home" component={HomeScreen} />
      <Tab.Navigator name="Settings" component={SettingsScreen} />
      </Tab.Screen>
  );
}

3. Which one of these options would you configure to set up icons for each tab?

4. With the bottom tabs navigator, you can switch between routes by tapping on the tab. Routes are lazily initialized, meaning each screen component is not mounted until they are first focused. True or false?

5. Select all options you can set to configure the tint color of a tab bar icon.

SELF REVIEW: CONFIGURE DRAWER NAVIGATION

1. What are some additional packages that were installed as dependencies when you installed the Drawer Navigator package? Select all that apply.

2. In this exercise, from where should you have imported the createDrawerNavigator? Choose the correct answer.

3. For which component would you define the initial route name as a prop in this exercise?

4. Which of the following statements are correct with regards to drawer navigation? Select all that apply.

5. You’d like to set a Drawer Navigator for your app. From which directions on the screen can you set a drawer to open? Select all that apply  

KNOWLEDGE CHECK: DRAWER NAVIGATION

1. The Drawer navigator is a component that renders a navigation drawer that can be opened and closed using gestures. True or false?

2. Which of the following code snippets would you use to set up drawer navigation to navigate between two screens, home and notifications? 

const Drawer = createDrawerNavigator(); 


export default function App() { 
  return ( 
    <NavigationContainer> 
      <Drawer.Screen useLegacyImplementation initialRouteName="Home"> 
        <Drawer.Navigator name="Home" component={HomeScreen} /> 
        <Drawer.Navigator name="Notifications" component={NotificationsScreen} /> 
      </Drawer.Screen> 
    </NavigationContainer> 
  ); 
} 

const Drawer = createDrawerNavigator(); 


export default function App() { 
  return ( 
    <NavigationContainer> 
      <Drawer.Navigator useLegacyImplementation initialRouteName="Home"> 
        <Drawer.Screen name="Home" component={HomeScreen} /> 
        <Drawer.Screen name="Notifications" component={NotificationsScreen} /> 
      </Drawer.Navigator> 
    </NavigationContainer> 
  ); 
} 

3. Which options would you configure to set where the drawer opens from? 

4. Which of the following are the packages that are needed for the Drawer Navigation to work? Select all that apply.   

5. Select all options you can set to configure the tint color of a drawer icon. 

MODULE QUIZ: REACT NAVIGATION

1. The entire app must be wrapped in the NavigtionContainer while setting up React Navigation. Observe the statement below for importing NavigationContainer, and select the statement that describes it accurately.

import { NavigationContainer } from '@react-navigation/native';

2. Which one of the following methods from the navigation prop would you use to go back to the previous screen in the stack history? (Assuming there are multiple screens)

3. Which methods will you use to move from one screen to another using React Navigation?

4. Which option would you use to set specific options for each screen and customize its header bar in React Navigation?

5. Which of the following options would you configure to style the appearance of the drawer in Drawer Navigation? Select the correct option.

6. Select the option which cannot be used to configure the tint color of a tab bar icon in the Tab Navigator.

7. What prop would you use to set up the initial default route within a Drawer Navigator? Select the correct option.

8. To set up Drawer Navigation using React Navigation, which of the following dependencies do you need? Select all that apply.

9. The Drawer Navigator allows you to customize the position of the drawer. You can programmatically choose to open the drawer from right to left or left to right. True or false?

10. Study the code below and determine if it has set up Tab Navigation correctly for two screens, Home and Settings.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; 


const Tab = createBottomTabNavigator(); 


function MyTabs() { 
  return ( 
    <Tab.Navigator> 
      <Tab.Screen name="Home" component={HomeScreen} /> 
      <Tab.Screen name="Settings" component={SettingsScreen} /> 
    </Tab.Navigator> 
  ); 
}