Create a React Native Counter App using Expo in 5 Minutes

This article will discuss the steps for creating a React Native counter app using Expo. Expo makes the process of creating React Native apps more effortless.

If you are a visual learner, the YouTube video below is more suitable for you.

Prerequisites

I assume that the reader has a fundamental knowledge of the following aspects:

• React and React Native Concepts
• Installing Android Studio and setting up an Android Emulator
• If you intend to build an iOS app, install Xcode and set up iOS Emulator

What we will learn

Here we will learn the following things:-

• Create an expo app
• Running the app in an Android/iOS Emulator
• Create a screen to code the counter app functions.
• Create a Minus button, a Plus button, and a text to show the count. If the count reaches 0, the decrease button will not do anything to avoid negative numbers.

After completing the article, we will learn to create a React Native app using the Expo tool with the workflow below.

Create an Expo App

Creating an Expo application is a straightforward process that can be accomplished using the NPX tool. Execute the following command:

npx create-expo-app expo-counter-app

The above command will create a new Expo app with the name expo-counter-app. Now direct to the project directory and open it with Visual Studio Code.

cd expo-counter-app
code .

Install Android Studio and Set up an Android Emulator

We need an Android emulator to run the app we have built. Expo apps, unlike pure React Native apps, run inside the Expo Go mobile app.

Note that we can install Expo Go on an Android device and run our app. However, I will set up an Android Emulator on our system.

Download Android Studio from the official website, install it, and open the app. Next, click the Virtual Device Manager from the More Actions button.

If there is a device in the list, click the play button or create a new device.

The Expo website has an article that provides instructions for setting up an Android Emulator.

Run the Expo App on an Android Emulator

After launching the Android Emulator on our system, we can easily run our app using the command below.

npm run android

After running the command, the app we developed will open in the Expo Go app in the Android emulator, as shown below.

Note that if you are developing a mobile app for iOS, you can test it on an iOS simulator. The Expo website offers a guide on setting up an iOS simulator on your macOS system.

Create a Layout

We need to have a layout file that provides a layout for screens under it. We can also define the screen names inside this file. So inside the app directory, we can see a _layout.tsx file. Edit the code as below.

Here, I am only defining a single-screen Home. <Stack.Screen name="index" options={{ title: "Home" }} />

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";

import { useColorScheme } from "@/hooks/useColorScheme";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="index" options={{ title: "Home" }} />
      </Stack>
    </ThemeProvider>
  );
}

Create a Home Screen with Counter App Functions

Now we can create a file index.tsx inside the app directory with all the codes for a counter.

import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { useState } from "react";

export default function HomeScreen() {
  const [count, setCount] = useState(0);

  const decreaseCount = () => {
    if (count !== 0) {
      setCount(count - 1);
    }
  };

  const increaseCount = () => {
    setCount(count + 1);
  };

  return (
    <ScrollView>
      <View
        style={{
          alignItems: "center",
          marginTop: 100,
        }}
      >
        <TouchableOpacity
          onPress={increaseCount}
          style={{
            backgroundColor: "black",
            width: 100,
            height: 100,
            borderRadius: 100,
            alignItems: "center",
            paddingTop: 15,
          }}
        >
          <Text
            style={{
              fontSize: 50,
              color: "white",
            }}
          >
            +
          </Text>
        </TouchableOpacity>
        <View>
          <Text
            style={{
              fontSize: 50,
            }}
          >
            {count}
          </Text>
        </View>
        <TouchableOpacity
          onPress={decreaseCount}
          style={{
            backgroundColor: "black",
            width: 100,
            height: 100,
            borderRadius: 100,
            alignItems: "center",
            paddingTop: 15,
          }}
        >
          <Text
            style={{
              fontSize: 50,
              color: "white",
            }}
          >
            -
          </Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

I will not explain the logic of this code assuming the reader has basic knowledge in React. However, I will explain some components such as TouchableOpacity which can act as a button and can be styled. ScrollView is just a scrolling container. Here we used the inline styles for beautifying the buttons and text.

Upon launching the emulator, you will see the interface below. By clicking on the minus and plus icons, you can decrease and increase the count respectively. When the count reaches 0.

GitHub

You can clone this project from the GitHub repository to access the code and work on it.

https://github.com/codeariv/expo-counter-app

Summary

In this article, we have discussed the steps for creating a basic React Native counter app using Expo. Before you start coding your own app, I suggest referring to the GitHub repository to ensure that you have removed any unnecessary files and components from the default Expo app. This will help streamline the process and make it easier for you to create your own app.