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>
);
}