Simple Step counter App in react native

App.js

@@ -1,26 +1,17 @@
-import React from 'react';
-import styled from 'styled-components/native';
+import React from "react";
+import styled from "styled-components/native";
 
+import Main from "./components/Main";
 const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
-`;
-
-const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
+  flex: 1;
 `;
 
 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>
+      <Main />
+    </Container>
+  );
 };
 
 export default App;

README.md

@@ -1,13 +1,10 @@
 # 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.
-
-## 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?
+The week's project was to build a mobile app using React Native. 
+Built a simple pedometer app that made use of sensors(pedometer) available on phone to track the number of steps. Used Navigation to toggle between home Screen and Pedometer screen 
 
 ## 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/@sherin11/simple-step-counter-app
+
+For ios users: https://snack.expo.dev/@sherin11/step-counter-app (Scan the QR code)

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
-	api.cache(true);
-	return {
-		presets: ['babel-preset-expo'],
-	};
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
 };

components/HomeScreen.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+import styled from "styled-components/native";
+
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+`;
+
+const Image = styled.Image`
+  height: 250px;
+  width: 250px;
+  align-items: center;
+  margin: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const Text = styled.Text`
+  font-size: 30px;
+  color: black;
+  text-align: center;
+  margin: 10px;
+`;
+const HomeScreen = (navigation) => {
+  return (
+    <Container>
+      <Text>Walking briskly, even for a minute, counts as exercise</Text>
+      <Image source={require("../assets/run-img.png")} />
+      <Text>Take your first step today to a healthy lifestyle</Text>
+    </Container>
+  );
+};
+
+export default HomeScreen;

components/Main.js

@@ -0,0 +1,57 @@
+import React, { createRef } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import styled from "styled-components/native";
+import HomeScreen from "./HomeScreen";
+import PedometerScreen from "./PedometerScreen";
+
+const homescreen = "Home";
+const pedometerScreen = "Step counter";
+
+const Tab = createBottomTabNavigator();
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+`;
+
+const Title = styled.Text`
+  font-size: 40px;
+  color: black;
+  margin: 50px;
+  text-align: center;
+  margin-top: 0px;
+`;
+
+const Text = styled.Text`
+  font-size: 30px;
+  color: black;
+  text-align: center;
+  margin: 10px;
+`;
+const Main = () => {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        initialRouteName={homescreen}
+        screenOptions={({ route }) => ({
+          tabBarIcon: ({ focused, color, size }) => {
+            let iconName;
+            let rn = route.name;
+            if (rn === homescreen) {
+              iconName = focused ? "home" : "home";
+            } else if (rn === pedometerScreen) {
+              iconName = focused ? "walk" : "walk";
+            }
+            return <Ionicons name={iconName} size={size} color={color} />;
+          },
+        })}
+      >
+        <Tab.Screen name={homescreen} component={HomeScreen} />
+        <Tab.Screen name={pedometerScreen} component={PedometerScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default Main;

components/PedometerScreen.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react";
+import { Pedometer } from "expo-sensors";
+import styled from "styled-components/native";
+
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+`;
+
+const Title = styled.Text`
+  font-size: 40px;
+  color: palevioletred;
+  margin: 10px;
+  text-align: center;
+`;
+
+const Text = styled.Text`
+  font-size: 30px;
+  color: black;
+  text-align: center;
+  margin-top: 10px;
+`;
+
+const PedometerScreen = () => {
+  const [pedometer, setpedometer] = useState("");
+  const [stepCount, setStepCount] = useState(0);
+
+  const Distance = (stepCount / 1300).toFixed(3);
+
+  useEffect(() => {
+    subscribe();
+    return () => _unsubscribe();
+  }, []);
+  const _unsubscribe = () => {
+    subscription && _subscription.remove();
+    subscription = null;
+  };
+  const subscribe = () => {
+    const subscription = Pedometer.watchStepCount((result) => {
+      setStepCount(result.steps);
+    });
+    Pedometer.isAvailableAsync().then(
+      (result) => {
+        setpedometer(String(result));
+      },
+      (error) => {
+        setpedometer(error);
+      }
+    );
+  };
+
+  return (
+    <Container>
+      <Title>Track your steps </Title>
+
+      <Text>Steps: {stepCount}</Text>
+      <Text> Distance covered: {Distance} </Text>
+    </Container>
+  );
+};
+
+export default PedometerScreen;