Why React Native enables cross-platform mobile apps - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the core React Native component for displaying text.

React Native

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

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

AText

BTextInput

CView

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a container component like View instead of Text.

The Text component is used to display text in React Native apps.

2fill in blank

medium

Complete the code to create a simple React Native component that returns a View with a Text inside.

React Native

export default function App() {
  return (
    <[1]>
      <Text>Hello!</Text>
    </[1]>
  );
}

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

ASafeAreaView

BText

CScrollView

DView

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text as a container, which is not correct.

The View component is a container for layout and grouping in React Native.

3fill in blank

hard

Fix the error in the code by completing the import statement to enable cross-platform components.

React Native

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

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

AStyleSheet

BComponent

CPlatform

DAppRegistry

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing StyleSheet which is for styling, not platform detection.

The Platform module helps detect the platform (iOS or Android) to write platform-specific code.

4fill in blank

hard

Fill both blanks to create a style object with a background color and padding.

React Native

const styles = StyleSheet.create({
  container: {
    backgroundColor: '[1]',
    [2]: 10
  }
});

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

Ablue

Bmargin

Cpadding

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin instead of padding for inside spacing.

The backgroundColor sets the background color, and padding adds space inside the container.

5fill in blank

hard

Fill all three blanks to create a cross-platform button with a press handler.

React Native

import { Button, Alert } from 'react-native';

export default function App() {
  const onPressHandler = () => {
    Alert.alert('[1]');
  };

  return (
    <Button
      title=[2]
      onPress=[3]
    />
  );
}

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

AButton pressed!

B"Click me"

ConPressHandler

DhandlePress

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined function names or wrong quotes for strings.

The alert shows a message when the button is pressed. The title is the button text, and onPress is the function called on press.