0
0
React Nativemobile~20 mins

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

Choose your learning style9 modes available
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