Lists and Text Input in React Native INTRODUCTION

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?

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.

3. Which of these code snippets represents the final code for the Item component that renders each item on the menu with its price?

4. The FlatList component uses lazy rendering of component items. Which of the following are characteristics of lazy rendering? Choose all that apply.

5. Which properties are required when using the FlatList component? Select all that apply.

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? 

2. Which of the following are required props of the FlatList component? Select all that apply. 

3. Which of the following features does the FlatList component support? Select all that apply.

4. What is the keyExtractor prop used for?

5.  The internal state is not preserved when content scrolls out of the render window while using FlatList. True or false?

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?

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.

2. Of the following core React Native components, which were used in the MenuItems component? Select all that apply.

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)

4. Which of the following are characteristics of the SectionList component? Select all that apply.

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?  

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?

2. Which of the following are required props of the SectionList component? Select all that apply.

3. Which of the following are features supported by the SectionList component? Select all that apply.

4. The internal state is not preserved when content scrolls out of the render window while using SectionList. 

5. Which method is used to render section headers using the SectionList component?

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, 
  }, 

2. Which prop should you have used to set the placeholder text within the TextInput component in this exercise?

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'} 
 /> 

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?   

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?  

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?

2. The TextInput component inherits all the props of the _________ component, in addition to its props:

3. Which of the following are features supported by the TextInput component? Select all that apply.

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?

5. What methodology would you use to track what the user types in the text input within a component? Select the correct option.

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?   

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?  

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:

const [email, onChangeEmail] = useState('');
const [password, onChangePassword] = useState('');

const [textInput, onChangeText] = useState('');

2. Which prop should you have used to set the password field with hidden characters as the user types?

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'} 
/> 

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.  

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;

2. Which of these methods will return a call-back when a TextInput component is in focus? Select all that apply.

3. Which of the following are features supported by the TextInput component? Select all that apply.

4. The TextInput component supports multiple lines for text entry 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? 

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?   

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.

2. The keyExtractor is a required prop to both the FlatList and SectionList components. True or false?

3. Which feature is NOT supported by the FlatList component? Select the correct option.

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>
   );
};

5. Which method would you use to make a native text input lose focus? 

6. Which one of these props are used to configure a separator component between each item in the FlatList?

7. The SectionList component can be rendered without providing the sections prop to it.

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.

9. Select all the keyboard types that are supported cross-platform by the TextInput component.

10. Internal state is preserved when the content is scrolled out of the screen in which of these components? Select the correct option.