COURSE 10: REACT NATIVE QUIZ ANSWERS

Week 1: Introduction to React Native

Meta Android Developer Professional Certificate

Complete Coursera Answers & Study Guide

Click to Enroll in Coursera Meta Front-End Professional Certificate

Introduction to React Native INTRODUCTION

In this module, the basic structure and use of React Native is explored and demonstrated. You will learn to build a single page React Native app and style it using basic components such as View, Text and StyleSheet.

Learning Objectives

  • Differentiate between the uses and characteristics of React and React Native.
  • Use Expo CLI to set up a React Native app development project.
  • Use the Android emulator to render React Native components.
  • Understand how components are categorized in React Native.
  • Create a component in React Native.
  • Use the View, Text and ScrollView components to create a React Native screen.
  • Use StyleSheet to style a component in React Native.

KNOWLEDGE CHECK: INTRODUCTION TO REACT NATIVE

1. React Native uses the following tech stack to build cross-platform native apps. Select the correct answer.

  • Swift and Objective-C
  • JavaScript and React  (CORRECT)
  • Kotlin and Java

Correct! React Native uses JavaScript and React to build cross-platform native mobile applications.

2. React Native can build native mobile apps on the following platforms. Select all that apply.

  • iOS  (CORRECT)
  • Windows  (CORRECT)
  • Android  (CORRECT)

Correct! React Native can build native iOS apps.

Correct! React Native can build native Windows apps.

Correct! React Native can build native Android apps.

3. Which of the following statements are true about React Native?

  • React Native has a separate code base for both iOS and Android. These have to be maintained by two different teams of developers.
  • React Native code contains both React and Angular components.
  • React Native has one shared code base for iOS and Android written in JavaScript and React. (CORRECT)

Correct! React Native has one shared code base. The code is written in JavaScript and can render components native to each platform.

4. If you are new to mobile development and don’t want to write any custom native code, what do you think is the best way to build your React Native app?

  • Using React Native CLI
  • Using Expo CLI   (CORRECT)

Correct! The Expo CLI is much easier to set up, and you will not need to touch any native code while building React Native apps using Expo.

5. With Expo, you can push updates to the app Over the Air (OTA). This means you do not have to make updates via the app store!

  • True  (CORRECT)
  • False

Correct! With Expo, you can push updates OTA to the user’s device directly without going through the app store update process.

6. To be proficient in React Native, which programming languages should you also be proficient in? Select all that apply.

  • JavaScript  (CORRECT)
  • Swift
  • HTML  (CORRECT)
  • Kotlin
  • CSS  (CORRECT)

Correct!  You need to know JavaScript, React and the basics of HTML and CSS to get started.      

Correct!  You need to know JavaScript, React and the basics of HTML and CSS to get started.       

Correct!  You need to know JavaScript, React and the basics of HTML and CSS to get started.

7. You develop apps in React Basic that use the same codebase for multiple mobile platforms. What kind of mobile developer does this make you?      

  • Cross-Platform (CORRECT)
  • Hybrid
  • Web
  • Native

Well done! Cross-platform developers create a single codebase for native iOS and native Android apps at the same time.      

8. You are brand-new to mobile development and would like to set up a development environment for React Native. Which environment would be ideal?     

  • Expo Go  (CORRECT)
  • React Native CLI

That’s right! Expo Go offers a faster, easier installation process that still provides everything you need to develop simple apps in React Native.      

9. Before you install the Expo package, which preliminary steps should you take? 
Choose all that apply.     

  • Use a computer running on MacOS     
  • Install Node  (CORRECT)
  • Install an emulator  (CORRECT)   
  • Install an integrated development environment (IDE) such as VSCode  (CORRECT)

That’s right! Before installing the Expo package, you should have Node, an IDE and an emulator installed on your machine. You only need a MacOS computer if you want utilize an iOS emulator.       

That’s right! Before installing the Expo package, you should have Node, an IDE and an emulator installed on your machine. You only need a MacOS computer if you want utilize an iOS emulator.       

That’s right! Before installing the Expo package, you should have Node, an IDE and an emulator installed on your machine. You only need a MacOS computer if you want utilize an iOS emulator. 

10. What are the biggest benefits of using React Native are? Select all that apply.

  • Having a high learning curve to become a React Native developer, if you are a React developer
  • Sharing of ideas and code between web and mobile or React and React Native (CORRECT)
  • Sharing of code base across platforms (CORRECT)
  • The speed of development

Correct! The speed of development, sharing of code base across platforms, sharing of ideas and code between web and mobile or React and React Native, and lastly, the ease of deployment.      

Correct! The speed of development, sharing of code base across platforms, sharing of ideas and code between web and mobile or React and React Native, and lastly, the ease of deployment.      

Correct! The speed of development, sharing of code base across platforms, sharing of ideas and code between web and mobile or React and React Native, and lastly, the ease of deployment.

11. Which of the following statements are true about React Native Code?

  • React Native code is made up of components and follows component design. (CORRECT)
  • React Native code is written in JavaScript and React.   (CORRECT)
  • React Native follows inheritance pattern  
  • React Native code renders into native iOS and native Android code      (CORRECT)  

Correct! React Native follows component structure and is made up of components.      

Correct!  React Native code is written in JavaScript and uses the React library.      

Correct! The React Native code written in JavaScript renders into native iOS and native Android code.

12. Expo is an open-source platform that adds a layer of abstraction on top of React Native apps.  Which of the following are benefits of this? Check all that apply.

  • Expo has a feature to do Over The Air (OTA) updates.  (CORRECT)
  • You will only need a recent version of Node.js and an emulator to start building mobile apps in React Native using Expo. (CORRECT)
  • With Expo, you will be able to start right away with minimal setup and build a complete cross-platform app in React Native.    (CORRECT)
  • You need prior knowledge of native iOS or native Android code like Swift, Java or Kotlin. 

Feedback:  With Expo, you will be able to start right away with minimal setup, you’ll only need Node.js and an emulator, and you will be able to do OTA updates.      

With Expo, you will be able to start right away with minimal setup, you’ll only need Node.js and an emulator, and you will be able to do OTA updates.      

With Expo, you will be able to start right away with minimal setup, you’ll only need Node.js and an emulator, and you will be able to do OTA updates.    

SELF REVIEW: YOUR FIRST REACT NATIVE COMPONENT

1. When you created a footer component for the Little Lemon app, which one of these statements should you have used to import the footer component into the App component.

  • import LittleLemonFooter from './components/LittleLemonFooter';
    • import { LittleLemonFooter } from './components/LittleLemonFooter'; 
    • import LittleLemonFooter from './App; 

Correct! This statement imports the footer component from the components folder.    

2. Which of the following core components should you have used to create the footer component for Little Lemon? Select all that apply.

  • Text (CORRECT)
  • View (CORRECT)
  • Image

Correct! The footer component uses the Text component to display the footer text .

Correct! The footer component needs a parent View component to wrap it.    

3. Which one of the following code snippets contains the correct code for representing the Little Lemon footer component?

export default function LittleLemonFooter() { 
  return ( 
    <View 
      style={{ 
        backgroundColor: '#F4CE14', 
        marginBottom: 10, 
        fontSize: 18, 
        color: 'black', 
        textAlign: 'center', 
      }}> 
        All rights reserved by Little Lemon, 2022{' '} 
    </View> 
  ); 
} 
export default function LittleLemonFooter() { 
  return ( 
    <View 
      style={{ 
        backgroundColor: '#F4CE14', 
        marginBottom: 10, 
      }}> 
      <Text 
        style={{ 
          fontSize: 18, 
          color: 'black', 
          textAlign: 'center', 
        }}> 
        All rights reserved by Little Lemon, 2022{' '} 
      </Text> 
    </View> 
  ); 
} 
(CORRECT)

Correct! The code above represents the Little Lemon footer component accurately.    

4. Which component type is built into the react-native package and comes ready-to-use?      

  • Your native components
  • Community components
  • Core components (CORRECT)

Well done! React Native comes with several core components that do not require any additional packages and comes with the react-native package. These core components include View, Text, Image,  TextInput, ScrollView and many more.

5. Custom Components in React are reusable throughout the app. True or false?

  • False
  • True (CORRECT)

Well done! Custom Components in React are reusable throughout the app.   

KNOWLEDGE CHECK: REACT NATIVE COMPONENTS

1. Which of the following are core components in React Native? Select all that apply.

  • Text (CORRECT)
  • TextInput (CORRECT)
  • Maps
  • View (CORRECT)

Correct! Text is a core component of React Native. 

Correct! TextInput is a core component of React Native. 

Correct! View is a core component of React Native. 

2. React Native uses component-based architecture, and code is reused between components. True or false?

  • True (CORRECT)
  • False

Correct! React Native uses a component-based architecture like React, resulting in code reuse between the components.

3. Which of the following make up React Native components? Select all that apply.

  • Community Components (CORRECT)
  • Your Custom Native Components (CORRECT)
  • Core Components (CORRECT)
  • Utility Components

Correct! Community components can be installed from the community packages and used within the app.

Correct! Custom native components can be created as a part of the React Native app.

Correct! Core components are part of the React Native package.

4. Custom Native components are written in the following languages. Select all that apply.

  • React
  • Kotlin (CORRECT)
  • Swift (CORRECT)
  • JavaScript

Correct! Kotlin is used to write custom native components for the Android platform.

Correct! Swift is used to write custom native components for the iOS platform. 

5. Study the code below and choose the correct output that you will expect to see on the emulator.

import React from 'react';
import { Text, View } from 'react-native';


const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
 }
 
 const Cafe = () => {
   return (
     <View>
       <Text>Welcome!</Text>
       <Cat />
       <Cat />
       <Cat />
     </View>
   );
 }
 
 export default Cafe;
  • Welcome!
  • Welcome!
    I am also a cat!
    I am also a cat!
    I am also a cat!
      (CORRECT)
  • Error: cannot render the same component three times.
  • Welcome
    I am also a cat!

Correct! The component will render the welcome text and then render the text from the Cat component three times.

SELF REVIEW: BUILD A REACT NATIVE SCREEN

1. Which one of the following code snippets represents the correct parent view component for wrapping the Welcome screen?     

  • <View>
  • <View style={{ flex: 1 }}>
  • <View style={{ height: 500 }}>

Not quite. This view has an explicit height set. Setting explicit height to views is not recommended since mobile devices can have varied dimensions.  

2. Which of the following core components should you have used to create the Welcome screen for Little Lemon? Select all that apply.

  • View  (CORRECT)
  • Image
  • Text  (CORRECT)

Correct! The Welcome screen needs a parent View component to wrap it. 

Correct! The Welcome screen uses the Text component to display the welcome text.

3. Which one of the following code snippets correctly represents the Little Lemon app’s Welcome screen, as created in the previous exercise?

export default function WelcomeScreen() { 
  return ( 
    <View style={{ flex: 1 }}> 
      <Text 
        style={{ 
          padding: 40, 
          fontSize: 30, 
          color: '#EDEFEE', 
        }}> 
        Welcome to Little Lemon 
      </Text> 
      <Text 
        style={{ 
          fontSize: 24, 
          padding: 20, 
          marginVertical: 8, 
          color: '#EDEFEE', 
        }}> 
        Little Lemon is a charming neighborhood bistro that serves simple food   and classic cocktails in a lively but casual environment. We would love to hear your experience with us! 
      
      </Text> 
    </View> 
  ); 
} 
export default function WelcomeScreen() { 
  return ( 
    <View style={{ flex: 1 }}> 
      <Text 
        style={{ 
          padding: 40, 
          fontSize: 30, 
          color: '#EDEFEE', 
          textAlign: 'center', 
        }}> 
        Welcome to Little Lemon 
      </Text> 
      <Text 
        style={{ 
          fontSize: 24, 
          padding: 20, 
          marginVertical: 8, 
          color: '#EDEFEE', 
          textAlign: 'center', 
        }}> 
        Little Lemon is a charming neighborhood bistro that serves simple food and classic cocktails in a lively but casual environment. We would   love to hear your experience with us! 
      </Text> 
    </View> 
  ); 
} 
} 

(CORRECT)

4. The View component can be nested inside other views and can have zero or many children within it. True or false?

  • True (CORRECT)
  • False

That’s correct! The View component can be nested inside other views and can have zero or many children within it.

5. You have created a View component for your app and would like it to take 50% of the space on the screen. Which of the following styling parameter settings would you apply to achieve this?

  • margin: 50
  • flex: 0.5 (CORRECT)
  • padding: 50
  • viewSize

That’s right! A flex value of 0.5 will set the size of the View to 50% of the screen.    

SELF REVIEW: BUILD A SCROLLABLE COMPONENT

1. Which core component in React Native should you have imported to build the scrollable Welcome screen?

  • Scrollable
  • Scrollview (CORRECT)
  • FlatList

Correct! The core component ScrollView is used to build scrollable lists.

2. Which of the following core components should you have used to create the scrollable Welcome screen for Little Lemon? Select all that apply.

  • Text (CORRECT)
  • View
  • ScrollView (CORRECT)

Correct! The Welcome screen uses the Text component to display the welcome text. 

Correct! The Welcome screen uses the ScrollView component since it needs to be a scrollable screen. 

3. Which code snippets represent the final code for creating a ScrollView that wraps your Welcome screen?

  •  <ScrollView style={{ flex: 1 }}>
    … rest of the code …
    }
  •  <ScrollView indicatorStyle={“white”} style={{ flex: 1 }}>
    … rest of the code …

Correct! The code above accurately represents the Little Lemon Welcome screen with the ScrollView indicator style and correct flex property.

4. Which of the following are true statements about the ScrollView component? Check all that apply.

  • ScrollView does not inherit props from the View component  
  • It must be bounded by a height in order to work. (CORRECT)
  • ScrollView is a core React Native component and comes as a part of the React Native Package. (CORRECT)

Well done! ScrollView must be bounded by a height, because it contains unbounded height children into a bounded container.

Well done! ScrollView comes as part of the React Native package, and it must be bounded in height in order to work.  

5. You would like to create a list for your app that is scrolled horizontally. Which ScrollView prop would you pass to accomplish this?  

  • indicatorStyle
  • vertical
  • horizontal (CORRECT)
  • paddingHorizontal 

Well done! When the horizontal prop is set to ‘true’, the list items are set horizontally.

KNOWLEDGE CHECK: VIEWS, TEXT AND SCROLLABLE COMPONENTS

 1. A View component can be nested inside other views. Select the correct option.

  • True (CORRECT)
  • False

Correct! The View component is designed to be nested inside other views and can have zero to many children of any type. 

2. Which of the following code blocks are correct and will not throw any errors? Select all that apply.

<View>
  <Text>
    Some text
  </View>
</Text>
<View>
  <Text>
    Some text
  </Text>
</View>
(CORRECT)
<View>
  Some text
</View>
<View>
  <Text>Some text
    <Text> Some more text</Text>
  </Text>
</View>
(CORRECT)

Correct! The text is wrapped inside a View component. It will print “Some text.”

Correct! The text is nested within another Text component, and they are all wrapped within a View component. It will print “Some text Some more text.”

3. Study the code below and select the image that best represents how the code will render on the emulator.

import React from "react";
import { View, Text } from "react-native";
const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <View style={{ backgroundColor: "blue", flex: 0.5 }} />
      <View style={{ backgroundColor: "red", flex: 0.3 }} />
    </View>
  );
};
export default ViewBoxesWithColorAndText;
  • g4L5DG8u0qB74TyavhS1X wa2k3t3iIe5rGN5cI7QUPgJW2iYRmmK4qv2 SvO7ln1OoqXIOUyiQXp4VFWQFv8bHcXu9nlzJhSWR0 LuPcrkxQ10IL016OuOAciqFBzyvy17EjDB8P Kadqy6qpAXkQ
  • (Corrrect)
  • HF 9n5X7TzY5vuUjF0NtNIYvsaMKVboxkolNkguaPic9QwUsO2sVO6VZoQNIXvxFfdyX CeEthEPeQh0bzUqxsaCrsXsE keJP5b2XbflfAF0e8yPih7IQBR3dgAx 1SnoKB AlTNzfu8H0ZyYqgsQ

Correct! Because the flex value is 0.5, the blue view occupies 50% of the area, while the flex value of 0.3 mean the red view occupies 30% of the area.

4. Which of the following statements are true about the ScrollView component? Select all that apply.

  • ScrollView component always needs a bounded height and can be set by providing all parent views with a bounded height. (CORRECT)
  • ScrollView is a core component that does not need to be bounded by height.
  • ScrollView component can have a bounded height by directly setting the view’s height. (CORRECT)

Correct! ScrollView component always needs a bounded height and can be set by ensuring that all parent views have a bounded height.

Correct! ScrollView component always needs a bounded height, which can be directly set by providing a height to the view.

5. Study the code below and choose the correct output that you will expect to see on the emulator.

<Text style={{ fontWeight: 'bold' }}>
  I am bold
  <Text style={{ color: 'red' }}> and red</Text>
</Text>
  • aQJInAsku0fEw RJY2hA4j0awfiV782lNdp 1J7E qQ0IzKuV1IqXsd97zFVx3rYIBR YPWd7CHv1mPZk7XBH4syszlnrFBTvTQ5lt53zuh4O0zhpEvygDU3iPhSzaIRmdb2g05VP DUPdWcEiehvg
  • (CORRECT)YcKcdPj9iVJKtZ0MhrO5AJC4Pap9aBIK10a6MhaUv4fua8ARGwuQrhoIQATCmMmaQ9 Y1zTsUsoRReC OWq9uk6pr8TiytbZLQhImI3 lRrmZmOb5a52MroOETZJhB9oX5YfXB9Ly9RliUiwecPe1Q
  • It will throw an error because nesting is not allowed in Text components.
  • eJTK tYoP61paM98C6kS08p4j8vqnipnYXVxTvrehY8EWk0o7 AvHSXzHemrH2 ZDdHtQEq8kJ2Lpba Rd4RoP58UpuFSqOCv0kNvGSM7SzAaD4cg5iD3 sH6xJRjqjBewS7bUjMDd H26yQ99HC9A

Correct! The first part of the text will be bold, and the nested text will be bold and red. This is because when a Text component is nested within another Text component, it can inherit the parent component’s styles.

SELF REVIEW: STYLE A COMPONENT

1. Which one of these approaches is recommended for more manageable code when styling components in this exercise?

  • Calling styles from a StyleSheet (CORRECT)
  • Applying a style prop on each JSX element.

Correct! The StyleSheet  API abstracts styles from the component’s render method and adds them to the StyleSheet const.

2. From the exercise you completed, which one of these code snippets represents the styling used for the Little Lemon footer text?

footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
    font: 'italic', 
  }, 
footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
fontStyle: 'italic', 
 }
(CORRECT)
footerText: { 
    fontSize: 18, 
    color: 'black', 
    textAlign: 'center', 
    fontWeight: 'italic', 
  }, 

Correct! The fontStyle is italic, and all other styling parameters match this exercise’s Little Lemon footer component.

3.  Which one of these code snippets represents the final code for your StyleSheet that contains the styles for the Welcome screen?

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: '#EDEFEE',
    textAlign: 'center',
  },
  regularText: {
    fontSize: 24,
    padding: 20,
    marginVertical: 8,
    color: '#EDEFEE',
    textAlign: 'center',
  },
});
(CORRECT)
const styles = StyleSheet.initialize({
  container: {
    flex: 1,
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: '#EDEFEE',
    textAlign: 'center',
  },
  regularText: {
    fontSize: 24,
    padding: 20,
    marginVertical: 8,
    color: '#EDEFEE',
    textAlign: 'center',
  },
});

Correct! The code above represents the Little Lemon Welcome screen’s styles abstracted into the StyleSheet using the create method.

4. The StyleSheetAPI helps abstract the component styles from the component’s render and results inreadable and meaningful code.  True or false?

  • True (CORRECT)
  • False

Well done! StyleSheetAPI helps abstract the component styles and allows you to give meaningful names to each style, thus making the component readable and clean.

5. Which of these are true about the StyleSheetAPI in React Native?  

  • It is an abstraction similar to CSS StyleSheets. (CORRECT)
  • The create method creates a stylesheet style reference from the given object. (CORRECT)
  • It is a form of inline styling.
  • Using StyleSheet results in cleaner and readable code. (CORRECT)

Well done! StyleSheetAPI in React Native is an abstraction similar to CSS StyleSheets. The create method creates a stylesheet style reference from the given object, and using StyleSheet results in cleaner and readable code.

Well done! StyleSheetAPI in React Native is an abstraction similar to CSS StyleSheets. The create method creates a stylesheet style reference from the given object, and using StyleSheet results in cleaner and readable code.

Well done! StyleSheetAPI in React Native is an abstraction similar to CSS StyleSheets. The create method creates a stylesheet style reference from the given object, and using StyleSheet results in cleaner and readable code.

MODULE QUIZ: INTRODUCTION TO REACT NATIVE

1. Of the following, what are some benefits of React Native? Select all that apply.

  • Cost-effective (CORRECT)
  • Superior developer experience (CORRECT)
  • Builds cross-platform native apps (CORRECT)
  • Uses Swift and Kotlin

Correct! React Native is extremely cost-effective since it can have a shared code base across multiple platforms.

Correct! React Native provides a superior developer experience, since it supports modern tools and has a community of libraries.

Correct! React Native builds cross-platform native apps.

2. React Native components can be categorized into the following groups. Select all that apply.

  • None of the above.
  • Core Components (CORRECT)
  • Your native custom components (CORRECT)
  • Community Components (CORRECT)

Correct! React Native provides core components out of the box.

Correct! Your native custom components are React Native components.

Correct! Additional React Native components can also be installed from the community packages.

3. Which of the following statements are true about React Native?

  • React Native is cost-effective since there is no need for multiple teams. A single code base is shared between iOS and Android, and all code changes reflect upon both platforms.  (CORRECT)
  • React Native has separate code bases for both iOS and Android. These have to be maintained by two different teams of developers. Because of this, React Native could be quite expensive.

Correct. React Native is cost-effective since there is no need for multiple teams.

4. If you are new to mobile development, what is the recommended way to set up React Native?

  • Using Expo CLI (CORRECT)
  • Using React Native CLI

Correct! The Expo CLI is much easier to set up, and you will not need to touch any native code while building React Native apps using Expo.

5. With Expo, you can push the Over The Air (OTA) updates. This is because:

  • Expo CLI is a paid service, and you can override app store requirements to push updates.
  • All of the code is written in JavaScript, without native code. This enables Expo to push updates OTA. (CORRECT)

Correct! Yes, with Expo, you can push updates OTA to the user’s device directly without going through the app store to update, because all the code is in JavaScript.

6. Which of the following is true about the View component? 

  • A View component is a parent element that cannot have other views inside it.
  • A View component can be nested inside other views and can have as many children of any type. (CORRECT)

Correct! The View component is designed to be nested inside other views and can have zero to many children of any type.

7. Styles should not be abstracted away from the render function of a component, as this would make the code harder to read and understand. True or false?

  • True
  • False (CORRECT)

Correct! This is not true. The styles must be abstracted from a component’s render function to make it much more readable and easier to understand.

8. Which job title would be most applicable if you learned React Native and used it to develop applications?

  • Android Developer
  • Cross-Platform Developer (CORRECT)
  • iOS Developer

Correct! You would be a cross-platform developer who can build native mobile apps on iOS and Android.

9. You are asked to write a readable and clean component. Which of the following code snippets better matches this description?

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default function LittleLemonHeader() {
  return (
    <View style={headerStyles.container}>
      <Text style={headerStyles.headerText}>
         Little Lemon
         <Text style={headerStyles.innerText}> Cafe</Text>
      </Text>
  </View>
  );
}
const headerStyles = StyleSheet.create({
  container: {
    flex: 0.1,
    backgroundColor: '#F4CE14',
  },
  headerText: {
    padding: 40,
    fontSize: 30,
    color: 'black',
    textAlign: 'center',
  },
  innerText: {
    fontWeight: 'bold',
  },
});
import * as React from 'react';
import { View, Text } from 'react-native';


export default function LittleLemonHeader() {
  return (
    <View style={{ flex: 0.1, backgroundColor: '#F4CE14' }}>
<Text style={{ padding: 40, fontSize: 30, color: 'black', textAlign: "center" }}>
        Little Lemon
        <Text style={{ fontWeight: 'bold' }}> Cafe</Text>
      </Text>
    </View>
  );
}

Correct! This component abstracts the styles away from the component’s render and uses the StyleSheet API instead. This is cleaner and easier to read. 

10. Which of the following code snippets are correct and will not throw any errors? Select all that apply.

<ScrollView>
  <Text>Some text
    <Text> Some more text</Text>
  </Text>
</ScrollView>
(CORRECT)  
<ScrollView>
  Some text
</ScrollView>
<ScrollView>
  <Text>
    Some text 
  </ScrollView>
</Text>
<ScrollView>
  <Text>
    Some text
  </Text>
</ScrollView>
(CORRECT)

Correct! This code is correct. The text is nested within another Text component, and they are all wrapped within a ScrollView. It will print “Some text” and then “Some more text”    

Correct! This code is correct. The text is wrapped inside a ScrollView and will print “Some text.”  

Subscribe to our site

Get new content delivered directly to your inbox.

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!