Expo Go for quick start in React Native - Mini App: Build & Ship

Build: Welcome Screen

A simple welcome screen app to demonstrate quick start with Expo Go. It shows a greeting message and a button to change the greeting.

Target UI

-----------------------
|                     |
|   Welcome to Expo!   |
|                     |
|   [Change Greeting]  |
|                     |
-----------------------

Display a centered text greeting 'Welcome to Expo!'

Add a button below the text labeled 'Change Greeting'

When the button is pressed, change the greeting text to 'Hello from Expo Go!'

Use React Native components and hooks

Ensure the UI is centered vertically and horizontally

Starter Code

React Native

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

export default function App() {
  // TODO: Add state for greeting text

  return (
    <View style={styles.container}>
      {/* TODO: Display greeting text here */}
      {/* TODO: Add button to change greeting */}
    </View>
  );
}

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

Task 1

Task 2

Task 3

Solution

React Native

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

export default function App() {
  const [greeting, setGreeting] = useState('Welcome to Expo!');

  const changeGreeting = () => {
    setGreeting('Hello from Expo Go!');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.greetingText}>{greeting}</Text>
      <Button title="Change Greeting" onPress={changeGreeting} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  greetingText: {
    fontSize: 24,
    marginBottom: 20
  }
});

This app uses React Native with Expo Go to quickly create a simple welcome screen.

We use the useState hook to keep track of the greeting text. Initially, it shows 'Welcome to Expo!'.

The Text component displays the greeting, and the Button below it changes the greeting to 'Hello from Expo Go!' when pressed.

The View container uses flexbox to center the content both vertically and horizontally for a clean look.

Final Result

Completed Screen

-----------------------
|                     |
|   Hello from Expo Go!|
|                     |
|   [Change Greeting]  |
|                     |
-----------------------

User sees 'Welcome to Expo!' text centered on screen with a button labeled 'Change Greeting' below.

When user taps the button, the text changes to 'Hello from Expo Go!'.

Button remains visible for repeated taps but text stays the same after first change.

Stretch Goal

Add a reset button that changes the greeting back to 'Welcome to Expo!'

💡 Hint

Add another Button component with title 'Reset Greeting' and onPress handler that sets greeting state back to initial text.

Practice

1. What is the main purpose of Expo Go in React Native development?

easy

A. To run React Native apps instantly on your phone without complex setup

B. To compile native code for Android and iOS manually

C. To replace the need for JavaScript in app development

D. To create backend APIs for mobile apps

Solution

1. Step 1: Understand Expo Go's role

   Expo Go allows developers to run React Native apps quickly on their phones without building native code.

2. Step 2: Compare options

   Compiling native code manually, replacing the need for JavaScript, and creating backend APIs are unrelated tasks. Only running React Native apps instantly on your phone without complex setup matches Expo Go's purpose.

3. Final Answer:

   To run React Native apps instantly on your phone without complex setup -> Option A

4. Quick Check:

   Expo Go = Quick app running [OK]

Hint: Expo Go runs apps instantly on devices without building [OK]

Common Mistakes:

• Thinking Expo Go compiles native code manually
• Confusing Expo Go with backend tools
• Assuming Expo Go replaces JavaScript

2. Which command starts a new Expo project using Expo CLI?

easy

A. react-native init MyApp

B. expo start new MyApp

C. npm run expo create MyApp

D. expo init MyApp

Solution

1. Step 1: Recall Expo CLI commands

   The correct command to create a new Expo project is expo init MyApp.

2. Step 2: Eliminate incorrect commands

   'expo start new MyApp' is invalid syntax, 'npm run expo create MyApp' mixes npm and expo incorrectly, 'react-native init MyApp' is for React Native CLI, not Expo.

3. Final Answer:

   expo init MyApp -> Option D

4. Quick Check:

   New Expo project = expo init [OK]

Hint: Use 'expo init' to start new projects [OK]

Common Mistakes:

• Using 'expo start' to create projects
• Confusing React Native CLI with Expo CLI
• Trying npm commands for Expo project creation

3. What will happen when you run expo start in your project folder?

medium

A. It opens a QR code in the terminal to scan with Expo Go app

B. It builds a native APK file automatically

C. It deploys the app to the App Store

D. It deletes the project files

Solution

1. Step 1: Understand 'expo start' command

   This command starts a development server and shows a QR code to open the app in Expo Go.

2. Step 2: Check other options

   Deploying the app to the App Store, building a native APK file automatically, and deleting the project files are not what 'expo start' does.

3. Final Answer:

   It opens a QR code in the terminal to scan with Expo Go app -> Option A

4. Quick Check:

   expo start = QR code for Expo Go [OK]

Hint: expo start shows QR code to open app in Expo Go [OK]

Common Mistakes:

• Expecting 'expo start' to build app files
• Confusing deployment with development commands
• Thinking 'expo start' deletes files

4. You ran expo start but the QR code does not appear. What is a likely fix?

medium

A. Delete the node_modules folder

B. Run npm uninstall expo

C. Restart the terminal and run expo start again

D. Change the app name in app.json

Solution

1. Step 1: Identify common cause of missing QR code

   Sometimes the terminal or Expo server glitches; restarting fixes this.

2. Step 2: Evaluate other options

   Deleting node_modules or uninstalling Expo is unnecessary and disruptive. Changing app name won't fix QR code display.

3. Final Answer:

   Restart the terminal and run expo start again -> Option C

4. Quick Check:

   Restart terminal to fix QR code [OK]

Hint: Restart terminal if QR code missing after expo start [OK]

Common Mistakes:

• Deleting important folders unnecessarily
• Uninstalling Expo CLI by mistake
• Changing config unrelated to QR code

5. You want to share your React Native app instantly with a friend using Expo Go. Which steps should you follow?

hard

A. Publish app to App Store before sharing

B. Run expo start, share the QR code link, friend scans with Expo Go app

C. Send JavaScript files via email, friend runs them locally

D. Build APK, send APK file, friend installs manually

Solution

1. Step 1: Use Expo Go sharing feature

   Running expo start generates a QR code and link to share instantly.

2. Step 2: Friend scans QR code with Expo Go

   The friend opens the app by scanning the code, no build or install needed.

3. Step 3: Eliminate other options

   Building APK or publishing is slower and not needed for quick sharing. Sending JS files won't run directly.

4. Final Answer:

   Run expo start, share the QR code link, friend scans with Expo Go app -> Option B

5. Quick Check:

   expo start + QR code = instant sharing [OK]

Hint: Share QR code from expo start for instant app access [OK]

Common Mistakes:

• Thinking APK build is needed for sharing
• Trying to send raw code files
• Assuming App Store publishing is required