COURSE 10: REACT NATIVE QUIZ ANSWERS
Week 5: Final Project Assessment
Meta Android Developer Professional Certificate
Complete Coursera Answers & Study Guide
Click to Enroll in Coursera Meta Front-End Professional Certificate
TABLE OF CONTENT
Final Project Assessment INTRODUCTION
Practice and reflect on the skills you learned in this course.
Learning Objectives
- Synthesize the skills you learned in this course.
- Reflect on what you learned in this course and the next steps in your journey.
FINAL COURSE QUIZ: REACT NATIVE
1. Observe the code below and select the statement that best describes it.
<Text style={{ fontWeight: 'bold' }}>
I am bold
<Text style={{ color: blue }}>and blue</Text>
</Text>
- This code is valid. It will print: I am bold and blue. (CORRECT)
- The code is not valid. Something is missing.
Correct! This code is correct. The Text component can be nested within another Text component and can even inherit styles from the parent Text component!
2. Select the performant components that are used for the lazy rendering of items on the screen.
- SectionList (CORRECT)
- ScrollView
- FlatList (CORRECT)
Correct! The SectionList component renders items lazily as they appear on the screen and hence a very performant component to use while rendering large lists by sections.
Correct! The FlatList component renders items lazily as they appear on the screen and hence a very performant component to use while rendering large lists.
3. Which of the following values to the resizeMode prop repeats the image to cover the frame of the view? Select the correct option.
- stretch
- cover
- repeat (CORRECT)
- contain
Correct! The repeat value repeats the image to cover the frame of the view. The image will keep its size, and aspect ratio, unless it is larger than the view.
4. Which of these are React Navigation’s minimum requirements to be set up successfully? Select the correct option.
- react-native >= 0.56.0 and expo >= 41 (if you use Expo)
- react-native >= 0.70.0 and expo >= 42 (if you use Expo)
- react-native >= 0.63.0 and expo >= 41 (if you use Expo) (CORRECT)
Correct! These are the correct requirements to set up React Navigation successfully.
5. Select all the keyboard types that are supported cross-platform by the TextInput component.
- numeric (CORRECT)
- decimal-pad (CORRECT)
- url (CORRECT)
- visible-password
Correct! numeric is a keyboard type supported on both iOS and Android.
Correct! decimal-pad is a keyboard type supported on both iOS and Android.
Correct! url is a keyboard type supported on both iOS and Android.
6. Which options would you use to configure where the drawer opens from in Drawer Navigation? Select the correct answer.
- drawerPosition (CORRECT)
- drawerType
- drawerStyle
Correct! The drawerPosition can accept values left or right and is used to configure the direction the drawer opens from.
7. Which of these statements about React Native are true? Select all that apply.
- Code is written in Java or Kotlin
- Builds cross-platform native apps (CORRECT)
- Follows component-based architecture (CORRECT)
- One codebase for iOS and Android (CORRECT)
Correct! React Native builds cross-platform native apps.
Correct! React Native uses React and hence follows the component-based architecture that comes with React.
Correct! React Native has a shared codebase for both iOS and Android. You code once for both platforms!
8. On the iOS platform, TextInput provides an option to provide a delete or clear button within the text input box, which can be used to clear the text within it, as shown below.
Which of the following props can achieve that?
- clear (CORRECT)
- clearButtonMode
- clearTextOnFocus
Correct! The clearButtonMode is a special prop that works on iOS and can provide a clear button within the text input box to clear the existing text.
9. Observe the emulator below. Which component would produce this output on the emulator? Select the correct option.
- FlatList
- TextInput (CORRECT)
- Text
- ScrollView
Correct! The TextInput component is a core component used to create text boxes that accept the user’s input via a keyboard.
10. Which of these hooks are part of the core React Native package? Select all that apply.
- UseWindowDimensions (CORRECT)
- useDeviceOrientation
- useColorScheme (CORRECT)
- useKeyboard
Correct! The useWindowDimensions hook is part of the core React Native package.
Correct! The useColorScheme hook is part of the core React Native package.
11. Which of the following statements are true about the Pressable component? Select the correct option.
- The Pressable component can accept a child or children elements that can be a clickable area. (CORRECT)
- The Pressable component cannot accept a child or children elements.
Correct! The Pressable component can accept any React Node as its child, or it can have multiple children elements.
12. Observe the code below and select the statement that best describes it.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './Screens/WelcomeScreen';
import MenuScreen from './Screens/MenuScreen';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Menu" component={MenuScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
- The code is incorrect.
- The code is valid. (CORRECT)
Correct! This code is valid and sets up the Native Stack Navigator correctly.
13. The View component is a core component of React Native; it can have many children of any type. Select the correct option.
- True (CORRECT)
- False
Correct! The View component is a core component of React Native and can have 0 to many children of any type.
14. If you are using Expo CLI, you need not touch native code or install tools like XCode or Android Studio. True or false?
- True (CORRECT)
- False
Correct! The Expo CLI is much easier to set up, and you will not need to touch any native code or native mobile tools while building React Native apps using Expo.
15. You have been given the following array of items:
const DATA = [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"]
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"]
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"]
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"]
}
];
Which components will you use to render this list of items sorted by title?
- SectionList (CORRECT)
- View
- FlatList
Correct! The SectionList will be an ideal component to render this array since we want to render each item sorted by title.
16. Which one of the following methods is triggered when the user leaves their finger longer than 500 ms and then removes their finger? Select the correct option.
- onPressOut (CORRECT)
- onPress
- onLongPress
- onPressIn
Correct! The onPressOut is called when the person finally removes their finger, even if it is after 500 ms.
17. Observe the code below and select the statement that best describes it.
import MenuScreen from './Screens/MenuScreen';
import WelcomeScreen from './Screens/WelcomeScreen';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Welcome" component={WelcomeScreen} />
<Tab.Screen name="Menu" component={MenuScreen} />
</Tab.Navigator>
);
}
- The code is incorrect. (CORRECT)
- The code is valid.
Correct! The App code needs to be wrapped around the NavigationContainer to set up React Navigation.
18. You are asked to display an alert to the user when a text input box is in focus. Which of the following methods would you use to achieve that?
- blur()
- focus()
- isFocused() (CORRECT)
Correct! The isFocused() method will return true when the text input box is currently focused. You can use the boolean value to display an alert to the user when it is true.
19. Which hook will you use to update the width and height values of the screen automatically? Select the correct option.
- useWindowDimensions (CORRECT)
- useDeviceOrientation
- useKeyboard
Correct! The useWindowDimensions automatically update width and height values when screen size changes.
20. Drawer Navigation in React Navigation has additional dependencies on react-native-gesture-handler and react-native-reanimated packages. True or false?
- False
- True (CORRECT)
Correct! Drawer Navigation depends on the React Native Gesture Handler for native gestures and React Native Reanimated for native animations.
21. Which category of components include Text, ScrollView and Image? Select the correct option.
- Community Components
- Core Components (CORRECT)
- Your native custom components
Correct! Text, ScrollView and Image are all core components of React Native.
22. Which hook will provide you with the current device orientation and automatically update it when it changes? Select the correct option.
- useDeviceOrientation (CORRECT)
- useKeyboard
- useWindowDimensions
Correct! The useDeviceOrientation hook provides the device’s current orientation, either landscape or portrait mode, and automatically updates it when it changes.
23. Which of the following values to the resizeMode prop scales the image uniformly so that both dimensions of the image will be equal to or less than the corresponding dimension of the view? Select the correct option.
- repeat
- contain (CORRECT)
- stretch
- cover
Correct! The value contain scales the image uniformly so that both dimensions of the image will be equal to or less than the corresponding dimension of the view.
24. By building apps using React Native, you would have the title of __________ in the tech industry. Select the correct option.
- Native Mobile developer
- Web Developer
- Cross-platform Mobile Developer (CORRECT)
- Android Developer
Correct! You would be a cross-platform mobile developer who can build native mobile apps on iOS and Android.
25. Which of the following values to the resizeMode prop scales the width and height of the image independently? Select the correct option.
- contain
- cover
- repeat
- stretch (CORRECT)
Correct! The stretch scales width and height independently. This may change the aspect ratio of the source image.
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!