Why core components build native UIs in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the core component that builds native UI in React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AButton

BView

CTextInput

DStyleSheet

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing components that are for input or styling, not containers.

The View component is a core React Native component that builds native UI containers.

2fill in blank

medium

Complete the code to create a native text element using a core component.

React Native

return <[1]>Hello, world!</[1]>;

Drag options to blanks, or click blank then click option'

AText

BView

CScrollView

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using View instead of Text for displaying text.

The Text component renders native text elements in React Native.

3fill in blank

hard

Fix the error in the code to correctly use a core component that builds native UI.

React Native

const App = () => {
  return (
    <[1]>Welcome!</[1]>
  );
};

Drag options to blanks, or click blank then click option'

AText

BButton

CTouchableOpacity

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button or Image components to display text.

The Text component is the correct core component to display text content natively.

4fill in blank

hard

Fill both blanks to create a native UI container with a text child.

React Native

return (
  <[1]>
    <[2]>Native UI</[2]>
  </[1]>
);

Drag options to blanks, or click blank then click option'

AView

BText

CScrollView

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping container and text components.

View is used as a container, and Text displays native text inside it.

5fill in blank

hard

Fill all three blanks to build a native UI with a container, text, and a button.

React Native

return (
  <[1]>
    <[2]>Press me</[2]>
    <[3] title="Click" onPress={() => alert('Clicked!')} />
  </[1]>
);

Drag options to blanks, or click blank then click option'

AView

BText

CButton

DTouchableOpacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using TouchableOpacity instead of Button for the button component.

View is the container, Text shows text, and Button is the native clickable button.