Simple Step Counter (Pedometer) App using React Native

Creating a simple Step Counter App in React Native is very satisfying and easy.  I completed the App in less than an hour , and after that spent the next few hours in completing the 6500 steps target that I had set! It is well said that a healthy mind resides in a healthy body..

It's your turn now 😌

To help you achieve the goal here are some simple steps to follow : 

Step 1: Setup react native in your laptop or desktop if you have not already , here's how : 

Step 2 (optional) : If you are using the mac operating system, you can install a simulator as well. Otherwise your physical phone is always an option for checking the output.

Step 3 : install the following packages : 

1. expo install expo-sensors :  

checkout this link for more information

(https://docs.expo.dev/versions/latest/sdk/sensors/)

2.  expo install react-native-reanimated : checkout the link for more information 

(https://docs.expo.dev/versions/latest/sdk/reanimated/).

After installing the package, be sure to remove everything

from "babel.config.js" and add this code instead :

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
}

3. expo install react-native-svg : 

checkout this link for more information

(https://docs.expo.dev/versions/latest/sdk/svg/)

4. npm install react-native-circular-progress-indicator

Step 4 : Here is the full walk through tutorial -

Step 5 : Here is the source code for reference -

import React, { useEffect, useState } from "react";
import { StatusBar } from "expo-status-bar";
import {
 StyleSheet,
 Text,
 View,
 ImageBackground,
 Dimensions,
} from "react-native";
import { Pedometer } from "expo-sensors";
import CircularProgress from "react-native-circular-progress-indicator";
 
export default function App() {
 const [PedomaterAvailability, SetPedomaterAvailability] = useState("");
 const [StepCount, SetStepCount] = useState(0);
 
 var WindowHeight = Dimensions.get("window").height;
 
 var Dist = StepCount / 1300;
 var DistanceCovered = Dist.toFixed(4);
 
 var cal = DistanceCovered * 60;
 var caloriesBurnt = cal.toFixed(4);
 React.useEffect(() => {
   subscribe();
 }, []);
 
 subscribe = () => {
   const subscription = Pedometer.watchStepCount((result) => {
     SetStepCount(result.steps);
   });
 
   Pedometer.isAvailableAsync().then(
     (result) => {
       SetPedomaterAvailability(String(result));
     },
     (error) => {
       SetPedomaterAvailability(error);
     }
   );
 };
 
 return (
   <View style={styles.container}>
     <ImageBackground
       style={{ flex: 1 }}
       source={require("./assets/runningFinal.jpg")}
       resizeMode="cover"
     >
       <View style={{ flex: 1, justifyContent: "center" }}>
         <Text style={styles.headingDesign}>
           Is Pedometer available on the device : {PedomaterAvailability}
         </Text>
       </View>
       <View style={{ flex: 3 }}>
         <CircularProgress
           value={StepCount}
           maxValue={6500}
           radius={210}
           textColor={"#ecf0f1"}
           activeStrokeColor={"#f39c12"}
           inActiveStrokeColor={"#9b59b6"}
           inActiveStrokeOpacity={0.5}
           inActiveStrokeWidth={40}
           activeStrokeWidth={40}
           title={"Step Count"}
           titleColor={"#ecf0f1"}
           titleStyle={{ fontWeight: "bold" }}
         />
       </View>
 
       <View style={{ flex: 1, justifyContent: "center" }}>
         <View style={{ flex: 1 }}>
           <Text
             style={[
               styles.textDesign,
               { paddingLeft: 20, marginLeft: '23%' },
             ]}
           >
             Target : 6500 steps(5kms)
           </Text>
         </View>
 
         <View style={{ flex: 1 }}>
           <Text
             style={[
               styles.textDesign,
               { width: "93%", paddingLeft: 20, marginLeft: '-3.5%' },
             ]}
           >
             Distance Covered : {DistanceCovered} km
           </Text>
         </View>
 
         <View style={{ flex: 1 }}>
           <Text
             style={[
               styles.textDesign,
               {  paddingLeft: 10, marginLeft: '23%' },
             ]}
           >
             Calories Burnt : {caloriesBurnt}
           </Text>
         </View>
 
         <StatusBar style="auto" />
       </View>
     </ImageBackground>
   </View>
 );
}
 
const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: "#fff",
 },
 headingDesign: {
   backgroundColor: "rgba(155, 89, 182,0.5)",
 
   alignSelf: "center",
   fontSize: 20,
   color: "white",
   fontWeight: "bold",
   fontFamily: "Papyrus",
 },
 textDesign: {
   backgroundColor: "rgba(155, 89, 182,0.5)",
   height: 50,
   width : '85%',
   borderColor: "white",
   borderWidth: 1,
   borderRadius: 20,
   overflow: "hidden",
   fontSize: 25,
   color: "white",
   fontWeight: "bold",
   fontFamily: "Papyrus",
 },
});