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

Practice

1. Which tool do you need to install to run JavaScript code outside a web browser when setting up React Native?

easy

A. Xcode

B. Watchman

C. Android Studio

D. Node.js

Solution

1. Step 1: Understand the role of Node.js

   Node.js allows running JavaScript code on your computer, outside the browser, which is essential for React Native development.

2. Step 2: Identify other tools' purposes

   Watchman watches file changes, Xcode is for iOS apps, and Android Studio is for Android apps, but none run JavaScript directly.

3. Final Answer:

   Node.js -> Option D

4. Quick Check:

   JavaScript runtime = Node.js [OK]

Hint: Node.js runs JavaScript outside browsers [OK]

Common Mistakes:

• Confusing Watchman as JavaScript runtime
• Thinking Xcode runs JavaScript
• Assuming Android Studio runs JavaScript

2. Which command correctly checks the installed version of Watchman on macOS?

easy

A. xcodebuild -version

B. node -v

C. watchman --version

D. android-studio --version

Solution

1. Step 1: Identify the command for Watchman version

   The command to check Watchman version is watchman --version.

2. Step 2: Recognize other commands check different tools

   node -v checks Node.js, xcodebuild -version checks Xcode, and android-studio --version is not a valid command.

3. Final Answer:

   watchman --version -> Option C

4. Quick Check:

   Watchman version command = watchman --version [OK]

Hint: Watchman version uses watchman --version [OK]

Common Mistakes:

• Using node -v for Watchman
• Trying android-studio --version (invalid)
• Using xcodebuild -version for Watchman

3. What will be the output of the command xcodebuild -version after installing Xcode correctly?

medium

A. watchman version 4.9.0

B. Xcode 14.3
Build version 14E222b

C. Node.js v18.12.1

D. Android Studio 2022.1.1

Solution

1. Step 1: Understand the command output

   The command xcodebuild -version outputs the Xcode version and build number.

2. Step 2: Match output to correct tool

   Output mentioning "Xcode" and build version matches Xcode, others show versions of different tools.

3. Final Answer:

   Xcode 14.3\nBuild version 14E222b -> Option B

4. Quick Check:

   Xcode version command output = Xcode 14.3 Build version 14E222b [OK]

Hint: Xcode version shows 'Xcode' and build number [OK]

Common Mistakes:

• Confusing Node.js version output with Xcode
• Mixing Watchman output with Xcode
• Expecting Android Studio output from xcodebuild

4. You run node -v but get an error saying command not found. What is the most likely cause?

medium

A. Node.js is not installed or not added to PATH

B. Watchman is not running

C. Xcode is not installed

D. Android Studio is outdated

Solution

1. Step 1: Analyze the error message

   "command not found" means the system cannot find the node command, usually because Node.js is missing or PATH is incorrect.

2. Step 2: Eliminate unrelated causes

   Watchman, Xcode, and Android Studio do not affect the node command availability.

3. Final Answer:

   Node.js is not installed or not added to PATH -> Option A

4. Quick Check:

   Command not found = missing Node.js or PATH issue [OK]

Hint: Command not found means missing install or PATH error [OK]

Common Mistakes:

• Assuming Watchman affects node command
• Thinking Xcode installation affects node
• Blaming Android Studio for node errors

5. You want to develop a React Native app for both iOS and Android. Which combination of tools must you install and verify?

hard

A. Node.js, Watchman, Xcode, Android Studio

B. Node.js, Xcode only

C. Watchman, Android Studio only

D. Xcode and Android Studio only

Solution

1. Step 1: Identify tools needed for iOS and Android

   Xcode is required for iOS development, Android Studio for Android, Node.js to run JavaScript, and Watchman to watch file changes on macOS.

2. Step 2: Confirm all tools for full setup

   To develop for both platforms, all four tools must be installed and verified.

3. Final Answer:

   Node.js, Watchman, Xcode, Android Studio -> Option A

4. Quick Check:

   All tools for iOS and Android = Node.js, Watchman, Xcode, Android Studio [OK]

Hint: All four tools needed for full React Native setup [OK]

Common Mistakes:

• Skipping Watchman on macOS
• Installing only Xcode or Android Studio
• Forgetting Node.js is essential