Pressable Images and Hooks in React Native INTRODUCTION

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

2. Which method did you use to handle the event when the user clicks on a pressable area within the Pressable component?

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> 

// State 
  const [loggedIn, onLogin] = useState(false); 


// Component


<Pressable onPress={!loggedIn} style={styles.button}> 
      <Text style={styles.buttonText}>Log in</Text> 
  </Pressable> 

KNOWLEDGE CHECK: PRESSABLE COMPONENT

1. Which components can you use to detect various stages of press interactions on elements? Select the correct option.

2. The Pressable component inherits all the styles of the _________ component. Select the correct option.

3. Which of the following can be acceptable children of the Pressable component? Select all that apply.

4. The Pressable component is always styled to appear as a button. True or false?

5. What is the default time after the onLongPress is called after the onPressIn?

6. A user’s press gesture is deactivated on the Little Lemon app. Which method is called when this action occurs?  

7. The Pressable component only accepts Text components as children. True or false? 

SELF REVIEW: DISPLAYING IMAGES IN YOUR APP

1. Which one of the following statements is true about the Image component?

2. What value should you have passed to the resizeMode prop of the Image component while rendering the Little Lemon logo in 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, 
}

image: { 
    width: 50, 
    height: 50, 
    borderRadius: 10, 
}

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.

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.

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. 

7. If you want an image to fill the entire box, which of the following resize mode props will you use?  

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?

KNOWLEDGE CHECK: IMAGES IN REACT NATIVE

1. Which component would you use to display different images in React Native? Select the correct option.

2. The Image component inherits all the props of _________ component. Select the correct option.

3. Which of the following are some of the supported image formats in React Native? Select all that apply.

4. The Image component can fetch images from a network and display them. True or false?

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;

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

2. What are the values that the useColorScheme hook can return? Select all that apply.

3. The useColorScheme hook is not part of the React Native package. It must be obtained from the community hooks package. True or false?

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?      

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.

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.      

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?      

KNOWLEDGE CHECK: HOOKS IN REACT NATIVE

1. What are the supported color schemes in the useColorScheme hook? Select all that apply.

2. The React Native community hooks have to be installed separately by installing the react-native-community/hooks package. True or false?

3. Which hook would you use to determine if the virtual keyboard is displayed and also determines its height?

4. The useWindowDimensions hook is part of the core React Native package. True or false?

5. In which one of the following scenarios would the useState hook be useful?

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.

2. Which component would you use to display a background image on your mobile screen?

3. The Pressable component can accept child/children elements that can be a clickable area. True or false?

4. What are the values accepted by the resizeMode prop to the Image component? Select all that apply.

5. Which of the following statements are true about the Image component? Select all that apply.

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;

7. Which hook would you use to determine whether the app’s current state is active, inactive, or backgrounded? Select the correct option.

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?

9. Which of the following is true about the ImageBackground component? Select the correct option.

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?