EAS Build (Expo) in React Native - Mini App: Build & Ship

Build: Simple Counter

A screen with a counter that increments when you press a button. This app will be built using Expo and EAS Build.

Target UI

---------------------
|   Simple Counter   |
---------------------
|                   |
|       0           |
|                   |
|   [ Increment ]   |
---------------------

Display a number starting at 0 in the center

Add a button labeled 'Increment' below the number

When the button is pressed, increase the number by 1

Use Expo managed workflow compatible code

Prepare the app for EAS Build deployment

Starter Code

React Native

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

export default function SimpleCounter() {
  // TODO: Add state for counter

  return (
    <View style={styles.container}>
      {/* TODO: Display counter value here */}
      {/* TODO: Add Increment button here */}
    </View>
  );
}

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

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 SimpleCounter() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counterText}>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

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

We use React's useState hook to keep track of the counter value starting at 0. The Text component shows the current count in large font. The Button labeled 'Increment' calls setCount to add 1 to the current count when pressed. The styles center everything on the screen for a clean look. This simple app is ready to be built and deployed using Expo's EAS Build service.

Final Result

Completed Screen

---------------------
|   Simple Counter   |
---------------------
|                   |
|       0           |
|                   |
|   [ Increment ]   |
---------------------

When the user taps the 'Increment' button, the number increases by 1

The number updates immediately on the screen

Stretch Goal

Add a Reset button that sets the counter back to 0

💡 Hint

Add another Button component labeled 'Reset' below the Increment button and set count to 0 on press

Practice

1. What is the main purpose of eas build in Expo?

easy

A. To publish the app directly to app stores

B. To run the app on a local simulator

C. To build app files for Android and iOS in the cloud

D. To create a new Expo project

Solution

1. Step 1: Understand the role of eas build

   The eas build command is used to create app binaries for Android and iOS using cloud services.

2. Step 2: Differentiate from other commands

   It does not run the app locally, publish directly, or create projects; it only builds app files.

3. Final Answer:

   To build app files for Android and iOS in the cloud -> Option C

4. Quick Check:

   EAS Build = cloud app file creation [OK]

Hint: Remember: eas build creates app files remotely [OK]

Common Mistakes:

• Confusing build with running the app locally
• Thinking it publishes directly to stores
• Assuming it creates new projects

2. Which of the following is the correct syntax to start a build for Android using EAS?

easy

A. eas build --device android

B. eas build android --platform

C. eas build -p ios

D. eas build --platform android

Solution

1. Step 1: Identify the correct command format

   The correct syntax uses eas build --platform android to specify the platform.

2. Step 2: Check other options for errors

   eas build --device android uses invalid flag, eas build android --platform has wrong syntax order, eas build -p ios targets iOS.

3. Final Answer:

   eas build --platform android -> Option D

4. Quick Check:

   Correct flag for platform is --platform [OK]

Hint: Use --platform flag followed by platform name [OK]

Common Mistakes:

• Mixing up flag order
• Using wrong flags like --device
• Confusing platform names

3. What will happen if you run eas build --platform ios --profile production?

medium

A. It builds an iOS app using the production profile in the cloud

B. It builds an Android app using the production profile

C. It runs the app on an iOS simulator locally

D. It creates a new production profile

Solution

1. Step 1: Analyze the command flags

   The command specifies --platform ios and --profile production, meaning it builds for iOS using the production profile.

2. Step 2: Understand the build behavior

   EAS Build runs in the cloud and does not run simulators or create profiles with this command.

3. Final Answer:

   It builds an iOS app using the production profile in the cloud -> Option A

4. Quick Check:

   Platform + profile flags define build target [OK]

Hint: Platform and profile flags control build target and config [OK]

Common Mistakes:

• Assuming it runs locally
• Confusing platform with Android
• Thinking it creates profiles

4. You run eas build --platform android --profile staging but get an error saying the profile is missing. What is the likely cause?

medium

A. You used the wrong platform flag

B. The staging profile is not defined in eas.json

C. You need to run expo start first

D. Your internet connection is off

Solution

1. Step 1: Understand profile usage in EAS Build

   Profiles like staging must be defined in the eas.json file to be used.

2. Step 2: Check other options for relevance

   Platform flag is correct, expo start is unrelated, and internet issues cause different errors.

3. Final Answer:

   The staging profile is not defined in eas.json -> Option B

4. Quick Check:

   Missing profile in config causes build error [OK]

Hint: Check eas.json for profile definitions before building [OK]

Common Mistakes:

• Ignoring eas.json profiles
• Confusing build with running app
• Assuming network error

5. You want to share your app with testers before publishing. Which EAS Build feature helps you do this easily?

hard

A. Using eas build to create app files and share build URLs

B. Running expo publish to update the app instantly

C. Using expo start to open the app on testers' devices

D. Creating a new Expo project with expo init

Solution

1. Step 1: Identify how EAS Build supports sharing

   EAS Build creates app binaries and provides URLs to share with testers easily.

2. Step 2: Differentiate from other Expo commands

   expo publish updates JS bundles but not native builds; expo start is for development; expo init creates projects.

3. Final Answer:

   Using eas build to create app files and share build URLs -> Option A

4. Quick Check:

   EAS Build creates shareable app files [OK]

Hint: Build app files and share URLs with testers using EAS Build [OK]

Common Mistakes:

• Confusing publishing with building
• Thinking expo start shares apps
• Assuming new project creation helps sharing