Tereses Step Counter mobile app with Sensors

App.js

@@ -1,25 +1,30 @@
 import React from "react";
 import styled from "styled-components/native";
-import { SensorComponent } from "./components/SensorComponent";
+import  SensorComponent  from "./components/SensorComponent";
+import { ImageBackground } from "react-native";
+
 
 const Container = styled.View`
   flex: 1;
-  background-color: papayawhip;
   justify-content: center;
   align-items: center;
 `;
 
-const Title = styled.Text`
-  font-size: 24px;
-  color: palevioletred;
-`;
 
 const App = () => {
   return (
+    <ImageBackground
+    style={{ flex: 1 }}
+    resizeMode="cover"
+    source={require('./assets/steps.jpg')}
+   >
     <Container>
-      <SensorComponent></SensorComponent>
-    </Container>
+      <SensorComponent/>
+      </Container>
+      </ImageBackground>
   );
 };
 
 export default App;
+
+

README.md

@@ -1,13 +1,14 @@
 # Project React Native App 📱
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+In this weeks project I had the chance to test out some React Native and build my first mobile app.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+This weeks project and approach was different from the other react weeks. It was exciting to build my very own mobile app. I choose to build a step counter!
+
+The hardest part this week was the expo go and all the new error message that come along with that page and app! 
+I solved it with the help of townhall session, stackOverflow and friends in the bootcamp. 
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://expo.dev/@tessan90/project-react-native-app?serviceType=classic&distribution=expo-go

babel.config.js

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

components/SensorComponent.js

@@ -1,96 +1,111 @@
 import React, { useState, useEffect } from "react";
-import { Accelerometer } from "expo-sensors";
-import styled from "styled-components/native";
-
-// ==========================
-// = Functions
-const isShaking = (data) => {
-  // x,y,z CAN be negative, force is directional
-  // We take the absolute value and add them together
-  // This gives us the total combined force on the device
-  const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
-
-  // If this force exceeds some threshold, return true, otherwise false
-  // Increase this threshold if you need your user to shake harder
-  return totalForce > 1.78;
-};
-
-// ==========================
-// = Styled components
-const ShakeView = styled.View`
-  display: flex;
-  flex-direction: column;
-`;
-
-const ShakeAlert = styled.Text`
-  font-size: 36px;
-  font-weight: bold;
-  color: #aa0000;
-`;
-const ShakeDataView = styled.View``;
-const ShakeDataTitle = styled.Text`
-  font-weight: bold;
-`;
-const ShakeData = styled.Text``;
-
-export const SensorComponent = () => {
-  // This function determines how often our program reads the accelerometer data in milliseconds
-  // https://docs.expo.io/versions/latest/sdk/accelerometer/#accelerometersetupdateintervalintervalms
-  Accelerometer.setUpdateInterval(400);
-
-  // The accelerometer returns three numbers (x,y,z) which represent the force currently applied to the device
-  const [data, setData] = useState({
-    x: 0,
-    y: 0,
-    z: 0,
-  });
-
-  // This keeps track of whether we are listening to the Accelerometer data
-  const [subscription, setSubscription] = useState(null);
-
-  const _subscribe = () => {
-    // Save the subscription so we can stop using the accelerometer later
-    setSubscription(
-      // This is what actually starts reading the data
-      Accelerometer.addListener((accelerometerData) => {
-        // Whenever this function is called, we have received new data
-        // The frequency of this function is controlled by setUpdateInterval
-        setData(accelerometerData);
-      })
-    );
-  };
+import { Pedometer } from 'expo-sensors';
+import { StyleSheet, Text, View } from 'react-native';
+import CircularProgress from "react-native-circular-progress-indicator";
 
-  // This will tell the device to stop reading Accelerometer data.
-  // If we don't do this our device will become slow and drain a lot of battery
-  const _unsubscribe = () => {
-    subscription && subscription.remove();
-    setSubscription(null);
-  };
 
-  useEffect(() => {
-    // Start listening to the data when this SensorComponent is active
-    _subscribe();
+const SensorComponent = () => {
+  const [pedometerAvailability, setPedometerAvailability] = useState("");
+  const [stepCount, updateStepCount] = useState(0);
+
+  let Dist = stepCount /1300;
+  let DistanceCovered = Dist.toFixed(4)
 
-    // Stop listening to the data when we leave SensorComponent
-    return () => _unsubscribe();
+  let cal = DistanceCovered * 60;
+  let caloriesBurnt = cal.toFixed(4)
+
+  useEffect(() => {
+    subscribe();
   }, []);
 
-  return (
-    <ShakeView>
-      {/* 
-      If isShaking returns true:
-        - We could render conditionally
-        - Maybe we want to dispatch some redux event when device shakes?
-        - Maybe change some styled props? 
-      */}
-      {isShaking(data) && <ShakeAlert>Shaking</ShakeAlert>}
-      <ShakeDataView>
-        <ShakeDataTitle>Shake Data</ShakeDataTitle>
-        {/* toFixed(2) only shows two decimal places, otherwise it's quite a lot */}
-        <ShakeData>X: {data.x.toFixed(2)}</ShakeData>
-        <ShakeData>Y: {data.y.toFixed(2)}</ShakeData>
-        <ShakeData>Z: {data.z.toFixed(2)}</ShakeData>
-      </ShakeDataView>
-    </ShakeView>
-  );
-};
+  const subscribe = () => {
+    const subscription = Pedometer.watchStepCount((result) => { 
+        updateStepCount(result.steps);
+      });
+
+
+    Pedometer.isAvailableAsync().then(
+      (result) => {
+        setPedometerAvailability(String(result));
+      },
+      (error) => {
+        setPedometerAvailability(error);
+      }
+    );
+ };
+
+    return (
+      <View style={styles.container}>
+
+        <Text style={styles.headingDesign}>Time to get up and go out for a walk!</Text>
+
+        <View>
+          <CircularProgress
+          value={stepCount}
+          maxValue={6500}
+          radius={190}
+          textColor={'#800000'}
+          activeStrokeColor={'#000000'}
+          inActiveStrokeColor={'#800000'}
+          inActiveStrokeOpacity={0.5}
+          inActiveStrokeWidth={50}
+          activeStrokeWidth={50}
+          title={'Step Count'}
+          titleColor={'#800000'}
+          titleStyle={{fontWeight: "bold"}}
+          />
+          </View>
+
+
+        <View>
+          <Text style={styles.textDesign}> Target : 6500 steps (5km)</Text>
+
+          <Text style={styles.textDesign}> Distance Covered : {DistanceCovered} km </Text>
+
+          <Text style={styles.textDesign}> Calories Burnt : {caloriesBurnt} </Text>
+          </View>
+
+      </View>
+    );
+}
+
+const styles = StyleSheet.create({ 
+  container: {
+    flex: 1,
+    backgroundColor: "#C0C0C0",
+    opacity: 0.5,
+  },
+
+  headingDesign: {
+    color: "white",
+    backgroundColor: "#800000",
+    alignSelf: "center",
+    fontSize: 20,
+    fontWeight: "bold",
+    fontFamily: "Papyrus",
+    margin: 20,
+    padding: 5,
+  },
+
+  textDesign: {
+    backgroundColor: "#800000",
+    height: 50,
+    width: "95%",
+    borderColor: "#000",
+    borderWidth: 3,
+    borderRadius: 20,
+    overflow: "hidden",
+    fontSize: 25,
+    color: "white",
+    fontWeight: "bold",
+    fontFamily: "Papyrus",
+    alignSelf: "center",
+    marginTop: 15,
+    padding: 5,
+  }
+ }); 
+
+
+export default SensorComponent;
+
+