Why deployment reaches users in React Native - Build It to Prove It

Build: Deployment Explanation

This screen explains in simple terms why deploying a React Native app makes it available to users.

Target UI

-----------------------------
| Deployment Explanation     |
|---------------------------|
| Why does deployment reach  |
| users?                    |
|                           |
| [Explanation text here]   |
|                           |
| [OK Button]               |
-----------------------------

Show a title at the top: 'Deployment Explanation'

Display a short explanation text about deployment reaching users

Add an OK button at the bottom that closes the screen (for this exercise, just a button with no action)

Starter Code

React Native

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

export default function DeploymentExplanation() {
  return (
    <View style={styles.container}>
      {/* TODO: Add title text here */}
      {/* TODO: Add explanation text here */}
      {/* TODO: Add OK button here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 40
  },
  explanation: {
    fontSize: 16,
    textAlign: 'center',
    marginVertical: 20
  },
  buttonContainer: {
    marginBottom: 40
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function DeploymentExplanation() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Deployment Explanation</Text>
      <Text style={styles.explanation}>
        When you deploy a React Native app, it is sent to app stores or directly to users' devices. This makes the app available for users to download and use.
      </Text>
      <View style={styles.buttonContainer}>
        <Button title="OK" onPress={() => {}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'space-between',
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 40
  },
  explanation: {
    fontSize: 16,
    textAlign: 'center',
    marginVertical: 20
  },
  buttonContainer: {
    marginBottom: 40
  }
});

This screen uses simple React Native components to show why deployment makes the app reach users.

The title is big and centered for clarity.

The explanation text uses simple language to describe that deployment sends the app to app stores or devices, making it available.

The OK button is placed at the bottom for a natural finish, though it does not perform any action here.

Final Result

Completed Screen

-----------------------------
| Deployment Explanation     |
|---------------------------|
|                           |
| When you deploy a React    |
| Native app, it is sent to |
| app stores or directly to |
| users' devices. This makes |
| the app available for     |
| users to download and use.|
|                           |
|           [ OK ]           |
-----------------------------

Tapping OK button currently does nothing (placeholder for closing screen)

Stretch Goal

Add a simple alert popup when the OK button is pressed saying 'Thanks for reading!'

💡 Hint

Use the Alert API from react-native and call Alert.alert inside the button's onPress handler.

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