Start Learning React Native with Expo: Building a Simple Step Counter App

In this tutorial, we'll embark on a journey to create a simple yet impactful step counter app using React Native and Expo. This hands-on project will serve as an excellent starting point for beginners eager to dive into mobile app development. By leveraging the simplicity of Expo and the flexibility of React Native, we'll build a practical application that tracks the user's steps, providing a solid foundation for further exploration and learning.

Why React Native and Expo?

React Native is a popular JavaScript framework for building native mobile applications. It allows developers to write code once and deploy it across multiple platforms, including iOS and Android. Expo, on the other hand, is a set of tools and services that streamline the development process, making it easier to build, deploy, and manage React Native applications. Together, React Native and Expo provide a powerful combination for building mobile apps quickly and efficiently.

Before we begin, let's make sure you have everything you need to get started:

• Node.js and npm installed on your computer.
• Expo CLI installed globally. You can install it using npm by running the following command in your terminal:

npm install -g expo-cli

• Basic understanding of JavaScript and React concepts. If you're new to React, I recommend checking out the official React documentation and completing some introductory tutorials. The react docs here: https://react.dev/
• Expo Go app installed on your mobile device for testing. You can download Expo Go from the App Store (iOS) or Google Play Store (Android).

Now that we have all the prerequisites covered, let's dive into building our step counter app!

Step 1: Set Up Expo Project

First, let's create a new React Native project using Expo. Open your terminal and run the following commands:

expo init StepCounterApp
cd StepCounterApp

Choose the "expo-template-blank-typescript" template when prompted. This template sets up a new React Native project with TypeScript support.

Step 2: Install Dependencies

Navigate to your project directory and install the Expo Pedometer module, which we'll use to track the user's steps:

expo install expo-sensors

The Expo Sensors module provides access to device sensors, including the pedometer for step counting.

Step 3: Build the Step Counter App

Now, let's start building our step counter app! Open the "App.tsx" file in your project directory and replace the existing code with the following:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Platform } from 'react-native';
import { Pedometer } from 'expo-sensors';

const App: React.FC = () => {
  const [steps, setSteps] = useState<number>(0);

  useEffect(() => {
    let subscription: { remove: () => void } | null = null;

    const getPermissions = async () => {
      if (Platform.OS === 'ios') {
        const { granted } = await Pedometer.requestPermissionsAsync();
        if (!granted) {
          console.error('Permission to access pedometer data denied.');
          return;
        }
      }
    };

    const startPedometer = async () => {
      const isAvailable = await Pedometer.isAvailableAsync();
      if (!isAvailable) {
        console.error('Pedometer is not available on this device.');
        return;
      }

      subscription = Pedometer.watchStepCount(result => {
        setSteps(result.steps || 0);
      });

      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const result = await Pedometer.getStepCountAsync(today, new Date());
      setSteps(result.steps || 0);
    };

    getPermissions();
    startPedometer();

    return () => {
      if (subscription) {
        subscription.remove();
      }
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Step Counter App</Text>
      <Text style={styles.steps}>Steps: {steps}</Text>
    </View>
  );
};

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

export default App;

In this code, we've created a functional component called "App" using TypeScript. Inside the component, we've used the useState and useEffect hooks to manage state and perform side effects. We've also imported the Pedometer module from Expo Sensors and used it to track the user's steps.

Step 4: Run the App

Run your app using Expo:

expo start

Scan the QR code with the Expo Go app on your mobile device, and you should see your step counter app displaying the step count!

Conclusion:

In this tutorial, we've learned how to build a simple step counter app using React Native and Expo. By leveraging the power of React Native and Expo, we've created a cross-platform mobile app that tracks the user's steps in real-time. This project serves as a great starting point for beginners looking to get started with mobile app development. From here, you can exploring additional features such as step goal tracking, historical step data visualization, or integration with external APIs for more comprehensive fitness tracking capabilities, and continue learning and experimenting with React Native and Expo.

Gavin

Happy coding and stay active!