Week 16 - React Native App by Jenny Fiskaare

App.js

@@ -1,26 +1,26 @@
-import React from 'react';
-import styled from 'styled-components/native';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components/native";
+import { SensorComponent } from "./components/SensorComponent";
+
+
 
 const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
+  flex: 1;
+  background-color: #DD4A48;
+  justify-content: center;
+  align-items: center;
 `;
 
-const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
-`;
 
 const App = () => {
-	return (
-		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
-		</Container>
-	);
+
+  return (
+    <Container>
+
+   <SensorComponent></SensorComponent>
+
+    </Container>
+  );
 };
 
 export default App;

README.md

@@ -1,13 +1,13 @@
 # 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.
+Task to create an app in React Native. Due to stressful week I went very basic and createad a step counter by using sensor "Pedometer". 
 
 ## 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?
+Challenging to understand what libraries and dependencies to use. Had problems in the begining to even start the project due to technical issues. If I would have had more time this week I would have put more energy into styling and make the app a bit more complex. 
 
 ## View it live
+https://expo.dev/@jennyfiskaare/project-react-native-app-step-tracker-jenny-fiskaare?serviceType=classic&distribution=expo-go
+
+
 
-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.

components/SensorComponent.js

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from "react";
+import { Pedometer } from "expo-sensors";
+import styled from "styled-components/native";
+import { watchStepCount } from "expo-sensors/build/Pedometer";
+
+// = Styled components
+const StepContainer = styled.View`
+display:flex;
+flex-direction:column;
+margin-top:10px;
+`;
+
+const StepTitle = styled.Text`
+  font-size: 70px;
+  color: #97BFB4;
+  text-align:left;
+  font-style:italic;
+  opacity:0.7;
+  margin-bottom:-30px;
+  margin-left:20px;
+`;
+
+const StepTitle2 = styled.Text`
+  font-size: 70px;
+  color: #97BFB4;
+  text-align:center;
+`;
+
+const StepTitle3 = styled.Text`
+  font-size: 42px;
+  color: #F5EEDC;
+  text-align:left;
+  padding:20px;
+  margin-left:20px;
+  margin-top:-10px;
+`;
+
+const CountingContainer = styled.View`
+background-color:#F5EEDC;
+opacity:0.5;
+margin-top:20px;
+margin-bottom:20px;
+padding:30px;
+`
+
+const StepText = styled.Text`
+  font-size: 90px;
+  font-weight: bold;
+  color: #4F091D;
+  text-align:center;
+`;
+
+const StepText2 = styled.Text`
+  font-size: 40px;
+  color:#F5EEDC;
+  text-align:center;
+`;
+
+const AvaiabilityOnDevice= styled.Text`
+`;
+
+
+
+// = Functions
+
+export const SensorComponent= () => {
+  const [StepAvailability, setStepAvailability] =
+  useState("");
+
+  const [stepCounter, updateStepCounter] = useState(0)
+
+  useEffect(()=>{
+    subscribe()
+
+  },[])
+
+  const subscribe = () => {
+    const subscription=Pedometer.watchStepCount((result)=>{
+      updateStepCounter(result.steps);
+    })
+
+    const _unsubscribe = () => {
+      subscription && subscription.remove();
+      watchStepCount(null);
+    }
+
+// Checks if pedometer function is available on device
+
+    Pedometer.isAvailableAsync().then(
+      (result) => {
+    setStepAvailability((result));
+      }, 
+      (error) => {
+        setStepAvailability(error);
+      }
+    );
+  }
+
+  return (
+
+    <StepContainer >
+            <StepTitle>STEP</StepTitle> 
+            <StepTitle2>TRACKER</StepTitle2> 
+        <StepTitle3>How much have you been walking today???</StepTitle3> 
+
+
+<CountingContainer>
+<StepText>{stepCounter}</StepText>
+</CountingContainer>
+
+<StepText2>steps...</StepText2>
+<StepText2>...SO FAR!!</StepText2>
+
+<AvaiabilityOnDevice> {StepAvailability}</AvaiabilityOnDevice>
+
+    </StepContainer >
+  );
+};