project-react-native-app

App.js

@@ -1,26 +1,41 @@
-import React from 'react';
-import styled from 'styled-components/native';
+import React from "react";
+import styled from "styled-components/native";
+import ButtonApi from "./components/ButtonApi";
+import ShakeApi from "./components/ShakeApi";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { NavigationContainer } from "@react-navigation/native";
+import { Avatar } from "react-native-paper";
+
 
 const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
+  flex: 1;
+  background-color: papayawhip;
+  justify-content: center;
+  align-items: center;
 `;
 
 const Title = styled.Text`
-	font-size: 24px;
-	color: palevioletred;
+  font-size: 24px;
+  color: palevioletred;
 `;
 
+const Drawer = createDrawerNavigator();
+
 const App = () => {
-	return (
-		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
-		</Container>
-	);
+  return (
+    <>
+
+      <NavigationContainer>
+      <Avatar.Image size={60} source={require('./assets/Nabeel.jpg')} />
+        <Drawer.Navigator initialRouteName="Button">
+          <Drawer.Screen name="Today's quote" component={ButtonApi} />
+          <Drawer.Screen name="Shake to get" component={ShakeApi} />
+        </Drawer.Navigator>
+      </NavigationContainer>
+    </>
+  );
 };
 
 export default App;
+
+

README.md

@@ -9,5 +9,4 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a
 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.
+https://expo.dev/@nabeelm/project-react-native-app?serviceType=classic&distribution=expo-go

components/ButtonApi.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ImageBackground,
+} from "react-native";
+
+const ButtonApi = () => {
+  const [quote, setQuote] = useState({});
+
+  const generateQuote = () => {
+    fetch("https://api.quotable.io/random")
+      .then((response) => response.json())
+      .then((data) => setQuote(data));
+  };
+
+  useEffect(() => {
+    generateQuote();
+  }, []);
+
+  const image = {
+    uri: "https://images.unsplash.com/photo-1607908427546-abb631ce41e2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
+  };
+  return (
+    <View>
+      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+        <Text style={styles.quote}>"{quote.content}"</Text>
+        <Text style={styles.author}>{quote.author}</Text>
+        <TouchableOpacity style={styles.button} onPress={generateQuote}>
+          <Text style={styles.btnTitle}>Generate quote</Text>
+        </TouchableOpacity>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  quote: {
+    fontStyle: "italic",
+    marginTop: 17,
+    marginBottom: 10,
+    textAlign: "center",
+    fontSize: 18,
+    color: "white",
+    padding: 15,
+    fontWeight: '500',
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "tomato",
+    padding: 15,
+    borderRadius: 50,
+    marginBottom: 30,
+    marginTop: 20,
+    alignSelf: "center",
+  },
+  btnTitle: {
+    color: "#FFE4C4",
+  },
+  author: {
+    fontStyle: "italic",
+    marginTop: 17,
+    marginBottom: 10,
+    textAlign: "center",
+    fontSize: 18,
+    color: "white",
+    padding: 15,
+    fontWeight: '400',
+  },
+  image: {
+    marginTop: 30,
+    borderWidth: 5,
+    borderColor: "#fff",
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 10,
+  }
+});
+
+export default ButtonApi;

components/Header.js

@@ -0,0 +1,29 @@
+
+import * as React from "react";
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import { Appbar, Avatar } from "react-native-paper";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#f76d8b",
+  },
+  title: {
+    textAlign: "center",
+    backgroundColor: "#e88f3c",
+  },
+});
+
+const Header = () => {
+  return (
+    <View >
+      <Appbar.Header styles={styles.container}>
+        <Appbar.Content styles={styles.title}
+          title="Keep the faith"
+          color="#fff"
+        />
+        {/* <Avatar.Image size={60} source={require('../assets/Nabeel.jpg')} /> */}
+      </Appbar.Header>
+    </View>
+  );
+};
+export default Header;

components/SensorComponent.js

@@ -0,0 +1,97 @@
+
+import React, { useState, useEffect } from 'react';
+import { Accelerometer } from 'expo-sensors';
+import styled from 'styled-components/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`
+  display: flex;
+  flex-direction: column;
+`;
+
+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``;
+
+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
+  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 (
+    <ShakeView>
+      {/* 
+      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) && <ShakeAlert>Shaking</ShakeAlert>}
+      <ShakeDataView>
+        <ShakeDataTitle>Shake Data</ShakeDataTitle>
+        {/* toFixed(2) only shows two decimal places, otherwise it's quite a lot */}
+        <ShakeData>X: {data.x.toFixed(2)}</ShakeData>
+        <ShakeData>Y: {data.y.toFixed(2)}</ShakeData>
+        <ShakeData>Z: {data.z.toFixed(2)}</ShakeData>
+      </ShakeDataView>
+    </ShakeView>
+  );
+};

components/ShakeApi.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Accelerometer } from "expo-sensors";
+import Header from "./Header";
+
+
+const ShakeApi = () => {
+
+    const [quote, setQuote] = useState({})
+
+    const generateQuote = () => {
+      fetch("https://api.quotable.io/random")
+      .then(response => response.json())
+      .then(data => setQuote(data))
+    }
+
+
+    useEffect(() => {
+      generateQuote();
+    },[])
+
+const [data, setData] = useState({
+  x: 0,
+  y: 0,
+  z: 0,
+});
+const [subscription, setSubscription] = useState(null);
+
+// const _slow = () => {
+//   Accelerometer.setUpdateInterval(1000);
+// };
+
+// const _fast = () => {
+//   Accelerometer.setUpdateInterval(16);
+// };
+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 below
+  return () => unsubscribe();
+}, []);
+
+const isShaking = (data) => {
+  const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
+  return totalForce > 1.78;
+}
+
+useEffect(() => {
+  if(isShaking(data)){
+    generateQuote();
+  }
+}, [data])
+
+    return (
+      <View>
+      <Header />
+        <Text>{quote.content}</Text>
+        <Text>{quote.author}</Text>
+
+      </View>
+    )
+}
+
+const styles = StyleSheet.create({
+  view: {
+      flex: 1,
+      justifyContent: 'center',
+      padding: 24
+  }
+})
+
+export default ShakeApi;