pedometer app

import React, { useState, useEffect, useCallback } from 'react'
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, Text, View, ImageBackground, SafeAreaView } from 'react-native';
import { Pedometer } from 'expo-sensors';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { NavigationContainer } from '@react-navigation/native';

import Home from './Screens/Home';

import Profile from './Screens/Profile';

import CircularProgress from 'react-native-circular-progress-indicator';
import 'expo-dev-client'
import { BannerAd, BannerAdSize, TestIds, InterstitialAd, AdEventType, RewardedInterstitialAd, RewardedAdEventType } from 'react-native-google-mobile-ads';


const Tab = createMaterialTopTabNavigator();

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
    requestNonPersonalizedAdsOnly: true
});

const rewardedInterstitial = RewardedInterstitialAd.createForAdRequest(TestIds.REWARDED_INTERSTITIAL, {
    requestNonPersonalizedAdsOnly: true
});



export default function App() {


    const [rewardedinterstitialLoaded, setRewardedInterstitialLoaded] = useState(false);

    const [PedometerAvalibility, setPedometerAvalibility] = useState("");

    const [stepCount, updateStepCount] = useState(0)


    const [number, setNumbers] = useState(0)


    const increment = useCallback((reward = 10) => {
        setNumbers(prev => prev + reward)
    }, [number])

    var dist = stepCount / 1300;
    var distanceCoverd = dist.toFixed(1)

    var point = stepCount.steps / 500;

    var cal = dist * 60
    var calsBurnt = cal.toFixed(0)




    const loadRewardedInterstitial = () => {
        const unsubscribeLoaded = rewardedInterstitial.addAdEventListener(
            RewardedAdEventType.LOADED,
            () => {
                setRewardedInterstitialLoaded(true);
            }
        );

        const unsubscribeEarned = rewardedInterstitial.addAdEventListener(
            RewardedAdEventType.EARNED_REWARD,
            reward => {
                increment();
            }
        );

        const unsubscribeClosed = rewardedInterstitial.addAdEventListener(
            AdEventType.CLOSED,
            () => {
                setRewardedInterstitialLoaded(false);
                rewardedInterstitial.load();
            }
        );

        rewardedInterstitial.load();

        return () => {
            unsubscribeLoaded();
            unsubscribeClosed();
            unsubscribeEarned();
        }
    };




    useEffect(() => {

        const unsubscribeRewardedInterstitialEvents = loadRewardedInterstitial();
        subscribe();

        return () => {
            unsubscribeRewardedInterstitialEvents();
        };
    }, [])



    const subscribe = () => {

        const subscription = Pedometer.watchStepCount((result) => {

            SetStepCount(result.steps);

        });


    }
    return (

        <View style={styles.container}>

            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen name="Home"
                        component={Home} />
                    <Tab.Screen name="Reward"
                        component={Profile} />
                </Tab.Navigator>
            </NavigationContainer>

            <ImageBackground
                style={{ flex: 1 }}
                resizeMode="cover"
                source={require('./assets/Black_colour.jpg')}
            >
                <View style={{ flex: 1, justifyContent: "center" }} >
                    <Text style={[styles.HeadingDesign, {
                        paddingBottom: 50
                    }
                    ]}>Pedometer Avalible:
                        {PedometerAvalibility}
                    </Text>
                    <SafeAreaView>

                    </SafeAreaView>

                    <CircularProgress

                        value={stepCount}
                        maxvalue={10000}
                        radius={192}
                        textColor={'#ECF01F'}
                        activeStrokeColor={'#0075C1'}
                        inActiveStrokeColor={'#AFAFAF'}
                        inActiveStrikeOpacity={0.5}
                        inActiveStrokeWidth={30}
                        activeStrokeWidth={30}

                    />
                    <View style={{ flex: 3, justifyContent: "center" }} >

                        <View style={{ flex: .5, justifyContent: "center", width: "50%", marginLeft: 180, marginTop: -200 }} >
                            <Text style={styles.numDesign} > {number}  </Text>
                        </View>



                        <View style={{ flex: .5, justifyContent: "center", width: "50%", marginLeft: 95, marginTop: -140 }} >

                            {rewardedinterstitialLoaded ? < Button title="Convert" onPress={() => rewardedInterstitial.show()} /> : <Text>Loading...</Text>}

                        </View>
                    </View>
                    <View style={{ flex: 3, justifyContent: "center" }}>
                        <View style={{ flex: 1 }}>



                            <Text style={styles.textDesign}> Target: 10,000 Steps(8km)</Text>
                        </View>



                        <View style={{ flex: 1 }}>
                            <Text style={styles.textDesign}> Distance Covered : {distanceCoverd} km </Text>
                        </View>

                        <View style={{ flex: 1 }}>
                            <Text style={styles.textDesign}>Calories Burned : {calsBurnt} </Text>
                        </View>
                    </View>
                </View>


            </ImageBackground>

            <StatusBar style="auto" />
        </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",


    },

    textDesign: {

        height: 50,

        width: '85%',

        marginBottom: 60,

        fontSize: 25,

        color: "white",

        fontWeight: "bold",

    },

    numDesign: {

        height: 50,

        width: '85%',


        fontSize: 25,

        color: "white",

        fontWeight: "bold",

    },

});