Project React Native App, Tiina

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#15313E",
+        "titleBar.activeBackground": "#1D4457",
+        "titleBar.activeForeground": "#F9FCFD"
+    }
+}

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 (
-		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
-		</Container>
-	);
-};
+		<>
+			<Shakecomponent />
+		</>
+	)
+}
 
-export default App;
+export default App

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

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 <AppLoading /> 
+    } else {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.name}>This app was made by Tiina Liukkonen</Text>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        textAlign: "center",
+        marginTop: "15%",
+
+    },
+    name: {
+        fontSize: 12,
+        fontFamily: "WorkSans_400Regular",
+    }
+})
+
+
+export default Footer

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 <AppLoading />
+    } else {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.questionTitle}>Nothing to do? Give the phone a shake for ideas!</Text>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        marginTop: "5%",
+    },
+    questionTitle: {
+        fontSize: 22,
+        color: "black",
+        textAlign: "center",
+        paddingHorizontal: 30,
+        fontFamily: "WorkSans_500Medium",
+        color: "#000000ac"
+    },
+})
+
+export default Header

components/Loader.js

@@ -0,0 +1,17 @@
+import React from "react"
+
+import LottieView from "lottie-react-native"
+
+const Loader = () => {
+    return (
+        <>
+            <LottieView
+            source={require("../assets/bouncy-balls-loader.json")}
+            autoPlay
+            loop
+            />
+        </>
+    )
+}
+
+export default Loader