COURSE 10: REACT NATIVE
Week 4: React Navigation
Meta Android Developer Professional Certificate
Complete Coursera Answers & Study Guide
Click to Enroll in Coursera Meta Front-End Professional Certificate
TABLE OF CONTENT
React Navigation INTRODUCTION
In this module you will learn all about navigating between screens using React Navigation. You will learn different types of navigation such as Stack, Tab and Drawer navigation, which are widely used in mobile apps. You will also learn about the core features of React Navigation. By the end of this module, you will be able to setup your app with React Navigation and move between screens.
Learning Objectives
- Install and set up React Navigation and Native Stack Navigator.
- Use React Navigation to set up navigation between screens.
- Create and configure a header bar in a React Native app.
- Configure tab and drawer navigation systems in a React Native app.
SELF REVIEW: SET UP ROUTES
1. In this exercise, from where should you have imported the createNativeStackNavigator from? Choose the correct answer.
import { createNativeStackNavigator } from '@react-navigation;
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeStackNavigator } from '@react-navigation/native;
(CORRECT)
Correct! The createNativeStackNavigator is imported from the native-stack package in React Navigation.
2. This exercise has two routes; the Welcome screen and the Login screen. In which component did you specify these routes?
- Navigator
- NavigationContainer
- Screen (CORRECT)
Correct! The Screen component accepts a prop called name. The name prop corresponds to the name of the route you will use to navigate. In addition, it accepts a component prop. This prop corresponds to the component it will render.
3. What other dependencies were installed when you set up Native Stack Navigation and React Navigation? Select all that apply.
- react-native-reanimated
- react-native-screens (CORRECT)
- react-native-safe-area-context (CORRECT)
Correct! This library exposes native navigation container components to React Native.
Correct! This library has a flexible way to handle the safe area views.
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.
- Customizable navigators (CORRECT)
- Android-specific components (CORRECT)
- Full integration with native platform APIs
- iOS-specific components (CORRECT)
That’s right! Customizable navigators, iOS-specific components and Android-specific components are all characteristics of this library.
That’s right! Customizable navigators, iOS-specific components and Android-specific components are all characteristics of this library.
That’s right! Customizable navigators, iOS-specific components and Android-specific components are all characteristics of this library.
5. What are the base packages you would need to install to setup React Navigation within your project? Select all that apply
- react-native-screens (CORRECT)
- react-native-safe-area-context (CORRECT)
- @react-navigation/native (CORRECT)
- react-hooks
That’s right! You need to install @react-navigation/native, react-native-screens, and react-hooks to get started with React Navigation.
That’s right! You need to install @reactnavigation/native, react-native-screens, and react-hooks to get started with React Navigation.
That’s right! You need to install @react-navigation/native, react-native-screens, and react-hooks to get started with React Navigation.
6. The name given to a screen within a Stack.Navigator must match the name of the component that it calls. True or false?
- True
- False (CORRECT)
That’s right! You can name the screen whatever you’d like.
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?
- Stack.Screen
- Stack.Navigator (CORRECT)
- DailyOffercomponent
- NavigationContainer
That’s right! Placing the initialRouteName here ensures that the app starts on the specified route.
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.
- React Navigation (CORRECT)
- React Native
- React Router
Correct! React Navigation is a popular, open-sourced navigation library used for navigating between screens in React Native.
2. React Navigation can be used for both Expo and simple React Native apps. True or false?
- True (CORRECT)
- False
Correct! React Navigation is built for both Expo as well as React Native apps.
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?
import { createNativeStackNavigator } from '@react-navigation;
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeStackNavigator } from '@react-navigation/native;
(CORRECT)
Correct! The NavigationContainer is available in the @react-navigation/native package.
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>
);
}
- This code is correct and sets up the stack navigator. It contains two screens in the stack, Home and Details, with an initial route to the Home screen. (CORRECT)
- This code is incorrect. The stack navigator should not wrap the stack screens. You can also not specify an initial route name within the stack. This code will produce an error.
Correct! The code above sets up stack navigation appropriately.
5. Select all the features supported by React Navigation.
- Cross-platform (CORRECT)
- Tab Navigation (CORRECT)
- Drawer Navigation (CORRECT)
- Stack Navigation (CORRECT)
Correct! React Navigation is cross-platform and works on both iOS and Android.
Correct! React Navigation supports tab-based navigation.
Correct! React Navigation supports drawer-based navigation.
Correct! React Navigation supports stack-based navigation.
SELF REVIEW: MOVING BETWEEN SCREENS
1. In this exercise, which prop was passed to the LoginScreen to navigate between screens?
- navigation (CORRECT)
- nativeNavigation
- navigate
Correct! The navigation prop is accessible by any screen within the app that needs it. The LoginScreen was passed the navigation prop.
2. In this exercise, which method was called, along with the route’s name, to move the user to the Welcome screen?
- navigate(“Welcome”); (CORRECT)
- navigation(“Welcome”);
- nativeNavigation(“Welcome”);
Correct! navigate is the function on the navigation prop that is passed the name of the route you’d like the user to move to.
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?
- True
- False (CORRECT)
Correct! The back page navigation is included automatically, and you will find a back arrow button to move to the previous screen. There is no additional code needed to set this up.
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?
- goBack
- navigate
- push (CORRECT)
- popToTop
That’s correct! The push method will default to a new route, even if one with the same name already exists.
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?
- navigation.navigate(‘Contact’) (CORRECT)
- navigation.move(‘Contact’)
- navigation(‘Contact’)
That’s correct! navigation is a prop of the navigator, and navigate is a function of the prop that directs the user to a specified screen.
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?
- True
- False (CORRECT)
That’s right! React Navigation features a Back button that appears in the header bar by default whenever there is a previous screen in the stack. However, this button cannot be customized, so a custom-made button offers greater flexibility.
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?
- True (CORRECT)
- False
That’s right! Styling applied inside of Stack.Screen is limited to that particular screen, and any other screens in the stack are not affected.
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?
- React Native
- React Router
- React Navigation (CORRECT)
Correct! React Navigation is a popular, open-sourced navigation library used for navigating between screens in React Native.
2. The React Navigation can be used for both apps built using Expo and plain React Native. True or false?
- True (CORRECT)
- False
Correct! React Navigation is built for Expo as well as React Native apps.
3. Which method would you use to navigate back to the very first screen on the stack with a single action?
- push
- goBack
- popToTop (CORRECT)
Correct! The popToTop() method pops all the screens in the stack except the first one and navigates to it.
4. Select all the features supported by React Navigation.
- Supports Tab Navigation (CORRECT)
- Supports Stack Navigation (CORRECT)
- Supports Drawer Navigation (CORRECT)
- Cross-platform (CORRECT)
Correct! React Navigation supports tab-based navigation.
Correct! React Navigation supports stack-based navigation.
Correct! React Navigation supports drawer-based navigation.
Correct! React Navigation is cross-platform and works on both iOS and Android.
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>
(CORRECT)
<a
onClick={() => {
window.location.href ='Details.html';
}}
>
Go to Details
</a>
Correct! The navigation.navigate prop is used to move between screens.
SELF REVIEW: CONFIGURE TAB NAVIGATION
1. In this exercise, under which option should you have set the tabBarIcon for the screens?
- navigatorOptions
- screenOptions (CORRECT)
Correct! The screenOptions allow adding options for all the screens under the Tab Navigator.
2. In this exercise, from where should you have imported the createBottomTabNavigator? Choose the correct answer.
- import{ createBottomTabNavigator} from’@react-navigation;
- import{ createBottomTabNavigator} from’@react-navigation/bottom-tabs’; (CORRECT)
- import{ createBottomTabNavigator} from’@react-navigation/native-stack;
Correct! The createBottomTabNavigator is imported from the bottom-tabs package in React Navigation.
3. For which component would you define the initial route name as a prop in this exercise?
- Tab.Navigator (CORRECT)
- NavigationContainer
Correct! The initialRouteName is passed as a prop to the Tab.Navigator component.
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.
- Material-design top tab navigation (CORRECT)
- Side tab navigation
- Bottom tab navigation (CORRECT)
- Material-design bottom tab navigation (CORRECT)
Well done! You can create bottom tab navigation, material-design bottom tab navigation as well as material-design top tab navigation in your React Native app.
Well done! You can create bottom tab navigation, material-design bottom tab navigation as well as material-design top tab navigation in your React Native app.
Well done! You can create bottom tab navigation, material-design bottom tab navigation as well as material-design top tab navigation in your React Native app.
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?
- True
- False (CORRECT)
Well done! To add a Bottom Tab Navigator, you will need to separately import createBottomTabNavigator from @react-navigation/bottom-tabs.
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?
- True
- False (CORRECT)
Well done! By setting icons to be rendered conditionally, it is possible to have multiple icons for a tab. For example, you could have one icon for a focused tab, and a different icon for when the tab is unfocused.
KNOWLEDGE CHECK: TAB NAVIGATION
1. What are the different types of tab-based navigation supported by React Navigation? Select all that apply.
- Material Bottom Tabs Navigator (CORRECT)
- Material Top Tabs Navigator (CORRECT)
- Bottom Tabs Navigator (CORRECT)
- Top Tabs Navigator
Correct! This is a material-design-themed bottom bar on the bottom of the screen, which lets you navigate between screens as you tap on the tab.
Correct! This is a material-design-themed tab bar on the top of the screen, which lets you navigate between screens as you tap on the tab.
Correct! This is a simple tab bar on the bottom of the screen, letting you switch between different routes when you tap on the tab.
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>
);
}
(CORRECT)
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>
);
}
Correct! This code appropriately sets up the tab navigator with the respective screen.
3. Which one of these options would you configure to set up icons for each tab?
- title
- tabBarIcon (CORRECT)
- tabIcon
Correct! The tabBarIcon is used to set the icon 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?
- True (CORRECT)
- False
Correct! The bottoms tab navigator is a performant API that loads screen components lazily only when mounted.
5. Select all options you can set to configure the tint color of a tab bar icon.
- tabBarInactiveTintColor (CORRECT)
- TabBarActiveTintColor (CORRECT)
- TabBarColor
Correct! This sets the color of the icon and label in the inactive tabs.
Correct! This sets the color of the icon and labels in the active tab.
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.
- react-native-gesture-handler (CORRECT)
- react-navigation/bottom-tabs
- react-native-reanimated (CORRECT)
Correct! This library is a declarative API that exposes the platform’s native touch and gesture system to React Native. The Drawer Navigator uses this.
Correct! This library provides a comprehensive abstraction of the Animated library API and is used by the React Navigation’s Drawer Navigator.
2. In this exercise, from where should you have imported the createDrawerNavigator? Choose the correct answer.
- import{ createDrawerNavigator} from’@react-navigation;
- import{ createDrawerNavigator} from’@react-navigation/drawer’; (CORRECT)
- import{ createDrawerNavigator} from’@react-navigation/bottom-tabs;
Correct! The createDrawerNavigator is imported from the drawer package in React Navigation.
3. For which component would you define the initial route name as a prop in this exercise?
- NavigationContainer (CORRECT)
- Drawer.Navigator
- Drawer.Screen
Correct! The initialRouteName is passed as a prop to the Drawer.Navigator component.
4. Which of the following statements are correct with regards to drawer navigation? Select all that apply.
- You can also customize the drawer position so that the drawer opens on the right with a left swipe. (CORRECT)
- You can customize your app to support multiple drawers; one on the right and one on the left. (CORRECT)
- By default you swipe to your right, and the drawer opens on the left. (CORRECT)
- You can either swipe to open the drawer or simply click on the hamburger menu on both Android and iOS platforms. (CORRECT)
Well done! By default, you swipe to your right, and the drawer opens on the left, but you can change it to swipe to your left and the drawer opens on the right. You can also click on the hamburger icon to open the drawer navigation, and you can have multiple drawers on a screen.
Well done! By default, you swipe to your right, and the drawer opens on the left, but you can change it to swipe to your left and the drawer opens on the right. You can also click on the hamburger icon to open the drawer navigation, and you can have multiple drawers on a screen.
Well done! By default, you swipe to your right, and the drawer opens on the left, but you can change it to swipe to your left and the drawer opens on the right. You can also click on the hamburger icon to open the drawer navigation, and you can have multiple drawers on a screen.
Well done! By default, you swipe to your right, and the drawer opens on the left, but you can change it to swipe to your left and the drawer opens on the right. You can also click on the hamburger icon to open the drawer navigation, and you can have multiple drawers on a screen.
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
- Right (CORRECT)
- Top
- Left (CORRECT)
- Bottom
That’s right! A drawer opens from the left by default, but you can also set it to open from the right.
That’s right! A drawer opens from the left by default, but you can also set it to open from the right.
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?
- True (CORRECT)
- False
Correct! The Drawer navigator is a component that renders a navigation drawer that can be opened and closed via gestures.
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>
);
}
Correct! This code appropriately sets up the drawer navigator with the respective screen.
3. Which options would you configure to set where the drawer opens from?
- drawerType
- drawerPosition (CORRECT)
- drawerStyle
Correct! This provides the option to open the drawer from the left or right.
4. Which of the following are the packages that are needed for the Drawer Navigation to work? Select all that apply.
- react-native-gesture-handler (CORRECT)
- react-native-reanimated (CORRECT)
- @react-navigation/drawer (CORRECT)
Correct! You must install the React Native gesture handler to obtain the platform’s native touch and gesture system.
Correct! You must install the React Native reanimated package to enable animations while using the drawer.
Correct! You need to install the drawer package to setup drawer navigation.
5. Select all options you can set to configure the tint color of a drawer icon.
- drawerActiveTintColor (CORRECT)
- drawerColor
- drawerInactiveTintColor (CORRECT)
Correct! This sets the icon’s color and labels for the active item in the drawer.
Correct! This sets the icon’s color and labels the inactive items in the drawer.
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';
- The NavigationContainer is imported from the correct package. (CORRECT)
- The NavigationContainer is imported from the correct package and will cause an error.
Correct! The NavigationContainer is available in the @react-navigation/native package.
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)
- push
- goBack (CORRECT)
- popToTop
- pop
Correct! The goBack method allows you to go back to the previous screen programmatically.
3. Which methods will you use to move from one screen to another using React Navigation?
- navigation.push(‘Details’)
- navigation.navigate(‘Details’) (CORRECT)
- navigation.goTo(‘Details’)
Correct! The navigation.navigate prop is used to move between screens.
4. Which option would you use to set specific options for each screen and customize its header bar in React Navigation?
- screenOptions
- options (CORRECT)
Correct! Each screen in the stack can be given a configuration under the prop options.
5. Which of the following options would you configure to style the appearance of the drawer in Drawer Navigation? Select the correct option.
- drawerPosition
- drawerStyle (CORRECT)
- drawerType
Correct! This styles the drawer component.
6. Select the option which cannot be used to configure the tint color of a tab bar icon in the Tab Navigator.
- tabBarColor (CORRECT)
- tabBarActiveTintColor
- tabBarInactiveTintColor
Correct! tabBarColor is not a valid prop 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.
- intialRouteName (CORRECT)
- name
- component
Correct! The initialRouteName is set within the Drawer Navigator with a default screen/route name.
8. To set up Drawer Navigation using React Navigation, which of the following dependencies do you need? Select all that apply.
- @react-navigation/drawer (CORRECT)
- react-native-gesture-handler (CORRECT)
- react-native-reanimated (CORRECT)
- react-navigation/native-stack
Correct! You need to install the drawer package to set up Drawer Navigation using React Navigation.
Correct! You need to install the gesture handler package to set up Drawer Navigation using React Navigation.
Correct! You need to install the animated package to set up Drawer Navigation using React Navigation.
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?
- True (CORRECT)
- False
Correct! You can programmatically choose to open the drawer from right to left or left to right.
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>
);
}
- The code correctly sets up tab navigation. (CORRECT)
- The code is incorrect and will throw an error.
Correct! Tab Navigation is set up appropriately in the code snippet above.
Subscribe to our site
Get new content delivered directly to your inbox.
Quiztudy Top Courses
Popular in Coursera
- Meta Marketing Analytics Professional Certificate.
- Google Digital Marketing & E-commerce Professional Certificate.
- Google UX Design Professional Certificate.
- Meta Social Media Marketing Professional Certificate
- Google Project Management Professional Certificate
- Meta Front-End Developer Professional Certificate
Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!