React native bad jokes app

App.js

@@ -1,26 +1,23 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import { View, ScrollView, StyleSheet, Text } from 'react-native'
 
-const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
-`;
+import Start from './components/Start'
+import Header from './components/Header';
 
-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>
+		<ScrollView style={styles.wrapper}>
+		<Header />
+		<Start />
+		</ScrollView>
 	);
 };
 
+const styles = StyleSheet.create({
+wrapper: {
+	backgroundColor: 'yellow',
+}
+})
+
 export default App;

components/ArtFetch.js

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components/native";
+import { View, StyleSheet, Text, Image, TouchableOpacity, Button } from "react-native";
+import { Accelerometer } from "expo-sensors";
+
+
+import { MEME_API, JOKES_API } from "./url/urls";
+
+const ArtFetch = () => {
+  const [joke, setJoke] = useState({});
+  const [subscription, setSubscription] = useState(null);
+
+  const getJoke = () => {
+    fetch(JOKES_API)
+      .then((res) => res.json())
+      .then((data) => setJoke(data));
+  };
+
+  useEffect(() => {
+    getJoke();
+  }, []);
+
+  const [data, setData] = useState({
+    x: 0,
+    y: 0,
+    z: 0,
+  });
+
+
+      const { x, y, z } = data;
+  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 execute the function in the return statement
+    return () => unsubscribe();
+  }, []);
+
+
+const isShaking = (data) => {
+    const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
+    return totalForce > 2.2;
+}
+
+
+useEffect(()=> {
+    if (isShaking(data)) {
+        getJoke();
+    }
+}, [data])
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        <Text style={styles.jokeText}>{joke.setup}</Text>
+        <Text style={styles.deliveryText}>{joke.delivery}</Text>
+      </View>
+    <View style={styles.button}>
+      <TouchableOpacity onPress={getJoke}>
+                <Text style={styles.buttonText}>Press to laugh</Text>
+            </TouchableOpacity>
+            </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly',
+    width: 250,
+    minHeight: 100,
+
+  },
+  textContainer: {
+    marginTop: 28,
+    borderLeftWidth: 2,
+    borderLeftColor: 'tomato',
+    minHeight: 80,
+    width: 250,
+  },
+
+  jokeText: {
+    fontFamily: "GillSans-SemiBold",
+    fontSize: 18,
+    marginBottom: 10,
+    paddingLeft: 10,
+    paddingTop: 5,
+  },
+  deliveryText: {
+    paddingLeft: 10,
+    fontFamily: "Optima-Italic",
+    fontSize:  18,
+  },
+  image: {
+    width: 300,
+    height: "auto",
+  },
+  button: {
+    borderWidth: 2,
+    padding: 8,
+    marginTop: 80,
+    borderColor: 'tomato',
+    borderRadius: 5,
+    marginBottom: 20,
+  },
+  buttonText: {
+    fontFamily: "Optima-Italic",
+    textTransform: 'uppercase',
+    color: 'tomato',
+  }
+});
+
+export default ArtFetch;

components/Header.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react'
+import styled from 'styled-components/native';
+import { View, StyleSheet, Text } from 'react-native'
+
+const Header = () => {
+
+  return(
+    <View style={styles.container}>
+    <Text style={styles.header}>
+    <Text style={styles.headOne}>
+    Randomly Funny / 
+    </Text>
+    <Text style={styles.headTwo}>
+      Try not to laugh
+    </Text>
+    </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+container: {
+  width: 375,
+  height: 120,
+  marginTop: 50,
+
+  display: 'flex',
+  flexDirection: 'column',
+
+  backgroundColor: 'yellow',
+  width: 375,
+},
+header: {
+  fontFamily: 'GillSans-SemiBold',
+  fontSize: 40,
+  paddingLeft: 20,
+},
+headTwo: {
+  fontFamily: 'Optima-Italic',
+  fontSize: 37,
+  color: 'tomato',
+}
+})
+
+export default Header

components/Start.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components/native';
+import { View, StyleSheet, Text, Image } from 'react-native'
+import ArtFetch from './ArtFetch';
+
+
+
+const Start = () => {
+
+  return(
+<View style={styles.main}>
+    <View style={styles.container}>
+
+    <Text style={styles.header}>/ Shake for fun /</Text>
+    <ArtFetch />
+
+    </View>
+    </View>
+  )
+  }
+
+const styles = StyleSheet.create({
+  main: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+container: {
+  display: 'flex',
+  flexDirection: 'column',
+  paddingTop: 40,
+  marginTop: 25,
+  alignItems: 'center',
+  width: 340,
+  height: 420,
+  borderWidth: 3,
+  borderColor: 'black',
+  borderRadius: 10,
+
+  backgroundColor: 'yellow',
+
+},
+
+  header: {
+    fontFamily: 'Optima-Italic',
+    fontSize: 20,
+    textAlign: 'center',
+    paddingBottom: 65,
+    color: 'tomato',
+
+  },
+
+})
+
+export default Start

components/url/urls.js

@@ -0,0 +1,9 @@
+export const API_FETCH = 'https://www.rijksmuseum.nl/api/nl/collection/SK-C-5/tiles?key=aI1ZHUVZ'
+
+export const API_ARTFETCH = 'https://www.rijksmuseum.nl/api/nl/collection?key=aI1ZHUVZ&involvedMaker=Rembrandt+van+Rijn'
+
+export const MEME_API = 'https://api.imgflip.com/get_memes'
+
+export const TEST_API = 'https://api.quotable.io/random'
+
+export const JOKES_API = 'https://v2.jokeapi.dev/joke/Any?safe-mode'