Sensors for week 16

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -1,4 +1 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
+{}

App.js

@@ -1,26 +1,23 @@
-import React from 'react';
-import styled from 'styled-components/native';
+import React from 'react'
+import styled from 'styled-components/native'
+import { View } from 'react-native'
+import ShakeApi from './components/ShakeApi'
+import Header from './components/Header'
 
 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;
+  background-color: white;
+  justify-content: center;
+  align-items: center;
+`
 
 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>
+      <Header></Header>
+      <ShakeApi></ShakeApi>
+    </Container>
+  )
+}
 
-export default App;
+export default App

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 i made my frist React Native 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?
+So this week was really fun, i had some problem with my console log for getting error on writing my css wrong many time. If i had more time i would ha made a magic 8 ball.
 
 ## 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.
+My app -----> https://expo.dev/@kyparn83/simon-react-native-app

app.json

@@ -1,30 +1,33 @@
 {
-	"expo": {
-		"name": "project-react-native-app",
-		"slug": "project-react-native-app",
-		"version": "1.0.0",
-		"orientation": "portrait",
-		"icon": "./assets/icon.png",
-		"splash": {
-			"image": "./assets/splash.png",
-			"resizeMode": "contain",
-			"backgroundColor": "#ffffff"
-		},
-		"updates": {
-			"fallbackToCacheTimeout": 0
-		},
-		"assetBundlePatterns": ["**/*"],
-		"ios": {
-			"supportsTablet": true
-		},
-		"android": {
-			"adaptiveIcon": {
-				"foregroundImage": "./assets/adaptive-icon.png",
-				"backgroundColor": "#FFFFFF"
-			}
-		},
-		"web": {
-			"favicon": "./assets/favicon.png"
-		}
-	}
+  "expo": {
+    "name": "Simon-react-native-app",
+    "slug": "simon-react-native-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "description": ""
+  }
 }

components/Header.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { View, Text } from 'react-native'
+import styled from 'styled-components/native'
+
+const Container = styled.View`
+  padding: 30px;
+`
+
+const MainText = styled.Text`
+  font-size: 20px;
+  padding: 10px;
+  font-weight: 900;
+  text-align: center;
+  color: black;
+  background-color: #87e5f5;
+  border-radius: 8px;
+`
+
+const Header = () => {
+  return (
+    <Container>
+      <MainText>Shake the phone for a quote</MainText>
+    </Container>
+  )
+}
+export default Header

components/ShakeApi.js

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react'
+import { View, Text, TouchableOpacity } from 'react-native'
+import styled from 'styled-components/native'
+import { Accelerometer } from 'expo-sensors'
+
+const Container = styled.View`
+  margin: 20px;
+`
+
+const Quote = styled.Text`
+  font-size: 20px;
+  background-color: #87e5f5;
+  color: black;
+  padding: 20px;
+  line-height: 30px;
+  border-radius: 8px;
+  font-weight: 900;
+`
+
+const Author = styled.Text`
+  font-size: 16px;
+  text-align: center;
+  font-weight: 900;
+  background-color: #87e5f5;
+  color: black;
+  padding: 10px;
+  margin: 20px;
+  border-radius: 8px;
+`
+
+const Button = styled.TouchableOpacity`
+  width: 100%;
+  background-color: #87e5f5;
+  padding: 20px;
+  border-radius: 8px;
+  font-weight: 900;
+`
+
+const ButtonText = styled.Text`
+  font-size: 20px;
+  color: white;
+`
+
+const ShakePai = () => {
+  const [quote, setQuote] = useState({})
+
+  const generateQuote = () => {
+    fetch('https://api.quotable.io/random')
+      .then((res) => res.json())
+      .then((data) => setQuote(data))
+  }
+
+  useEffect(() => {
+    generateQuote()
+  }, [])
+
+  const [data, setData] = useState({
+    x: 0,
+    y: 0,
+    z: 0,
+  })
+
+  const [subscription, setSubscription] = useState(null)
+
+  const subscribe = () => {
+    setSubscription(
+      Accelerometer.addListener((accelerometerData) => {
+        setData(accelerometerData)
+      }),
+    )
+  }
+
+  const unsubscribe = () => {
+    subscription && subscription.remove()
+    setSubscription(null)
+  }
+
+  useEffect(() => {
+    // Component mounts, execute the function below:
+    subscribe()
+
+    // Component unmounts below, execute the function in the return statement below:
+    return () => unsubscribe()
+  }, [])
+
+  const isShaking = (data) => {
+    const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z)
+    return totalForce > 2
+  }
+
+  useEffect(() => {
+    if (isShaking(data)) {
+      generateQuote()
+    }
+  }, [data])
+
+  return (
+    <>
+      <Container>
+        {isShaking(data) && generateQuote()}
+        <Quote>"{quote.content}"</Quote>
+        <Author>{quote.author}</Author>
+      </Container>
+      <View>
+        <Button onPress={generateQuote}>
+          <ButtonText>Press button for a quote</ButtonText>
+        </Button>
+      </View>
+    </>
+  )
+}
+
+export default ShakePai