project-react-native-app JaEngd

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -1,4 +1 @@
-{
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
+{}

App.js

@@ -1,25 +1,20 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
 
-const Container = styled.View`
-	flex: 1;
-	background-color: papayawhip;
-	justify-content: center;
-	align-items: center;
-`;
+import Dice from './components/Dice';
+import EntryPage from './components/EntryPage';
 
-const Title = styled.Text`
-	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>
+		<Drawer.Navigator initialRouteName="Home">
+			<Drawer.Screen name="Start" component={EntryPage} />
+			<Drawer.Screen name="Dice" component={Dice} />
+		</Drawer.Navigator>	
+	</NavigationContainer>
 	);
 };
 

app.json

@@ -1,30 +1,34 @@
 {
-	"expo": {
-		"name": "project-react-native-app",
-		"slug": "project-react-native-app",
-		"version": "1.0.0",
-		"orientation": "portrait",
-		"icon": "./assets/icon.png",
-		"splash": {
-			"image": "./assets/splash.png",
-			"resizeMode": "contain",
-			"backgroundColor": "#ffffff"
-		},
-		"updates": {
-			"fallbackToCacheTimeout": 0
-		},
-		"assetBundlePatterns": ["**/*"],
-		"ios": {
-			"supportsTablet": true
-		},
-		"android": {
-			"adaptiveIcon": {
-				"foregroundImage": "./assets/adaptive-icon.png",
-				"backgroundColor": "#FFFFFF"
-			}
-		},
-		"web": {
-			"favicon": "./assets/favicon.png"
-		}
-	}
+  "expo": {
+    "name": "project-react-native-app",
+    "slug": "project-react-native-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "description": "",
+    "githubUrl": "https://github.com/JaEngd/project-react-native-app"
+  }
 }

components/Dice.js

@@ -0,0 +1,72 @@
+import React, {useEffect, useState} from 'react'
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native'
+
+import Dice1 from '../assets/dice1.png';
+import Dice2 from '../assets/dice2.png';
+import Dice3 from '../assets/dice3.png';
+import Dice4 from '../assets/dice4.png';
+import Dice5 from '../assets/dice5.png';
+import Dice6 from '../assets/dice6.png';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFE489',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image:{
+    width:300,
+    height:300
+  },
+  texts:{
+    fontSize:26,
+    color:'#35BDD0',
+    marginTop: 50 ,
+    paddingHorizontal: 10,
+    borderColor: '#30475E',
+    borderRadius: 10,
+    borderWidth: 3,
+    fontWeight: 'bold'
+  }
+});
+
+
+const DiceApi = ({navigation}) => {
+
+  const [roll,setRoll] = useState(Dice1);
+
+  const generateDice = ()=>{
+    const randomDice = Math.floor(Math.random() * 6) + 1
+
+    switch(randomDice){
+      case 1: setRoll(Dice1);
+        break;
+      case 2: setRoll(Dice2);
+        break;
+      case 3: setRoll(Dice3);
+        break;
+      case 4: setRoll(Dice4);
+        break;
+      case 5: setRoll(Dice5);
+        break;
+      case 6: setRoll(Dice6);
+       break;
+      default: setRoll(Dice1);
+    }
+  }
+
+  return(
+    <View style={styles.container}>
+      <Image 
+        style={styles.image} 
+        source={roll}
+      />
+      <TouchableOpacity onPress={generateDice}> 
+        <Text style={styles.texts}>Let's roll</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default DiceApi;

components/EntryPage.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { StyleSheet, View, Text, Image, ImageBackground } from 'react-native';
+
+import { SensorComponent } from './SensorComponent'
+
+const styles = StyleSheet.create({
+  container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#FFE489'
+  },
+  title: {
+      fontSize: 24,
+      fontWeight: 'bold',
+      color: '#3d3d3d',
+      margin: 5,
+      textAlign: 'center'
+  }
+})
+
+const EntryPage = ({navigation}) => {
+  return (
+    <View style={styles.container}>
+                <Text style={styles.title}>Welcome to the Dice game</Text>
+                <Text style={styles.title}>Shake your phone and let's roll!</Text>
+                <SensorComponent navigation={navigation}/>  
+    </View>
+  )
+}
+
+export default EntryPage

components/SensorComponent.js

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { Accelerometer } from 'expo-sensors';
+
+// ==========================
+// = 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
+
+export const SensorComponent = ({navigation}) => {
+  // 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();
+  }, [data]);
+
+    useEffect(()  => {
+        if(isShaking(data)){
+          navigation.navigate('Dice')
+        }
+      }, [data])
+
+      useEffect(()  => {
+        if(isShaking(data)){
+
+        }
+      }, [data])
+
+  return (
+    <>
+    {isShaking(data)}
+  </>
+  );
+};