Why deployment reaches users in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a simple message after deployment.

React Native

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

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

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

A"Welcome"

B"Hello, users!"

C"Loading..."

D"Error"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the string.

Using a component instead of a string inside Text.

The text "Hello, users!" shows a friendly message confirming deployment reached users.

2fill in blank

medium

Complete the code to navigate to the Home screen after deployment.

React Native

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

export default function App({ navigation }) {
  return (
    <View>
      <Button title="Go Home" onPress={() => navigation.[1]('Home')} />
    </View>
  );
}

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

Apush

Bpop

Cnavigate

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using pop which goes back instead of forward.

Using replace which replaces current screen.

The navigate method moves the user to the Home screen after deployment.

3fill in blank

hard

Fix the error in the deployment status update function.

React Native

function updateStatus(status) {
  if (status === [1]) {
    console.log('Deployment successful');
  }
}

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

A'success'

Bsuccess

C"success"

D'Success'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the string.

Using double quotes inconsistently.

The status should be compared to the string 'success' with single quotes.

4fill in blank

hard

Fill both blanks to create a deployment status message component.

React Native

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

export default function StatusMessage({ status }) {
  return <Text>{`Deployment is [1]: [2]`}</Text>;
}

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

Asuccessful

Bfailed

Cstatus

Dpending

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong status word.

Not using the variable name for the second blank.

The message shows "Deployment is successful: " followed by the status value.

5fill in blank

hard

Fill all three blanks to create a function that returns deployment status text.

React Native

function getStatusText([1]) {
  return `Deployment [2] with code [3]`;
}

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

Astatus

Bcompleted

Ccode

Dfailed

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names.

Mixing up status and code in the message.

The function takes status and code as inputs and returns a message like "Deployment completed with code 200".