Project React Native APP - sensors

App.js

@@ -1,26 +1,29 @@
-import React from 'react';
-import styled from 'styled-components/native';
+import * as React from "react";
+import styled from "styled-components/native";
 
-const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
-`;
+import { SensorComponent } from "./components/SensorComponent";
+import { Header } from './components/Header';
+import { Footer } from './components/Footer'
 
-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>
-	);
+export const App = () => {
+  return (
+    <Container>
+      <Header></Header>
+      <SensorComponent></SensorComponent>
+      <Footer></Footer>
+    </Container>
+  );
 };
 
 export default App;
+
+
+//----------------------------------------------//
+
+const Container = styled.View`
+  flex: 1;
+  background-color: papayawhip;
+  justify-content: space-around;
+  align-items: center;
+`;

README.md

@@ -1,13 +1,11 @@
 # 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.
+This week we were to build an app using React Native. We should be using either a phone sensor like the accelerometer, an api-fetch or React Navigation. The app should be published using Expo.
 
 ## 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?
+
 
 ## 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/@mathilda_karlsson/project-react-native-app?serviceType=classic&distribution=expo-go

components/Footer.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from "styled-components/native";
+import { View, Text, Linking } from 'react-native';
+
+
+export const Footer = () => {
+    return (
+        <FooterContainer>
+            <FooterText>To make someone else's day, please click the link below and write about somehing that made you smile today</FooterText>
+            <FooterLink onPress={() => Linking.openURL('https://spring2022-happy-tweets.netlify.app/')}>Happy Tweets</FooterLink>
+        </FooterContainer>
+    );
+};
+
+
+//----------------------------------------------//
+
+const FooterContainer = styled.View`
+    max-width: 80%;
+`;
+
+const FooterText = styled.Text`
+    font-size: 14px;
+    color: palevioletred;
+    text-align: center;
+    margin-bottom: 0;
+`;
+
+const FooterLink = styled.Text`
+    font-size: 16px;
+    font-weight: 700;
+    text-align: center;
+    color: palevioletred;
+    margin-bottom: 0;
+    padding: 20px;
+`;

components/Header.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from "styled-components/native";
+import { View } from 'react-native';
+
+
+export const Header = () => {
+    return (
+        <View>
+            <Title>Hi there!</Title>
+            <UnderTitle>Hope you're having a wonderful day!</UnderTitle>
+            <UnderTitle>If not, please shake your phone gently or click the button below to recieve some puppy love</UnderTitle>
+        </View>
+    );
+};
+
+//----------------------------------------------//
+
+const Title = styled.Text`
+    font-size: 28px;
+    color: palevioletred;
+    text-align: center;
+    margin: 80px 0 10px 0;
+    font-weight: 700;
+`;
+
+const UnderTitle = styled.Text`
+    font-size: 16px;
+    color: palevioletred;
+    text-align: center;
+    padding: 2px;
+`;

components/SensorComponent.js

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from "react";
+import { View, Image, StyleSheet } from 'react-native';
+import { Accelerometer } from "expo-sensors";
+import styled from "styled-components/native";
+
+const styles = StyleSheet.create({
+
+  Image: {
+    width: 350,
+    height: 350,
+    borderRadius: 10,
+  },
+});
+
+
+export const SensorComponent = () => {
+  const [image, setImage] = useState({})
+
+  const generateImage = () => {
+    fetch(`https://random.dog/woof.json`)
+      .then(response => response.json())
+      .then(data => setImage(data))
+  }
+
+  useEffect(()=> {
+    generateImage();
+  }, []);
+
+  const [data, setData] = useState({
+    x: 0,
+    y: 0,
+    z: 0,
+  });
+
+  const [subscription, setSubscription] = useState(null);
+
+  const { x, y, z} = data;
+
+  const subscribe = () => {
+    setSubscription(
+      Accelerometer.addListener((accelerometerData) => {
+        setData(accelerometerData);
+      })
+    );
+  };
+
+  const unsubscribe = () => {
+    subscription && subscription.remove();
+    setSubscription(null);
+  };
+
+  useEffect(() => {
+      subscribe();
+        return () => unsubscribe();
+    }, []);
+
+  const isShaking = (data) => {
+    const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
+      return totalForce > 1.78;
+  };
+
+  useEffect(()=> {
+    if (isShaking(data)) {
+        generateImage();
+    }
+  }, [data])
+
+    return (
+      <APIContainer>
+        {isShaking(data) && <ShakeAlert>Shaky Shaky</ShakeAlert>}
+        <View>
+          <Image
+            style={styles.Image}
+            source={{
+              uri: image.url
+            }}
+          />
+          <Button onPress={generateImage}>
+                <ButtonInfo>CLICK ME</ButtonInfo>
+            </Button>
+        </View>
+    </APIContainer>
+  );
+};
+
+
+//----------------------------------------------//
+
+
+const APIContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+`;
+
+const ShakeAlert = styled.Text`
+  font-size: 15px;
+  font-weight: bold;
+  color: #aa0000;
+  text-align: center;
+`;
+
+const ButtonInfo = styled.Text`
+  text-align: center;
+  font-weight: 700;
+`;
+
+const Button = styled.TouchableOpacity`
+  padding: 15px 10px;
+  width: 150px;
+  background-color: tomato;
+  border-radius: 8;
+  margin: 30px;
+  align-self: center;
+`
+