diff --git a/App.js b/App.js index 6b897d8c..27ac5dda 100644 --- a/App.js +++ b/App.js @@ -4,15 +4,11 @@ import { SensorComponent } from "./components/SensorComponent"; const Container = styled.View` flex: 1; - background-color: papayawhip; + background-color: #2C3D4F; justify-content: center; - align-items: center; + `; -const Title = styled.Text` - font-size: 24px; - color: palevioletred; -`; const App = () => { return ( @@ -22,4 +18,4 @@ const App = () => { ); }; -export default App; +export default App; \ No newline at end of file diff --git a/README.md b/README.md index e9e2601f..067ef962 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,5 @@ # 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? - -## 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. diff --git a/components/SensorComponent.js b/components/SensorComponent.js index 9719301f..5de8e8c8 100644 --- a/components/SensorComponent.js +++ b/components/SensorComponent.js @@ -1,96 +1,89 @@ import React, { useState, useEffect } from "react"; import { Accelerometer } from "expo-sensors"; import styled from "styled-components/native"; +import { View, Text, TouchableOpacity } from "react-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` +const Container = styled.View` display: flex; - flex-direction: column; + text-align: center; + margin-bottom: 20px; + margin-left: 20px; + margin-right:20px; `; -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``; + +const Button = styled.TouchableOpacity` +display: flex; +text-align: center; +border: solid 2px; +width: 50%; +border-radius:5px; +padding:8px; +margin-top: 60px; +margin-left: 80px; +box-shadow: 5px 5px #000; +background-color: grey; +` + ; 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 + const [quote, setQuote] = useState({}); + + const generateQuote = () => { + fetch("https://api.quotable.io/random") + .then(response => response.json()) + .then(data => setQuote(data)) + } + useEffect(() => { + generateQuote(); + }, [data]); + 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); }) ); }; - // 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(); - - // Stop listening to the data when we leave SensorComponent return () => _unsubscribe(); }, []); return ( - - {/* - 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) && Shaking} - - Shake Data - {/* toFixed(2) only shows two decimal places, otherwise it's quite a lot */} - X: {data.x.toFixed(2)} - Y: {data.y.toFixed(2)} - Z: {data.z.toFixed(2)} - - + + {isShaking(data) && generateQuote()} + + {quote.content} + {quote.blank} + {quote.author} + + + ); }; diff --git a/package-lock.json b/package-lock.json index 76967086..8e5ddbbc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "expo": "~43.0.0", "expo-sensors": "~11.0.3", "expo-status-bar": "~1.1.0", + "expo-updates": "~0.10.15", "mem": "^9.0.1", "minimist": "^1.2.6", "react": "17.0.1", @@ -4231,11 +4232,24 @@ "fontfaceobserver": "^2.1.0" } }, + "node_modules/expo-json-utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.2.1.tgz", + "integrity": "sha512-wU7gXGtaUlyxFLTp5e3PbnJB90/92r6gEc2BuMHdqE0OxhTQKyKzRszk2szCsdkeI7L4XntvZhCs1Px+gL1gvA==" + }, "node_modules/expo-keep-awake": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.0.0.tgz", "integrity": "sha512-x5zRTjIvSry/EISKvjWpnLERGZj5maCwEouOfiDk0JPa0UTg/zFkT7pmiadAfHT95XUgjjb2DOku+wj6J7el7Q==" }, + "node_modules/expo-manifests": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.2.4.tgz", + "integrity": "sha512-8PrMPyvElKXflYd1ApDHJR9JF0SR996iVEVQgHAMLzVP7OqEAM6dQaFeqrRqVn/DSsxEWkJTpxv8WJ5NWrT4Lg==", + "dependencies": { + "expo-json-utils": "~0.2.0" + } + }, "node_modules/expo-modules-autolinking": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-0.3.3.tgz", @@ -4282,9 +4296,9 @@ } }, "node_modules/expo-modules-core": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.4.7.tgz", - "integrity": "sha512-boEbB3tAYO7WkgcaXToQLY8IUeEGOZeDF+StTL38FA0l8jzJwwQLU7TaWjWEMGfxvvn7KP7V7kFudJKc7dak3g==", + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.4.10.tgz", + "integrity": "sha512-uCZA3QzF0syRaHwYY99iaNhnye4vSQGsJ/y6IAiesXdbeVahWibX4G1KoKNPUyNsKXIM4tqA+4yByUSvJe4AAw==", "dependencies": { "compare-versions": "^3.4.0", "invariant": "^2.2.4" @@ -4367,6 +4381,94 @@ "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.1.0.tgz", "integrity": "sha512-XgAbGfDV/Q6br2h4yzQwcZRYi37bZ/nvc06vvaJ7i7w9tRxb05OJmXBxl7ywkKlFCMcN6q3Miaf2wnzEgMwJoQ==" }, + "node_modules/expo-structured-headers": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-2.0.0.tgz", + "integrity": "sha512-pCMjCNpVX8rTD0gwfa29ShUY2++4yxCXodvMWwQonvDtunp2UC3PlvGo82oBBOqsV0yKPN2rMO43tOYSH6lW0Q==" + }, + "node_modules/expo-updates": { + "version": "0.10.15", + "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.10.15.tgz", + "integrity": "sha512-GHh1e0BwJY7aT+huGfneXpMhPKKkDIOBqCWyZDyTo7AWLj2C2ZCvgT2D9LWyl6v9WwxMEfO94RaYCQaayD/rfw==", + "dependencies": { + "@expo/config": "^5.0.9", + "@expo/config-plugins": "^4.0.2", + "@expo/metro-config": "~0.1.84", + "expo-manifests": "~0.2.2", + "expo-modules-core": "~0.4.8", + "expo-structured-headers": "~2.0.0", + "expo-updates-interface": "~0.4.0", + "fbemitter": "^2.1.1", + "resolve-from": "^5.0.0", + "uuid": "^3.4.0" + } + }, + "node_modules/expo-updates-interface": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-0.4.0.tgz", + "integrity": "sha512-EUJaLnDAePikGEQT8w6gjCY3m/dlGgjZKVn5XBaxZMkHzOy3PDQo6QOcK/bcMdkA3CyNrvo6NCe+/7RHrgmK4A==" + }, + "node_modules/expo-updates/node_modules/@expo/config-plugins": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-4.1.4.tgz", + "integrity": "sha512-fkOjXnSieQfVSWVLKhst0DnCAyeHksvWky1CldFCQllhDB1HHBiP09Z8pamVB783n3qr/1HNZiSp6k2iUcaSoA==", + "dependencies": { + "@expo/config-types": "^45.0.0", + "@expo/json-file": "8.2.36", + "@expo/plist": "0.0.18", + "@expo/sdk-runtime-versions": "^1.0.0", + "@react-native/normalize-color": "^2.0.0", + "chalk": "^4.1.2", + "debug": "^4.3.1", + "find-up": "~5.0.0", + "getenv": "^1.0.0", + "glob": "7.1.6", + "resolve-from": "^5.0.0", + "semver": "^7.3.5", + "slash": "^3.0.0", + "xcode": "^3.0.1", + "xml2js": "0.4.23" + } + }, + "node_modules/expo-updates/node_modules/@expo/config-types": { + "version": "45.0.0", + "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-45.0.0.tgz", + "integrity": "sha512-/QGhhLWyaGautgEyU50UJr5YqKJix5t77ePTwreOVAhmZH+ff3nrrtYTTnccx+qF08ZNQmfAyYMCD3rQfzpiJA==" + }, + "node_modules/expo-updates/node_modules/@expo/json-file": { + "version": "8.2.36", + "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-8.2.36.tgz", + "integrity": "sha512-tOZfTiIFA5KmMpdW9KF7bc6CFiGjb0xnbieJhTGlHrLL+ps2G0OkqmuZ3pFEXBOMnJYUVpnSy++52LFxvpa5ZQ==", + "dependencies": { + "@babel/code-frame": "~7.10.4", + "json5": "^1.0.1", + "write-file-atomic": "^2.3.0" + } + }, + "node_modules/expo-updates/node_modules/@expo/plist": { + "version": "0.0.18", + "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.18.tgz", + "integrity": "sha512-+48gRqUiz65R21CZ/IXa7RNBXgAI/uPSdvJqoN9x1hfL44DNbUoWHgHiEXTx7XelcATpDwNTz6sHLfy0iNqf+w==", + "dependencies": { + "@xmldom/xmldom": "~0.7.0", + "base64-js": "^1.2.3", + "xmlbuilder": "^14.0.0" + } + }, + "node_modules/expo-updates/node_modules/semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", @@ -12723,11 +12825,24 @@ "fontfaceobserver": "^2.1.0" } }, + "expo-json-utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.2.1.tgz", + "integrity": "sha512-wU7gXGtaUlyxFLTp5e3PbnJB90/92r6gEc2BuMHdqE0OxhTQKyKzRszk2szCsdkeI7L4XntvZhCs1Px+gL1gvA==" + }, "expo-keep-awake": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-10.0.0.tgz", "integrity": "sha512-x5zRTjIvSry/EISKvjWpnLERGZj5maCwEouOfiDk0JPa0UTg/zFkT7pmiadAfHT95XUgjjb2DOku+wj6J7el7Q==" }, + "expo-manifests": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.2.4.tgz", + "integrity": "sha512-8PrMPyvElKXflYd1ApDHJR9JF0SR996iVEVQgHAMLzVP7OqEAM6dQaFeqrRqVn/DSsxEWkJTpxv8WJ5NWrT4Lg==", + "requires": { + "expo-json-utils": "~0.2.0" + } + }, "expo-modules-autolinking": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-0.3.3.tgz", @@ -12764,9 +12879,9 @@ } }, "expo-modules-core": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.4.7.tgz", - "integrity": "sha512-boEbB3tAYO7WkgcaXToQLY8IUeEGOZeDF+StTL38FA0l8jzJwwQLU7TaWjWEMGfxvvn7KP7V7kFudJKc7dak3g==", + "version": "0.4.10", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.4.10.tgz", + "integrity": "sha512-uCZA3QzF0syRaHwYY99iaNhnye4vSQGsJ/y6IAiesXdbeVahWibX4G1KoKNPUyNsKXIM4tqA+4yByUSvJe4AAw==", "requires": { "compare-versions": "^3.4.0", "invariant": "^2.2.4" @@ -12845,6 +12960,90 @@ "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.1.0.tgz", "integrity": "sha512-XgAbGfDV/Q6br2h4yzQwcZRYi37bZ/nvc06vvaJ7i7w9tRxb05OJmXBxl7ywkKlFCMcN6q3Miaf2wnzEgMwJoQ==" }, + "expo-structured-headers": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-2.0.0.tgz", + "integrity": "sha512-pCMjCNpVX8rTD0gwfa29ShUY2++4yxCXodvMWwQonvDtunp2UC3PlvGo82oBBOqsV0yKPN2rMO43tOYSH6lW0Q==" + }, + "expo-updates": { + "version": "0.10.15", + "resolved": "https://registry.npmjs.org/expo-updates/-/expo-updates-0.10.15.tgz", + "integrity": "sha512-GHh1e0BwJY7aT+huGfneXpMhPKKkDIOBqCWyZDyTo7AWLj2C2ZCvgT2D9LWyl6v9WwxMEfO94RaYCQaayD/rfw==", + "requires": { + "@expo/config": "^5.0.9", + "@expo/config-plugins": "^4.0.2", + "@expo/metro-config": "~0.1.84", + "expo-manifests": "~0.2.2", + "expo-modules-core": "~0.4.8", + "expo-structured-headers": "~2.0.0", + "expo-updates-interface": "~0.4.0", + "fbemitter": "^2.1.1", + "resolve-from": "^5.0.0", + "uuid": "^3.4.0" + }, + "dependencies": { + "@expo/config-plugins": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-4.1.4.tgz", + "integrity": "sha512-fkOjXnSieQfVSWVLKhst0DnCAyeHksvWky1CldFCQllhDB1HHBiP09Z8pamVB783n3qr/1HNZiSp6k2iUcaSoA==", + "requires": { + "@expo/config-types": "^45.0.0", + "@expo/json-file": "8.2.36", + "@expo/plist": "0.0.18", + "@expo/sdk-runtime-versions": "^1.0.0", + "@react-native/normalize-color": "^2.0.0", + "chalk": "^4.1.2", + "debug": "^4.3.1", + "find-up": "~5.0.0", + "getenv": "^1.0.0", + "glob": "7.1.6", + "resolve-from": "^5.0.0", + "semver": "^7.3.5", + "slash": "^3.0.0", + "xcode": "^3.0.1", + "xml2js": "0.4.23" + } + }, + "@expo/config-types": { + "version": "45.0.0", + "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-45.0.0.tgz", + "integrity": "sha512-/QGhhLWyaGautgEyU50UJr5YqKJix5t77ePTwreOVAhmZH+ff3nrrtYTTnccx+qF08ZNQmfAyYMCD3rQfzpiJA==" + }, + "@expo/json-file": { + "version": "8.2.36", + "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-8.2.36.tgz", + "integrity": "sha512-tOZfTiIFA5KmMpdW9KF7bc6CFiGjb0xnbieJhTGlHrLL+ps2G0OkqmuZ3pFEXBOMnJYUVpnSy++52LFxvpa5ZQ==", + "requires": { + "@babel/code-frame": "~7.10.4", + "json5": "^1.0.1", + "write-file-atomic": "^2.3.0" + } + }, + "@expo/plist": { + "version": "0.0.18", + "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.18.tgz", + "integrity": "sha512-+48gRqUiz65R21CZ/IXa7RNBXgAI/uPSdvJqoN9x1hfL44DNbUoWHgHiEXTx7XelcATpDwNTz6sHLfy0iNqf+w==", + "requires": { + "@xmldom/xmldom": "~0.7.0", + "base64-js": "^1.2.3", + "xmlbuilder": "^14.0.0" + } + }, + "semver": { + "version": "7.3.7", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", + "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "requires": { + "lru-cache": "^6.0.0" + } + } + } + }, + "expo-updates-interface": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-0.4.0.tgz", + "integrity": "sha512-EUJaLnDAePikGEQT8w6gjCY3m/dlGgjZKVn5XBaxZMkHzOy3PDQo6QOcK/bcMdkA3CyNrvo6NCe+/7RHrgmK4A==" + }, "extend-shallow": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", diff --git a/package.json b/package.json index ea0453f9..7b2907cf 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "react-native": "0.64.3", "react-native-web": "0.17.1", "styled-components": "^5.3.3", - "expo-sensors": "~11.0.3" + "expo-sensors": "~11.0.3", + "expo-updates": "~0.10.15" }, "devDependencies": { "@babel/core": "^7.12.9",