diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..882084a5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "activityBar.background": "#15313E", + "titleBar.activeBackground": "#1D4457", + "titleBar.activeForeground": "#F9FCFD" + } +} \ No newline at end of file diff --git a/App.js b/App.js index e3fbe3ed..69d6d0d8 100644 --- a/App.js +++ b/App.js @@ -1,26 +1,15 @@ -import React from 'react'; -import styled from 'styled-components/native'; +import React from 'react' -const Container = styled.View` - flex: 1; - background-color: papayawhip; - justify-content: center; - align-items: center; -`; +import Shakecomponent from './components/ShakeComponent' -const Title = styled.Text` - font-size: 24px; - color: palevioletred; -`; const App = () => { + return ( - - This is your cool app! - Go to App.js and start coding - 💅💅💅 - - ); -}; + <> + + + ) +} -export default App; +export default App diff --git a/README.md b/README.md index e9e2601f..138f8b4e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,17 @@ # Project React Native App 📱 -Replace this readme with your own information about your project. +In this project I created a mobile app using react Native. -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? +I chose to use an external API in my app and fetch and display data from it. I used the Accelometer from expo sensors which detects the phones movement. The movement of the phone (passing a certain threshold) activates the function which fetches new data from the API. I also added a vibration effect which activates on every new render. + +I added a loader from the Lottie files and used switch statement to render different images depending on the content of the data. + ## 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. +Link to my deployed project: + +https://expo.dev/@tiiliu/project-react-native-app?serviceType=classic&distribution=expo-go diff --git a/assets/bouncy-balls-loader.json b/assets/bouncy-balls-loader.json new file mode 100644 index 00000000..ff0f4c28 --- /dev/null +++ b/assets/bouncy-balls-loader.json @@ -0,0 +1 @@ +{"v":"5.3.4","fr":29.9700012207031,"ip":0,"op":80.0000032584668,"w":1920,"h":1080,"nm":"Bounce-color","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":1497.023,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.202],"y":[0]},"n":["0p197_1_0p202_0"],"t":-26,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":-16,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":-6,"s":[757.039],"e":[394.039]},{"i":{"x":[0.76],"y":[0.497]},"o":{"x":[0.441],"y":[0]},"n":["0p76_0p497_0p441_0"],"t":4,"s":[394.039],"e":[474.183]},{"i":{"x":[0.712],"y":[1]},"o":{"x":[0.626],"y":[0.372]},"n":["0p712_1_0p626_0p372"],"t":9,"s":[474.183],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":14,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":24,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":34,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":44,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":54,"s":[757.039],"e":[394.039]},{"i":{"x":[0.819],"y":[0.485]},"o":{"x":[0.534],"y":[0]},"n":["0p819_0p485_0p534_0"],"t":64,"s":[394.039],"e":[559.222]},{"i":{"x":[0.648],"y":[1]},"o":{"x":[0.477],"y":[0.485]},"n":["0p648_1_0p477_0p485"],"t":71,"s":[559.222],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":74,"s":[757.039],"e":[394.039]},{"t":84.0000034213901}],"ix":4}},"a":{"a":0,"k":[-588.977,217.039,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[207.547,207.547],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":13,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":14,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":34,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":53,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":73,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":74,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":93,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":94,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":113,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":114,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":133,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":134,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":153,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"t":154.000006272549}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-588.977,217.039],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80.0000032584668,"st":-26.0000010590017,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":1228.273,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.202],"y":[0]},"n":["0p197_1_0p202_0"],"t":-22,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":-12,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":-2,"s":[757.039],"e":[394.039]},{"i":{"x":[0.681],"y":[0.905]},"o":{"x":[0.348],"y":[0]},"n":["0p681_0p905_0p348_0"],"t":8,"s":[394.039],"e":[408.066]},{"i":{"x":[0.788],"y":[1]},"o":{"x":[0.773],"y":[0.083]},"n":["0p788_1_0p773_0p083"],"t":9,"s":[408.066],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":18,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":28,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":38,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":48,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":58,"s":[757.039],"e":[394.039]},{"i":{"x":[0.716],"y":[0.369]},"o":{"x":[0.386],"y":[0]},"n":["0p716_0p369_0p386_0"],"t":68,"s":[394.039],"e":[414.857]},{"i":{"x":[0.757],"y":[1]},"o":{"x":[0.716],"y":[0.225]},"n":["0p757_1_0p716_0p225"],"t":71,"s":[414.857],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":78,"s":[757.039],"e":[394.039]},{"t":88.0000035843135}],"ix":4}},"a":{"a":0,"k":[-588.977,217.039,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[207.547,207.547],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-63,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-62,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-43,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-42,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-23,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-22,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-3,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":-2,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":18,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":37,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":38,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":58,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":77,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"t":78.0000031770051}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-588.977,217.039],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80.0000032584668,"st":-22.0000008960784,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":959.523,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.202],"y":[0]},"n":["0p197_1_0p202_0"],"t":-18,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":-8,"s":[394.039],"e":[757.039]},{"i":{"x":[0.276],"y":[0.768]},"o":{"x":[0.244],"y":[0]},"n":["0p276_0p768_0p244_0"],"t":2,"s":[757.039],"e":[426.466]},{"i":{"x":[0.614],"y":[1]},"o":{"x":[0.284],"y":[0.398]},"n":["0p614_1_0p284_0p398"],"t":9,"s":[426.466],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":12,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":22,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":32,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":42,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":52,"s":[394.039],"e":[757.039]},{"i":{"x":[0.218],"y":[0.92]},"o":{"x":[0.212],"y":[0]},"n":["0p218_0p92_0p212_0"],"t":62,"s":[757.039],"e":[396.026]},{"i":{"x":[0.652],"y":[1]},"o":{"x":[0.319],"y":[0.657]},"n":["0p652_1_0p319_0p657"],"t":71,"s":[396.026],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":72,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":82,"s":[757.039],"e":[394.039]},{"t":92.0000037472368}],"ix":4}},"a":{"a":0,"k":[-588.977,217.039,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[207.547,207.547],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":1,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":2,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":21,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":22,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":41,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":42,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":61,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":62,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":81,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":82,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":101,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":102,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":121,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":122,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":141,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":142,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":161,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"t":162.000006598395}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-588.977,217.039],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80.0000032584668,"st":-18.000000733155,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":690.773,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.202],"y":[0]},"n":["0p197_1_0p202_0"],"t":-14,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":-4,"s":[394.039],"e":[757.039]},{"i":{"x":[0.518],"y":[0.487]},"o":{"x":[0.356],"y":[0]},"n":["0p518_0p487_0p356_0"],"t":6,"s":[757.039],"e":[569.161]},{"i":{"x":[0.465],"y":[1]},"o":{"x":[0.18],"y":[0.481]},"n":["0p465_1_0p18_0p481"],"t":9,"s":[569.161],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":16,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":26,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":36,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":46,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":56,"s":[394.039],"e":[757.039]},{"i":{"x":[0.366],"y":[0.646]},"o":{"x":[0.29],"y":[0]},"n":["0p366_0p646_0p29_0"],"t":66,"s":[757.039],"e":[461.029]},{"i":{"x":[0.559],"y":[1]},"o":{"x":[0.24],"y":[0.592]},"n":["0p559_1_0p24_0p592"],"t":71,"s":[461.029],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":76,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":86,"s":[757.039],"e":[394.039]},{"t":96.0000039101602}],"ix":4}},"a":{"a":0,"k":[-588.977,217.039,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[207.547,207.547],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":26,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":45,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":46,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":65,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":66,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":85,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":105,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":106,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":125,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":126,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":145,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":146,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":165,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"t":166.000006761319}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-588.977,217.039],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80.0000032584668,"st":-14.0000005702317,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Shape Layer 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":422.023,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.202],"y":[0]},"n":["0p197_1_0p202_0"],"t":-10,"s":[757.039],"e":[394.039]},{"i":{"x":[0.855],"y":[0.733]},"o":{"x":[0.715],"y":[0]},"n":["0p855_0p733_0p715_0"],"t":0,"s":[394.039],"e":[734.282]},{"i":{"x":[0.619],"y":[1]},"o":{"x":[0.308],"y":[0.944]},"n":["0p619_1_0p308_0p944"],"t":9,"s":[734.282],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":10,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":20,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":30,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":40,"s":[394.039],"e":[757.039]},{"i":{"x":[0.197],"y":[1]},"o":{"x":[0.2],"y":[0]},"n":["0p197_1_0p2_0"],"t":50,"s":[757.039],"e":[394.039]},{"i":{"x":[0.801],"y":[1]},"o":{"x":[0.795],"y":[0]},"n":["0p801_1_0p795_0"],"t":60,"s":[394.039],"e":[757.039]},{"i":{"x":[0.694],"y":[0.382]},"o":{"x":[0.385],"y":[0]},"n":["0p694_0p382_0p385_0"],"t":70,"s":[757.039],"e":[721.884]},{"i":{"x":[0.279],"y":[1]},"o":{"x":[0.143],"y":[0.278]},"n":["0p279_1_0p143_0p278"],"t":71,"s":[721.884],"e":[394.039]},{"t":80.0000032584668}],"ix":4}},"a":{"a":0,"k":[-588.977,217.039,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[207.547,207.547],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":9,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":29,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":49,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":50,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":69,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":89,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[0.592723608017,0.898031115532,1,1],"e":[0.592723608017,0.898031115532,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":109,"s":[0.592723608017,0.898031115532,1,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":110,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.592723608017,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":129,"s":[1,0.592723608017,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":130,"s":[1,0.902523159981,0.592723608017,1],"e":[1,0.902523159981,0.592723608017,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":149,"s":[1,0.902523159981,0.592723608017,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":150,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,1,0.644232094288,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":169,"s":[0.592723608017,1,0.644232094288,1],"e":[0.592723608017,0.898031115532,1,1]},{"t":170.000006924242}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-588.977,217.039],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80.0000032584668,"st":-10.0000004073083,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/assets/busywork.png b/assets/busywork.png new file mode 100644 index 00000000..e2744ed0 Binary files /dev/null and b/assets/busywork.png differ diff --git a/assets/charity.png b/assets/charity.png new file mode 100644 index 00000000..900c03d7 Binary files /dev/null and b/assets/charity.png differ diff --git a/assets/cooking.png b/assets/cooking.png new file mode 100644 index 00000000..b719c096 Binary files /dev/null and b/assets/cooking.png differ diff --git a/assets/diy.png b/assets/diy.png new file mode 100644 index 00000000..cad6d4c9 Binary files /dev/null and b/assets/diy.png differ diff --git a/assets/education.png b/assets/education.png new file mode 100644 index 00000000..71365922 Binary files /dev/null and b/assets/education.png differ diff --git a/assets/music.png b/assets/music.png new file mode 100644 index 00000000..659539d8 Binary files /dev/null and b/assets/music.png differ diff --git a/assets/recreational.png b/assets/recreational.png new file mode 100644 index 00000000..338ae1e8 Binary files /dev/null and b/assets/recreational.png differ diff --git a/assets/relaxing.png b/assets/relaxing.png new file mode 100644 index 00000000..2e6d8c6e Binary files /dev/null and b/assets/relaxing.png differ diff --git a/assets/social.png b/assets/social.png new file mode 100644 index 00000000..225dc171 Binary files /dev/null and b/assets/social.png differ diff --git a/components/Footer.js b/components/Footer.js new file mode 100644 index 00000000..a552600c --- /dev/null +++ b/components/Footer.js @@ -0,0 +1,41 @@ +import React from "react" +import { Text, View, StyleSheet } from "react-native" +import AppLoading from "expo-app-loading" +import { + useFonts, + WorkSans_300Light, + WorkSans_400Regular, +} from "@expo-google-fonts/work-sans" + + +const Footer = () => { + let [fontsLoaded] = useFonts({ + WorkSans_300Light, + WorkSans_400Regular, + }) + + if (!fontsLoaded) { + return + } else { + return ( + + This app was made by Tiina Liukkonen + + ) + } +} + +const styles = StyleSheet.create({ + container: { + textAlign: "center", + marginTop: "15%", + + }, + name: { + fontSize: 12, + fontFamily: "WorkSans_400Regular", + } +}) + + +export default Footer diff --git a/components/Header.js b/components/Header.js new file mode 100644 index 00000000..1c3a1ca7 --- /dev/null +++ b/components/Header.js @@ -0,0 +1,56 @@ +import React from "react" +import { View, Text, StyleSheet } from "react-native" +import AppLoading from "expo-app-loading" +import { + useFonts, + WorkSans_100Thin, + WorkSans_200ExtraLight, + WorkSans_300Light, + WorkSans_400Regular, + WorkSans_500Medium, + WorkSans_600SemiBold, + WorkSans_700Bold, + WorkSans_800ExtraBold, + WorkSans_900Black, +} from "@expo-google-fonts/work-sans" + + +const Header = () => { + let [fontsLoaded] = useFonts({ + WorkSans_100Thin, + WorkSans_200ExtraLight, + WorkSans_300Light, + WorkSans_400Regular, + WorkSans_500Medium, + WorkSans_600SemiBold, + WorkSans_700Bold, + WorkSans_800ExtraBold, + WorkSans_900Black, + }) + + if (!fontsLoaded) { + return + } else { + return ( + + Nothing to do? Give the phone a shake for ideas! + + ) + } +} + +const styles = StyleSheet.create({ + container: { + marginTop: "5%", + }, + questionTitle: { + fontSize: 22, + color: "black", + textAlign: "center", + paddingHorizontal: 30, + fontFamily: "WorkSans_500Medium", + color: "#000000ac" + }, +}) + +export default Header diff --git a/components/Loader.js b/components/Loader.js new file mode 100644 index 00000000..794a59c5 --- /dev/null +++ b/components/Loader.js @@ -0,0 +1,17 @@ +import React from "react" + +import LottieView from "lottie-react-native" + +const Loader = () => { + return ( + <> + + + ) +} + +export default Loader diff --git a/components/ShakeComponent.js b/components/ShakeComponent.js new file mode 100644 index 00000000..d17ea01e --- /dev/null +++ b/components/ShakeComponent.js @@ -0,0 +1,242 @@ +import React, { useEffect, useState } from "react" +import { Accelerometer } from "expo-sensors" +import { View, Text, StyleSheet, Image, Vibration } from "react-native" +import AppLoading from "expo-app-loading" +import { + useFonts, + WorkSans_100Thin, + WorkSans_200ExtraLight, + WorkSans_300Light, + WorkSans_400Regular, + WorkSans_500Medium, + WorkSans_600SemiBold, + WorkSans_700Bold, + WorkSans_800ExtraBold, + WorkSans_900Black, + WorkSans_100Thin_Italic, + WorkSans_200ExtraLight_Italic, + WorkSans_300Light_Italic, + WorkSans_400Regular_Italic, + WorkSans_500Medium_Italic, + WorkSans_600SemiBold_Italic, + WorkSans_700Bold_Italic, + WorkSans_800ExtraBold_Italic, + WorkSans_900Black_Italic, +} from "@expo-google-fonts/work-sans" + +import Loader from "./Loader" +import Header from "./Header" +import Footer from "./Footer" + + +const isShaking = (data) => { + const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z) + return totalForce > 1.78 +} + +const Shakecomponent = () => { + let [fontsLoaded] = useFonts({ + WorkSans_100Thin, + WorkSans_200ExtraLight, + WorkSans_300Light, + WorkSans_400Regular, + WorkSans_500Medium, + WorkSans_600SemiBold, + WorkSans_700Bold, + WorkSans_800ExtraBold, + WorkSans_900Black, + WorkSans_100Thin_Italic, + WorkSans_200ExtraLight_Italic, + WorkSans_300Light_Italic, + WorkSans_400Regular_Italic, + WorkSans_500Medium_Italic, + WorkSans_600SemiBold_Italic, + WorkSans_700Bold_Italic, + WorkSans_800ExtraBold_Italic, + WorkSans_900Black_Italic, + }) + + Accelerometer.setUpdateInterval(400) + const [fetchedData, setFetchedData] = useState([]) + const [loading, setLoading] = useState(false) + const [subscription, setSubscription] = useState(null) + + const [data, setData] = useState({ + x: 0, + y: 0, + z: 0, + }) + + useEffect(() => { + fetchData() + }, []) + + useEffect(() => { + subscribe() + return () => unsubscribe() + }, []) + + useEffect(() => { + if (isShaking(data)) { + fetchData() + } + }, [data]) + + const subscribe = () => { + setSubscription( + Accelerometer.addListener((accelerometerData) => { + setData(accelerometerData) + }) + ) + } + + const unsubscribe = () => { + subscription && subscription.remove() + setSubscription(null) + } + + const fetchData = () => { + setLoading(true) + fetch("https://www.boredapi.com/api/activity") + .then(res => res.json()) + .then(data => setTimeout(() => setFetchedData(data), 600)) + .finally(() => setTimeout(() => setLoading(false), 600)) + Vibration.vibrate() + } + + const changeImage = () => { + switch (fetchedData.type) { + case "social": + return + break + case "cooking": + return + break + case "busywork": + return + break + case "education": + return + break + case "diy": + return + break + case "recreational": + return + break + case "charity": + return + break + case "music": + return + break + default: + return + } + } + + if (loading) { + return + } + + if (!fontsLoaded) { + return + } else { + return ( + +
+ + + + + {fetchedData.activity} + + + {changeImage()} + + + {fetchedData.participants > 1 ? "Grab your friends with you for this one!" : ""} + {fetchedData.price <= 0 ? "No money needed for this activity!" : ""} + + + + +