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.