COURSE 10: REACT NATIVE QUIZ ANSWERS
Week 3: Pressable Images and Hooks in React Native
Meta Android Developer Professional Certificate
Complete Coursera Answers & Study Guide
Click to Enroll in Coursera Meta Front-End Professional Certificate
TABLE OF CONTENT
- SELF REVIEW: CREATE A CLICKABLE TEXT AREA WITH PRESSABLE
- KNOWLEDGE CHECK: PRESSABLE COMPONENT
- SELF REVIEW: DISPLAYING IMAGES IN YOUR APP
- KNOWLEDGE CHECK: IMAGES IN REACT NATIVE
- SELF REVIEW: HOOKS IN REACT NATIVE
- KNOWLEDGE CHECK: HOOKS IN REACT NATIVE
- MODULE QUIZ: PRESSABLE, IMAGES AND HOOKS IN REACT NATIVE
Pressable Images and Hooks in React Native INTRODUCTION
In this module you will learn about using the Pressable component to build buttons and other clickable areas. You will then learn about displaying and styling images within the app. Finally, you will explore some common React Native hooks that come handy during development
Learning Objectives
- Use the Pressable component to create touch interactivity in a React Native app.
- Display and style images in a React Native app.
- Use hooks to further refine styling and interactivity in a React Native app.
SELF REVIEW: CREATE A CLICKABLE TEXT AREA WITH PRESSABLE
1. Study the code below and select the statement that describes it accurately:
{!loggedIn && (
<>
<Text style={styles.regularText}>Login to continue </Text>
<TextInput
style={styles.inputBox}
value={email}
onChangeText={onChangeEmail}
placeholder={'email'}
keyboardType={'email-address'}
/>
<TextInput
style={styles.inputBox}
value={password}
onChangeText={onChangePassword}
placeholder={'password'}
keyboardType={'default'}
secureTextEntry={true}
/>
<Pressable onPress={() => onLogin(!loggedIn)}>
<Text>Log in</Text>
</Pressable>
</>
)}
- The code is valid, and this will ensure that this piece of code is only rendered when loggedIn is false. It will show the login UI with email id and password text inputs. (CORRECT)
- The code is invalid and will throw an error. This is because you cannot use conditional rendering in React Native.
Correct! Conditional rendering is a helpful technique in React Native.
2. Which method did you use to handle the event when the user clicks on a pressable area within the Pressable component?
- onPress() (CORRECT)
- onPressOut()
- onLongPress()
Correct! This method should be called as soon as the user clicks on the pressable area.
3. Which of these code snippets represents the final code that configures the login Pressable component?
// State
const [loggedIn, onLogin] = useState(false);
// Component
<Pressable onPress={() => onLogin(!loggedIn)} style={styles.button}>
<Text style={styles.buttonText}>Log in</Text>
</Pressable>
(CORRECT)
// State
const [loggedIn, onLogin] = useState(false);
// Component
<Pressable onPress={!loggedIn} style={styles.button}>
<Text style={styles.buttonText}>Log in</Text>
</Pressable>
Correct. The code above is the final solution for the login screen’s login button that is pressable.
KNOWLEDGE CHECK: PRESSABLE COMPONENT
1. Which components can you use to detect various stages of press interactions on elements? Select the correct option.
- Button
- Pressable (CORRECT)
- TextInput
Correct! The Pressable component can detect various stages of press interactions and can have children.
2. The Pressable component inherits all the styles of the _________ component. Select the correct option.
- TouchableOpacity
- Button
- View (CORRECT)
Correct! The Pressable component inherits all the styles of the View component.
3. Which of the following can be acceptable children of the Pressable component? Select all that apply.
- Number (CORRECT)
- A React element (the result of JSX) (CORRECT)
- null (CORRECT)
- String (CORRECT)
Correct! Number is a React Node and can be a child of the Pressable component.
Correct! Any React element is a React Node and can be a child of the Pressable component.
Correct! null is a React Node and can be a child of the Pressable component. It will be ignored since it means nothing.
Correct! String is a React Node and can be a child of the Pressable component.
4. The Pressable component is always styled to appear as a button. True or false?
- True
- False (CORRECT)
Correct! The Pressable component can detect various stages of press interactions and can have children. The children can be styled to look like a button, text or anything else based on the requirements.
5. What is the default time after the onLongPress is called after the onPressIn?
- 200 ms
- 1000 ms
- 500 ms (CORRECT)
Correct! The onLongPress is called if the time after onPressIn lasts longer than 500 ms.
6. A user’s press gesture is deactivated on the Little Lemon app. Which method is called when this action occurs?
- onPressOut (CORRECT)
- onPressIn
That’s correct! onPressOut is called when the press gesture is deactivated or when the user’s finger moves away from the Pressable element.
7. The Pressable component only accepts Text components as children. True or false?
- True
- False (CORRECT)
That’s correct! The Pressable component allows any React Node as its children. This can be images, text, and so on.
SELF REVIEW: DISPLAYING IMAGES IN YOUR APP
1. Which one of the following statements is true about the Image component?
- The Image component is a core component of React Native and is available to use readily without additional setup. (CORRECT)
- The Image component is not available in the React Native package and has to be installed as a separate package for this exercise.
Correct! The Image component is available as a core component in React Native.
2. What value should you have passed to the resizeMode prop of the Image component while rendering the Little Lemon logo in this exercise?
- stretch
- center
- cover (CORRECT)
Correct! This scales the image uniformly and produces the expected outcome of this exercise.
3. Which code snippet represents the final styles given to the Image component in this exercise?
image: {
width: 100,
height: 100,
borderRadius: 20,
}
(CORRECT)
image: {
width: 50,
height: 50,
borderRadius: 10,
}
Correct! The styling above accurately represents the Little Lemon logo from this exercise.
4. You would like to add some images to your mobile app using the Image component. Which sources can you retrieve images from? Choose all that apply.
- Temporary Images (CORRECT)
- A web URL (CORRECT)
- Resources (CORRECT)
- A local drive on your computer (CORRECT)
That’s right! You can use images stored in Temporary Images.
That’s right! You can retrieve online images by providing the image’s web URL.
That’s right! You can use images stored in Resources.
That’s right! You can use images stored on a drive on your computer.
5. In your project folder, you have a folder called img inside of which you have uploaded an image file titled header.png. How would you render this image using an Image component? Choose the appropriate line of code from the following.
<Image source={require(“header.png”)} />
<Image source={“img/header.png”} />
<Image source={require(“img/header.png”)} /> (CORRECT)
That’s right! To render an image, you need to use the require keyword and specify the file path of a locally stored image file.
6. Which one of the resize modes is described in the following statement: It will scale the image uniformly so that both the dimensions – the width and the height of the image will be equal to or less than the corresponding dimension of the view.
- Cover
- Stretch
- Repeat
- Contain (CORRECT)
That’s correct! If you select Contain, it will scale the image uniformly so that both the dimensions – the width and the height of the image will be equal to or less than the corresponding dimension of the view.
7. If you want an image to fill the entire box, which of the following resize mode props will you use?
- Contain
- Cover (CORRECT)
- Stretch
- Repeat
Well done! When you select cover you can scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
8. When an image is rendered as a background image, it implies that you can have text and other content on top of it. True or false?
- True (CORRECT)
- False
That’s correct. When an image is rendered as a background image, it implies that you can have text and other content on top of it.
KNOWLEDGE CHECK: IMAGES IN REACT NATIVE
1. Which component would you use to display different images in React Native? Select the correct option.
- ImageBackground
- Image
- View (CORRECT)
Correct! The Image component is a core component used to display different types of images in React Native.
2. The Image component inherits all the props of _________ component. Select the correct option.
- ImageBackground
- ScrollView
- View (CORRECT)
Correct! The Image component inherits all the props of the View component.
3. Which of the following are some of the supported image formats in React Native? Select all that apply.
- png (CORRECT)
- jpeg (CORRECT)
- gif (CORRECT)
Correct! png is a supported image format in React Native.
Correct! jpeg is a supported image format in React Native.
Correct! gif is a supported image format in React Native.
4. The Image component can fetch images from a network and display them. True or false?
- True (CORRECT)
- False
Correct! The Image component can fetch images from a network and display them. The source is provided as a URL, and React Native can fetch the image.
5. Study the code below, and determine which one of the emulators display the image as styled.
import React from 'react';
import { View, Image, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10,
},
logo: {
width: 100,
height: 100,
flex:1
},
});
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
resizeMode={"contain"}
style={styles.logo}
source={require('./logo.png')}
/>
</View>
);
}
export default DisplayAnImageWithStyle;
(CORRECT)
Correct! The image above displays the logo with a resizeMode of contain.
SELF REVIEW: HOOKS IN REACT NATIVE
1. Study the code below and choose the description that describes it accurately:
<ScrollView
style={[
styles.container,
colorScheme === 'light'
? { backgroundColor: '#fff' }
: { backgroundColor: '#333333' },
]}>
- This code is valid. It performs conditional styling based on the colorScheme variable. If the value is light, a white background is set; if it has any other value, a dark background is set for the ScrollView. (CORRECT)
- This code is invalid. It will throw an error because conditionals cannot be used within the style prop.
Correct! The code is valid and can be used for thematic styling.
2. What are the values that the useColorScheme hook can return? Select all that apply.
- light (CORRECT)
- dark (CORRECT)
- transparent
Correct! The light theme is returned when the user’s device has light theme settings.
Correct! The dark theme is returned when the user’s device has dark theme settings.
3. The useColorScheme hook is not part of the React Native package. It must be obtained from the community hooks package. True or false?
- True
- False (CORRECT)
Correct! This hook is part of the core React Native package.
4. Observe the following line of code which sets up the useState hook:
const [showMenu, setShowMenu] = useState(false);
Which element in this code represents the state variable?
- useState
- const
- showMenu (CORRECT)
- setshowMenu
That’s correct! showMenu represents the state variable in this code.
5. You want to apply the useColorScheme hook to adjust your app’s color scheme based on the device’s color theme setting. Which color theme options are available to you? Select all that apply.
- Null (CORRECT)
- Grey
- Light (CORRECT)
- Dark (CORRECT)
That’s right! Light, Dark and Null are the color theme options that the useColorScheme hook can identify.
That’s right! Light, Dark and Null are the color theme options that the useColorScheme hook can identify.
That’s right! Light, Dark and Null are the color theme options that the useColorScheme hook can identify.
6. You’re creating an app using React Native, and you need to make some design decisions. For what purpose would you use the useWindowDimensions hook? Check all that apply.
- To determine the device operating system
- To determine the font scale (CORRECT)
- To determine the window height (CORRECT)
- To determine the window width (CORRECT)
That’s right! The useWindowDimensions hook will retrieve the window height, window width and the font size currently used in the window.
That’s right! The useWindowDimensions hook will retrieve the window height, window width, and the font size currently used in the window.
That’s right! The useWindowDimensions hook will retrieve the window height, window width and the font size currently used in the window.
7. You have a React Native app that utilizes location tracking, but you would like this feature to be disabled when a user pushes the app to the background. Which community hook could you use to set up this functionality?
- useDeviceOrientation
- imageDimensions
- useKeyboard
- useAppState (CORRECT)
That’s right! useAppState tells you if the app is in active mode or in background/inactive mode, and you can set the app to respond accordingly.
KNOWLEDGE CHECK: HOOKS IN REACT NATIVE
1. What are the supported color schemes in the useColorScheme hook? Select all that apply.
- light (CORRECT)
- null (CORRECT)
- dark (CORRECT)
Correct! light is a supported color scheme and is selected by default.
Correct! null indicates that the user has not indicated a preferred color scheme.
Correct! dark is a supported color scheme.
2. The React Native community hooks have to be installed separately by installing the react-native-community/hooks package. True or false?
- True (CORRECT)
- False
Correct! The community hooks are part of the community package and must be installed separately.
3. Which hook would you use to determine if the virtual keyboard is displayed and also determines its height?
- useKeyboard (CORRECT)
- useAppState
- useDeviceOrientation
Correct! The useKeyboard hook is used to determine if the virtual keyboard is displayed on the screen and can also return its height.
4. The useWindowDimensions hook is part of the core React Native package. True or false?
- True (CORRECT)
- False
Correct! The useWindowDimensions hook is part of the core React Native package.
5. In which one of the following scenarios would the useState hook be useful?
- You want to handle data that changes over time or comes from user interaction within a component. (CORRECT)
- You want to customize React components and pass properties from parent to child.
Correct! State gives your components memory and is used to manage data changes within a component.
MODULE QUIZ: PRESSABLE, IMAGES AND HOOKS IN REACT NATIVE
1. Which of these hooks belong to the core React Native package? Select all that apply.
- UseWindowDimensions (CORRECT)
- useColorScheme (CORRECT)
- useAppState
Correct! useWindowDimensions belongs to the core React Native package.
Correct! useColorScheme belongs to the core React Native package.
2. Which component would you use to display a background image on your mobile screen?
- View
- ImageBackground (CORRECT)
- Image
Correct! The ImageBackground component is used to display images in the background.
3. The Pressable component can accept child/children elements that can be a clickable area. True or false?
- True (CORRECT)
- False
Correct! The Pressable component can accept any React Node as its child, or it can have multiple children elements.
4. What are the values accepted by the resizeMode prop to the Image component? Select all that apply.
- Cover (CORRECT)
- contain (CORRECT)
- left
- stretch (CORRECT)
Correct! The value cover scales the image uniformly.
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.
Correct! The value stretch scales the width and height of the image independently.
5. Which of the following statements are true about the Image component? Select all that apply.
- The Image component can fetch and display images from local storage. (CORRECT)
- The Image component can fetch and display images from a network. (CORRECT)
- The Image component cannot fetch and display images from a network location.
Correct! The Image component can fetch images from local storage and display them. The source is provided as a source, and React Native can fetch the image.
Correct! The Image component can fetch images from a network and display them. The source is provided as a URL within the source, and React Native can fetch the image.
6. Examine the emulator below and determine which code snippets will produce this output that is illustrated.
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10,
},
logo: {
width: 100,
height: 100,
flex:1
},
});
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
resizeMode={"stretch"}
style={styles.logo}
source={require('./logo.png')}
/>
</View>
);
}
export default DisplayAnImageWithStyle;
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10,
},
logo: {
width: 100,
height: 100,
flex:1
},
});
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
resizeMode={"cover"}
style={styles.logo}
source={require('./logo.png')}
/>
</View>
);
}
export default DisplayAnImageWithStyle;
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10,
},
logo: {
width: 100,
height: 100,
flex:1
},
});
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
resizeMode={"contain"}
style={styles.logo}
source={require('./logo.png')}
/>
</View>
);
}
export default DisplayAnImageWithStyle;
(CORRECT)
Correct! The code above will match the screenshot on the emulator. The resizeMode prop is appropriately set to contain.
7. Which hook would you use to determine whether the app’s current state is active, inactive, or backgrounded? Select the correct option.
- useAppState (CORRECT)
- useDeviceOrientation
- useKeyboard
Correct! The useAppState hook determines the app’s current state (Active, Inactive or Background).
8. The useState hook is used when you want to handle data that changes over time or comes from user interaction within a component. True or false?
- True (CORRECT)
- False
Correct! State gives your components memory and is used to manage data changes within a component.
9. Which of the following is true about the ImageBackground component? Select the correct option.
- The ImageBackground component has props different from the Image component.
- The ImageBackground component has the same props as the Image component. (CORRECT)
Correct! The ImageBackground is used to set a background image and has the same props as the Image component.
10. Which of the following methods is triggered when the person leaves their finger longer than 500 ms before removing it from a Pressable component?
- onPressIn
- onPressOut
- onPress
- onLongPress (CORRECT)
Correct! The onLongPress method is triggered when the user leaves their finger longer than 500 ms before removing it from the Pressable component.
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!