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".

Practice

1. What is the main purpose of deploying a React Native app?

easy

A. To test the app only on a simulator

B. To make the app available for users to download and use

C. To write the app's source code

D. To delete the app from the device

Solution

1. Step 1: Understand deployment meaning

   Deployment means making the app ready and available for users outside the development environment.

2. Step 2: Identify user access after deployment

   After deployment, users can download and install the app on their devices.

3. Final Answer:

   To make the app available for users to download and use -> Option B

4. Quick Check:

   Deployment = app available to users [OK]

Hint: Deployment means app is ready for users to install [OK]

Common Mistakes:

• Confusing deployment with coding
• Thinking deployment is only testing
• Believing deployment deletes the app

2. Which command is commonly used to build a React Native app for deployment on Android?

easy

A. npx react-native build-android

B. npx react-native start

C. npx react-native run-android

D. npx react-native deploy

Solution

1. Step 1: Identify build command for Android

   The command npx react-native run-android builds and runs the app on an Android device or emulator.

2. Step 2: Check other commands

   start runs the Metro bundler, build-android and deploy are not valid React Native CLI commands.

3. Final Answer:

   npx react-native run-android -> Option C

4. Quick Check:

   Build Android app = run-android command [OK]

Hint: Use run-android to build and launch on Android [OK]

Common Mistakes:

• Using start instead of run-android
• Typing non-existent commands
• Confusing build and start commands

3. What happens after you publish your React Native app to the app store?

medium

A. Users can download and install the app on their devices

B. The app automatically updates on all devices without user action

C. The app source code becomes public

D. The app stops working on development devices

Solution

1. Step 1: Understand publishing effect

   Publishing to app stores makes the app available for users to download and install.

2. Step 2: Evaluate other options

   Automatic updates require user permission or special setup, source code does not become public by publishing, and development devices keep working.

3. Final Answer:

   Users can download and install the app on their devices -> Option A

4. Quick Check:

   Publish app = users download/install [OK]

Hint: Publishing means app is ready for user download [OK]

Common Mistakes:

• Assuming automatic updates happen instantly
• Thinking publishing shares source code
• Believing development devices stop working

4. You tried to deploy your React Native app but users report they cannot find it in the app store. What is the most likely cause?

medium

A. You did not run the app on a simulator

B. You wrote wrong code in the app

C. You did not install React Native CLI

D. You forgot to submit the app for review and approval

Solution

1. Step 1: Understand app store publishing process

   Apps must be submitted and approved by the app store before becoming visible to users.

2. Step 2: Check other options

   Wrong code does not hide app from store, CLI installation affects development but not store visibility, running on simulator is unrelated to publishing.

3. Final Answer:

   You forgot to submit the app for review and approval -> Option D

4. Quick Check:

   App store visibility needs submission [OK]

Hint: App must be approved before users see it in store [OK]

Common Mistakes:

• Blaming code errors for store visibility
• Confusing development tools with publishing
• Thinking simulator affects app store listing

5. You want to ensure your React Native app reaches users quickly after deployment. Which combination of steps helps achieve this?

hard

A. Build the app, submit to app stores, and promote the app to users

B. Write code, run on simulator, and share source code publicly

C. Build the app, skip app store submission, and email APK files to users

D. Only test the app locally and wait for users to find it

Solution

1. Step 1: Identify correct deployment steps

   Building the app and submitting it to app stores makes it available officially to users.

2. Step 2: Recognize promotion importance

   Promoting the app helps users discover and download it faster.

3. Step 3: Evaluate other options

   Sharing source code or skipping app store submission limits user reach; local testing alone does not deploy.

4. Final Answer:

   Build the app, submit to app stores, and promote the app to users -> Option A

5. Quick Check:

   Build + submit + promote = fast user reach [OK]

Hint: Build, submit, and promote to reach users fast [OK]

Common Mistakes:

• Skipping app store submission
• Confusing testing with deployment
• Ignoring promotion after deployment