1

Hi am trying to create an expo react native screen with pedometer. There are no problems with my code and my device fulfills hardware reaquiremetns as well but the code is not showing footsteps. I dont understand why is this happenening.

Description:

in the code below I am designing a screen for pedometer and there are some functions in actioin that are mostly doing conversions. But the main function is subscription which is checking if pedometer is available on device once found then it reads user steps and updates them to the variable called stepCount

My code :

import React, { useEffect, useState } from 'react';

import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';
import { Pedometer } from "expo-sensors";
import { StatusBar } from "expo-status-bar";
import {
    StyleSheet,
    Text,
    View,
    ImageBackground,
    Dimensions,
} from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
import LottieView from 'lottie-react-native';
import CircularProgress from "react-native-circular-progress-indicator";
import styles from '../styles';

export default function StepCounter({ navigation }) {
  const [pedometerAvailability, setPedometerAvailability] = useState('');
  const [stepCount, setStepCount] = useState(0);

  const WindowHeight = Dimensions.get('window').height;

  const Distokm = 1000 / 1250;
  const Dist = 1800 / 1300;
  const DistanceCovered = Dist.toFixed(4);

  const cal = DistanceCovered * 60;
  const caloriesBurnt = cal.toFixed(4);

  useEffect(() => {
    subscribe();
    resetStepCountDaily();
  }, []);

  const resetStepCountDaily = () => {
    const now = new Date();
    const nextDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate() + 1,
    );
    const timeUntilNextDay = nextDay.getTime() - now.getTime();

    setTimeout(() => {
      setStepCount(500);
      resetStepCountDaily();
    }, timeUntilNextDay);
  };

  const subscribe = () => {
    const subscription = Pedometer.watchStepCount((result) => {
      setStepCount(result.steps);
    });

    Pedometer.isAvailableAsync().then(
      (result) => {
        setPedometerAvailability(String(result));
      },
      (error) => {
        setPedometerAvailability(error);
      },
    );
  };

  // Loading Custom Fonts
  let [fontsLoaded] = useFonts({
    orbitron: require('../assets/fonts/Orbitron.ttf'),
    orbitron_bold: require('../assets/fonts/static/Orbitron-Bold.ttf'),,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }
  return (
    <ImageBackground
      style={styles.homecontainer}
      source={require('../assets/night2.jpg')}
      resizeMode="cover">
      <View style={styles.pedoheader}>
        <Text style={styles.pedotext}>
          Pedometer Availability : {pedometerAvailability}
        </Text>
        <Text style={styles.pedotext}>Steps : {stepCount}</Text>
      </View>
      <View style={styles.counterview}>
        <CircularProgress
          value={stepCount}
          maxValue={1800}
          radius={150}
          progressValueColor={'#fff'}
          strokeColorConfig={[
            { color: 'red', value: 0 },
            { color: 'skyblue', value: 500 },
            { color: 'yellowgreen', value: 1500 },
            { color: 'green', value: 1800 },
          ]}
          color={'#FFFFFF'}
          circleBackgroundColor="#CAD5E2"
          inActiveStrokeOpacity={0.5}
          inActiveStrokeWidth={35}
          activeStrokeWidth={35}
          title={'Step Count'}
          titleColor={'#ecf0f1'}
          titleStyle={{ fontFamily: 'orbitron_bold', fontSize: 25 }}
        />
      </View>

      <View style={styles.counterview}>
        <LottieView
          autoPlay
          style={styles.loginlottie}
          source={require('../assets/lottie/walk1.json')}
        />
      </View>
    </ImageBackground>
  );
}
Vasyl Nahuliak
  • 1,912
  • 2
  • 14
  • 32

0 Answers0