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