Environment setup (Node, Watchman, Xcode, Android Studio) in React Native - Mini App: Build & Ship

Build: Setup Confirmation Screen

This screen confirms that the React Native development environment is set up correctly with Node, Watchman, Xcode, and Android Studio.

Target UI

-----------------------------
|  React Native Setup Check  |
|---------------------------|
| Node: Installed           |
| Watchman: Installed       |
| Xcode: Installed          |
| Android Studio: Installed |
|                           |
| [Continue]                |
-----------------------------

Display a screen listing Node, Watchman, Xcode, and Android Studio with 'Installed' status

Add a button labeled 'Continue' at the bottom

The button does not need to perform any action for this exercise

Use simple React Native components and styles

Starter Code

React Native

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

export default function SetupCheckScreen() {
  return (
    <View style={styles.container}>
      {/* TODO: Add status texts for Node, Watchman, Xcode, Android Studio */}
      {/* TODO: Add a Continue button */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  }
});

Task 1

Task 2

Solution

React Native

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

export default function SetupCheckScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.statusText}>Node: Installed</Text>
      <Text style={styles.statusText}>Watchman: Installed</Text>
      <Text style={styles.statusText}>Xcode: Installed</Text>
      <Text style={styles.statusText}>Android Studio: Installed</Text>
      <View style={styles.buttonContainer}>
        <Button title="Continue" onPress={() => {}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  statusText: {
    fontSize: 18,
    marginVertical: 6
  },
  buttonContainer: {
    marginTop: 30,
    width: '60%'
  }
});

This screen uses simple React Native components to show the setup status for Node, Watchman, Xcode, and Android Studio. Each status is a Text component styled for readability. The Button labeled 'Continue' is placed below the status texts inside a container with margin for spacing. The button currently has an empty onPress handler since no action is required for this exercise. The layout centers all content vertically and horizontally with padding for comfortable spacing.

Final Result

Completed Screen

-----------------------------
|  React Native Setup Check  |
|---------------------------|
| Node: Installed           |
| Watchman: Installed       |
| Xcode: Installed          |
| Android Studio: Installed |
|                           |
| [Continue]                |
-----------------------------

User sees the list of installed tools confirming environment setup

User can tap the 'Continue' button (no action occurs)

Stretch Goal

Add a message below the button that says 'Environment is ready!' in green color

💡 Hint

Use a Text component with style color set to 'green' and place it below the Button inside the main container