COURSE 10: REACT NATIVE
Week 2: Lists and Text Input 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 – RENDER A LARGE LIST USING FLATLIST
- KNOWLEDGE CHECK: RENDER LARGE LISTS WITH FLATLIST
- SELF REVIEW: RENDER A LARGE LIST USING SECTIONLIST
- KNOWLEDGE CHECK: RENDER LARGE LISTS WITH SECTIONLIST
- SELF REVIEW: CREATE A TEXTINPUT COMPONENT
- KNOWLEDGE CHECK: ACCEPT USER INPUT
- SELF REVIEW: CREATE A LOGIN PAGE
- KNOWLEDGE CHECK: PROPS AND METHODS IN TEXTINPUT
- MODULE QUIZ: LISTS AND TEXT INPUT IN REACT NATIVE
Lists and Text Input in React Native INTRODUCTION
In this module you will learn about the core components of React Native. You will learn to build large and performant lists with the FlatList and SectionList components. You will then learn to configure user inputs via keyboard using the TextInput component. By the end of this module, you will gain the knowledge to build large lists and configure user inputs within your React Native App.
Learning Objectives
- Render large lists with FlatList.
- Render large lists by section with SectionList.
- Use the TextInput component to accept user input.
- Manage the virtual keyboard in a React Native app.
- Create a login screen in React Native.
SELF REVIEW – RENDER A LARGE LIST USING FLATLIST
1. In this exercise, which one of the following should you have provided as a key to the FlatList component?
- item.id (CORRECT)
- index
- item.key
Correct! The array provided in the exercise has a unique id for each item in the array. The id can be extracted via item.id, this can be sent to the keyExtractor prop.
2. Which styling properties should you have used to style the view containing each menu item and its corresponding price to display on each row? Select all that apply.
flexDirection: 'row'
(CORRECT)justifyContent: 'space-between'
(CORRECT)justifyContent: 'center'
- flexDirection: ‘column’
Correct! The items must be displayed in a row with the menu item name and price.
Correct! The items must be equally spaced, and this prop to justifyContent achieved that.
3. Which of these code snippets represents the final code for the Item component that renders each item on the menu with its price?
- const Item = ({ name, price }) => (
- <Text style={menuStyles.innerContainer}>
- <Text style={menuStyles.itemText}>{name}</Text>
- <Text style={menuStyles.itemText}>{price}</Text>
- </Text>
- );
- const Item = ({ name, price }) => (
- <View style={menuStyles.innerContainer}>
- <Text style={menuStyles.itemText}>{name}</Text>
- <Text style={menuStyles.itemText}>{price}</Text>
- </View>
- );
(CORRECT)
Correct! The Item component above renders each item’s name and price as expected.
4. The FlatList component uses lazy rendering of component items. Which of the following are characteristics of lazy rendering? Choose all that apply.
- It provides slower performance when rendering large lists, compared to the ScrollView component.
- All items are rendered at the same time.
- Rendered items are removed when the user scrolls away from them. (CORRECT)
- Items are rendered as the user encounters them in the app. (CORRECT)
Correct! Lazy rendering only renders items as they are encountered, and removes items that are not actively being used. This results in faster performance in apps that contain large lists.
Correct! Lazy rendering only renders items as they are encountered, and removes items that are not actively being used. This results in faster performance in apps that contain large lists.
5. Which properties are required when using the FlatList component? Select all that apply.
- Data (CORRECT)
- RenderItem (CORRECT)
- Item
- Name
That’s right! The data and renderItem properties are necessary for the FlatList component to function.
That’s right! The data and renderItem properties are necessary for the FlatList component to function.
KNOWLEDGE CHECK: RENDER LARGE LISTS WITH FLATLIST
1. Let’s say you must display a large list of items in your app while maintaining solid performance. Which component would be more suitable for this use case?
- ScrollView
- FlatList (CORRECT)
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.
2. Which of the following are required props of the FlatList component? Select all that apply.
- renderSectionHeader
- keyExtractor
- data (CORRECT)
- renderItem (CORRECT)
Correct! data is a plain array containing the list of items you want to render using the FlatList.This is a required prop to the FlatList component.
Correct! renderItem takes an item from the data and renders it into the list. This is a required prop to the FlatList component.
3. Which of the following features does the FlatList component support? Select all that apply.
- Sectional support
- Pull to refresh support (CORRECT)
- Header, footer, and separator support (CORRECT)
- Fully cross-platform (CORRECT)
Correct! The FlatList component provides the pull-to-refresh functionality by setting the refreshing prop.
Correct! The FlatList component provides built-in header, footer and separator support.
Correct! The FlatList component is a fully cross-platform component that works on all the supported platforms.
4. What is the keyExtractor prop used for?
- It extracts a unique key for a given item at the specified index. (CORRECT)
- Sets a default key using the item.key or item.id and then falls back to the index.
Correct! The keyExtractor is used to extract a unique key for a given specified index. This is an optional prop to the FlatList.
5. The internal state is not preserved when content scrolls out of the render window while using FlatList. True or false?
- True (CORRECT)
- False
Correct! The FlatList renders the items lazily and does not preserve the internal state when content scrolls out of the render window. The state must be captured in the item data or in external stores such as redux.
6. In your app, you have written a header component, and then rendered that component inside of FlatList and passed it to the ListHeaderComponent prop. When the user scrolls through the list in the app, this header will remain fixed in place. True or false?
- True
- False (CORRECT)
CorrectThat’s right! By rendering the header component inside of FlatList with the ListHeaderComponent prop, it will respond just like everything else inside of FlatList.
SELF REVIEW: RENDER A LARGE LIST USING SECTIONLIST
1. In this exercise, which of the following approaches would work to provide the key to the SectionList component? Select all that apply.
- item.id
- item.key (CORRECT)
- item + index (CORRECT)
Correct! The item.key is a default value that can be used as a key if no other id is available.
Correct! The keyExtractor can be provided with an incremented index value for each item. This is the correct approach since no unique id is provided in the array.
2. Of the following core React Native components, which were used in the MenuItems component? Select all that apply.
- View (CORRECT)
- FlatList
- SectionList (CORRECT)
- Text (CORRECT)
Correct! The View component is used as the parent wrapper in this component.
Correct! The menu items are rendered using the SectionList component.
Correct! The Text component is used several times to display the text on the screen.
3. Which of these code snippets represents the final code for the section header that renders on top of each section in the menu (Appetizers, Main Dishes and so on)?
const renderSectionHeader = ({ section: { title } }) => (
<Text style={menuStyles.sectionHeader}>{title}</Text>
);
const renderSectionHeader = ({ section: { title } }) => (
<View style={menuStyles.headerStyle}>
<Text style={menuStyles.sectionHeader}>{title}</Text>
</View>
);
(CORRECT)
Correct! The renderSectionHeader function above represents the final code to render each section’s header on the menu.
4. Which of the following are characteristics of the SectionList component? Select all that apply.
- It uses lazy rendering (CORRECT)
- It inherits props of the ScrollView component (CORRECT)
- It must be imported from a separate library
- It supports section headers and separators (CORRECT)
That’s right! The SectionList component uses lazy rendering, inherits props from ScrollView, and supports the use of section headers and separators.
That’s right! The SectionList component uses lazy rendering, inherits props from ScrollView, and supports the use of section headers and separators.
That’s right! The SectionList component uses lazy rendering, inherits props from ScrollView, and supports the use of section headers and separators.
5. You are creating a ‘Contact’ page for your React Native app that separates contact details into sections such as email, phone, and social media. In your SectionList component, which property would you use to extract the data from the array to render these section headers?
- renderSectionHeader (CORRECT)
- renderItem
- sections
- data
That’s right! render SectionHeader is used to render the text of section headers in a SectionList component.
KNOWLEDGE CHECK: RENDER LARGE LISTS WITH SECTIONLIST
1. You want to display a large list of items in your app that must be divided into sections. Which component would be more suitable for this use case?
- SectionList (CORRECT)
- FlatList
Correct! The SectionList component is a performant component used to render large lists with sectional support.
2. Which of the following are required props of the SectionList component? Select all that apply.
- keyExtractor
- data
- sections (CORRECT)
- renderItem (CORRECT)
Correct! sections is the actual data to render, which is passed to SectionList. This is a required prop to the SectionList component.
Correct! renderItem takes an item from the sections and renders it into the list. This is a required prop to the SectionList component.
3. Which of the following are features supported by the SectionList component? Select all that apply.
- Fully cross-platform (CORRECT)
- Pull to refresh support (CORRECT)
- Header, footer and separator support (CORRECT)
- Sectional support (CORRECT)
Correct! The SectionList component is a fully cross-platform component that works on all the supported platforms.
Correct! The SectionList component provides the pull-to-refresh functionality by setting the refreshing prop.
Correct! The SectionList component provides built-in support for headers, footers and separators.
Correct! The SectionList component provides support for rendering large lists by section.
4. The internal state is not preserved when content scrolls out of the render window while using SectionList.
- True (CORRECT)
- False
Correct! The SectionList renders the items lazily and does not preserve the internal state when content scrolls out of the render window. The state has to be captured in the item data or in external stores such as redux.
5. Which method is used to render section headers using the SectionList component?
- renderSectionHeader (CORRECT)
- ListSectionComponent
Correct! The renderSectionHeader is used to render a header on top of each section.
SELF REVIEW: CREATE A TEXTINPUT COMPONENT
1. Which of the following styles should you have used to style the TextInput component in this exercise?
inputBox: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
fontSize: 16,
borderColor: 'EDEFEE',
backgroundColor: '#EDEFEE',
},
inputBox: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
fontSize: 16,
borderColor: '#3333333',
backgroundColor: '#333333,
},
Correct! This is the expected styling for the text input box in this exercise.
2. Which prop should you have used to set the placeholder text within the TextInput component in this exercise?
- placeholderText
- placeholder (CORRECT)
Correct! The placeholder prop can be used to set the placeholder text for the TextInput component.
3. Which code snippets represent the final code configuring the TextInput component?
<TextInput
style={styles.inputBox}
value={firstName}
onChangeText={firstName}
placeholder={'First Name'}
/>
<TextInput
style={styles.inputBox}
value={firstName}
onChangeText={onChangeFirstName}
placeholder={'First Name'}
/>
Correct! The code above is the final solution for the TextInput component after configuring. It applies a style and placeholder text, and also calls a method to update the text as the user types.
4. In the Little Lemon mobile app, you’d like a to add a text input box that displays the text “Email address” before the user types anything inside of it. Which prop would you pass in to accomplish this?
- onChangeText
- value
- style
- placeholder (CORRECT)
That’s right! You can type a string value for the placeholder prop to appear in the input box.
5. You are adding a text input box to your app for the user to enter their email address. You will need to configure at least two separate TextInput components to do this –one for iOS devices, and another for Android devices. True or false?
- True
- False (CORRECT)
That’s right! The TextInput component is universally compatible with all modern mobile platforms and does not need to be configured separately for each one.
KNOWLEDGE CHECK: ACCEPT USER INPUT
1. Which one of these React Native components would you use to input text into the app through a keyboard?
- Text
- Keyboard
- TextInput (CORRECT)
Correct! The TextInput component is foundational for inputting text into the app via a keyboard.
2. The TextInput component inherits all the props of the _________ component, in addition to its props:
- View (CORRECT)
- FlatList
- Text
Correct! The TextInput component inherits all the props of the View component.
3. Which of the following are features supported by the TextInput component? Select all that apply.
- Cross-platform (CORRECT)
- Supports different keyboard types (CORRECT)
- Supports automatic dismissal of keyboard
- Supports auto-correction and auto-capitalization (CORRECT)
Correct! The TextInput component is a cross-platform component that works on all the supported platforms.
Correct! The TextInput component supports various native keyboard types via the keyboardType prop.
Correct! The TextInput component supports auto-correction and capitalization via autoCorrect and autoCapitalize props.
4. The keyboard displayed while using the TextInput component is native to the platform. This means that they will look different on iOS and Android. True or false?
- True (CORRECT)
- False
Correct! TextInput renders native keyboards, which will look different on iOS and Android.
5. What methodology would you use to track what the user types in the text input within a component? Select the correct option.
- useContext hook
- Props
- useState hook (CORRECT)
Correct! The useState hook can track what the user types in the text input and store it as a local state within the component.
6. Your app has text input boxes that open the virtual keyboard when tapped. For the keyboardDismissMode property of the ScrollView, you’ve set the value to {true}. What does this do?
- The virtual keyboard will be dismissed after a period of inactivity.
- The virtual keyboard can be dismissed by the user with a downward swipe
- The virtual keyboard will remain fixed in position when the user scrolls.
- The virtual keyboard will be dismissed when the user scrolls. (CORRECT)
That’s right! The keyboard disappears automatically when the user scrolls.
7. In your mobile app, you want to set the virtual keyboard to be dismissed as soon as the user scrolls. Which value of keyboardDismissMode would you assign to set this behavior?
- OnDrag (CORRECT)
- interactive
- onScroll
- none
That’s right! The onDrag setting instructs the keyboard to be dismissed when the user scrolls.
SELF REVIEW: CREATE A LOGIN PAGE
1. How should you have saved the user’s updates to the two input boxes (email and password) in the login screen?
By storing them as two separate local states within the component as follows:
- By storing them as two separate local states within the component as follows:
const [email, onChangeEmail] = useState('');
const [password, onChangePassword] = useState('');
- By storing them as a single local state within the component as follows:
const [textInput, onChangeText] = useState('');
(CORRECT)
Correct! The updates to the input boxes should be saved to two separate local states, as a single state cannot track values from two different input boxes.
2. Which prop should you have used to set the password field with hidden characters as the user types?
- placeholderText
- defaultText
- secureTextEntry (CORRECT)
Correct! The secureTextEntry prop is a boolean; when set to true, the characters are hidden within the text box as the user types in.
3. Which code snippets represent the final code for configuring the login screen’s text input boxes?
<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}
/>
(CORRECT)
<TextInput
style={styles.inputBox}
value={email}
onChangeText={onChangeEmail}
placeholder={'email'}
keyboardType={'email-address'}
secureTextEntry={true}
/>
<TextInput
style={styles.inputBox}
value={password}
onChangeText={onChangePassword}
placeholder={'password'}
keyboardType={'default'}
/>
Correct! After configuring, the code above is the final solution for the login screen’s TextInput boxes. Notice that it uses the secureTextEntry prop to hide the text that is entered in the password box.
4. You would like to create a text input box in your app for users to enter their password. To make this more secure, you would like for the characters entered in the box to be hidden and for the box to have a limit of 14 characters. Which TextInput props would you pass in to accomplish this? Choose all that apply.
- maxlength (CORRECT)
- textHide
- SecureTextEntry (CORRECT)
- multiline
That’s right! The maxlength prop allows you to limit the number of characters in a box, and secureTextEntry keeps characters hidden.
That’s right! The maxlength prop allows you to limit the number of characters in a box, and secureTextEntry keeps characters hidden.
KNOWLEDGE CHECK: PROPS AND METHODS IN TEXTINPUT
1. Study the code below and select which one of the emulator screenshots illustrates the output of this code.
import React from 'react';
import { SafeAreaView, StyleSheet, TextInput } from 'react-native';
const MyTextComponent = () => {
const [firstName, onChangeFirstName] = React.useState('');
const [lastName, onChangeLastName] = React.useState('');
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChangeFirstName}
value={firstName}
placeholder="first name"
/>
<TextInput
style={styles.input}
onChangeText={onChangeLastName}
value={lastName}
placeholder="last name"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
textAlign: 'center',
},
});
export default MyTextComponent;
(CORRECT)
Correct! This screenshot has two text input components and matches the styling where the text is aligned to be in the center.
2. Which of these methods will return a call-back when a TextInput component is in focus? Select all that apply.
- blur()
- onFocus() (CORRECT)
- isFocused() (CORRECT)
Correct! The onFocus() is a callback that is called when the TextInput is focused.
Correct! The isFocused() method returns true if the input is currently focused, and false otherwise. The onFocus() is a callback that is called when the TextInput is focused.
3. Which of the following are features supported by the TextInput component? Select all that apply.
- Supports placeholder text (CORRECT)
- Text alignment (CORRECT)
- Supports auto focus (CORRECT)
Correct! The TextInput component supports displaying a placeholder text before the user enters input via the placeholder prop.
Correct. The TextInput component supports text alignment within the text input box via the textAlign prop, which can also be provided as a style.
Correct! The TextInput component supports auto focus via the autoFocus prop.
4. The TextInput component supports multiple lines for text entry within the text input box.
- True (CORRECT)
- False
Correct! TextInput uses the multiline Boolean prop to support multiple lines for text entry. When multiline is set to true, you can enter text in multiple lines within the text input box.
5. Which of the following is a prop to the TextInput that can obscure the text entered within the text input?
- secureTextEntry (CORRECT)
- passwordText
Correct! secureTextEntry is a Boolean prop that obscures the text entered when set to true.
6. You are creating a form for your app and would like it to display an alert whenever a user exits a certain text input box. Which prop of the TextInput component would you use to achieve this?
- clearButtonMode
- TextInput does not have this property
- onFocus
- onBlur (CORRECT)
That’s right! onBlur produces a response when a text input box is blurred, such as when a user exits the input interface.
MODULE QUIZ: LISTS AND TEXT INPUT IN REACT NATIVE
1. You need to display a large list of items in your app while maintaining solid performance. Which components could you use to accomplish this? Select all that apply.
- SectionList (CORRECT)
- FlatList (CORRECT)
- ScrollView
Correct! The SectionList component renders items lazily as they appear on the screen and is, therefore, a very performant component while rendering large lists by sections.
Correct! The FlatList component renders items lazily as they appear on the screen and is, therefore, a very performant component while rendering large lists.
2. The keyExtractor is a required prop to both the FlatList and SectionList components. True or false?
- True
- False (CORRECT)
Correct! keyExtractor is used to extract a unique key for a given specified index. This is an optional prop to both the FlatList and SectionList components.
3. Which feature is NOT supported by the FlatList component? Select the correct option.
- Pull to refresh support
- Header, footer, and separator support
- Sectional support (CORRECT)
- Fully cross-platform
Correct! The FlatList component does not provide support for sections. You will have to use the SectionList component for sectional support.
4. Observe the emulator screenshot below; which one of the following code snippets will produce this output on the emulator?
const MyLoginComponent = () => {
const [userName, onChnageUserName] = React.useState('');
const [password, onChangePassword] = React.useState('');
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChnageUserName}
value={userName}
placeholder="first name"
/>
<TextInput
style={styles.input}
onChangeText={onChangePassword}
value={password}
placeholder="password"
/>
</SafeAreaView>
);
};
const MyLoginComponent = () => {
const [userName, onChnageUserName] = React.useState('');
const [password, onChangePassword] = React.useState('');
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChnageUserName}
value={userName}
placeholder="first name"
/>
<TextInput
style={styles.input}
onChangeText={onChangePassword}
value={password}
secureTextEntry={true}
placeholder="password"
/>
</SafeAreaView>
);
};
(CORRECT)
Correct! The two text input boxes are configured as shown in the emulator, and the password field is secured via the secureTextEntry prop.
5. Which method would you use to make a native text input lose focus?
- isFocused()
- blur() (CORRECT)
- focus()
Correct! The blur() method makes the native input lose focus.
6. Which one of these props are used to configure a separator component between each item in the FlatList?
- SectionSeparatorComponent
- ListSeparatorComponent
- ItemSeparatorComponent (CORRECT)
Correct! The ItemSeparatorComponent is used to configure a separator component between each item rendered in the FlatList.
7. The SectionList component can be rendered without providing the sections prop to it.
- True
- False (CORRECT)
Correct! The sections prop is a required prop to the SectionList component. It contains the array of data that needs to be rendered.
8. Observe the output on the emulator screenshot below, and determine what component you would use to display this list of items within your app. Note: More items will appear as you scroll down the screen.
- FlatList (CORRECT)
- ScrollView
- SectionList
Correct! The FlatList component is a core component suitable for rendering large lists performantly.
9. Select all the keyboard types that are supported cross-platform by the TextInput component.
- number-pad (CORRECT)
- phone-pad (CORRECT)
- web-search
- email-address (CORRECT)
Correct! number-pad is a keyboard type supported on both iOS and Android.
Correct! phone-pad is a keyboard type supported on both iOS and Android.
Correct! email-address is a keyboard type supported on both iOS and Android.
10. Internal state is preserved when the content is scrolled out of the screen in which of these components? Select the correct option.
- SectionList
- FlatList
- ScrollView (CORRECT)
Correct! The ScrollView is not a performant component and simultaneously renders all the items in the list. The content is preserved in its internal state.
Subscribe to our site
Get new content delivered directly to your inbox.
Quiztudy Top Courses
Popular in Coursera
- Google Advanced Data Analytics
- Google Cybersecurity Professional Certificate
- 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!