Develop

components/MapButtons.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useFormContext } from '../context/FormContext';
+import { Icon } from 'react-native-elements'
+
+type MapButtonProps = {
+    handleCompass?: React.Dispatch<React.SetStateAction<boolean>>,
+    handleLocation?: React.Dispatch<React.SetStateAction<boolean>>,
+    mapRef: React.MutableRefObject<any>
+}
+
+export default function MapButtons({ mapRef, handleCompass, handleLocation }: MapButtonProps) {
+
+    const [formState] = useFormContext();
+
+    const _handleCompass: (e:any) => void = e => {
+        handleCompass(bool => {
+            if (bool) {
+                mapRef.current.animateCamera({heading: 0})
+            }
+            return !bool
+        });
+    }
+
+    const _handleLocation: (e:any) => void = e => {
+        handleLocation(bool => !bool);
+    }
+
+    return (
+        <View style={styles.container}>
+            <Icon name='compass' type='font-awesome' size={25} color='orange' reverse onPress={_handleCompass}/>
+            {formState.difficulty !== 'easy' && <Icon name='location-arrow' type='font-awesome' size={25} color='orange' reverse onPress={_handleLocation}/>}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        bottom: 100,
+        left: 15,
+        flexDirection: 'column',
+        zIndex: 300
+    },
+    button: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})

package.json

@@ -19,6 +19,7 @@
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-elements": "^1.2.7",
     "react-native-gesture-handler": "~1.5.0",
     "react-native-maps": "0.26.1",
     "react-native-material-ui": "^1.30.1",

screens/MapScreen.tsx

@@ -15,6 +15,7 @@ import { useRegionContext } from '../context/RegionContext';
 import MarkerList from '../components/MarkerList';
 import StartModal from '../components/StartModal';
 import PointsTally from '../components/PointsTally';
+import MapButtons from '../components/MapButtons';
 
 type ProfileScreenNavigationProp = StackNavigationProp<
     RootStackParamList,
@@ -30,10 +31,17 @@ export default function MapScreen({ navigation }: HomeScreenProps) {
     const [region] = useRegionContext();
     const [location, setLocation] = React.useState<LocationData>(null);
     const removeRef = React.useRef(null);
+    const removeHeadingRef = React.useRef(null);
     const [timer, setTimer] = React.useState<number>(5);
     const timerRef = React.useRef<number>(null);
     const [formState] = useFormContext();
     const [markerState, markerDispatch] = useMarkerContext();
+    const [heading, setHeading] = React.useState<number>(null);
+    const [isHeading, setIsHeading] = React.useState<boolean>(false);
+    const [isLocation, setIsLocation] = React.useState<boolean>(false);
+
+    // refs
+    const mapRef = React.useRef(null);
 
     // get location of user on load
     // start following location / stop following based on a boolean
@@ -47,7 +55,13 @@ export default function MapScreen({ navigation }: HomeScreenProps) {
                 }
 
                 let obj = await Location.watchPositionAsync({ accuracy: Accuracy.High, timeInterval: 5000, distanceInterval: 5 }, setLocation);
+                let compass = await Location.watchHeadingAsync((res) => {
+                    if (res.trueHeading > 0) {
+                        setHeading(res.trueHeading);
+                    }
+                });
                 removeRef.current = obj.remove;
+                removeHeadingRef.current = compass.remove;
             } catch (error) {
                 console.error(error);
             }
@@ -80,18 +94,38 @@ export default function MapScreen({ navigation }: HomeScreenProps) {
         }
     }, [location, markerState])
 
+    React.useEffect(() => {
+        if (heading && isHeading) {
+            mapRef.current?.animateCamera({heading})
+        }
+    }, [heading, isHeading])
+
+    // for medium difficulty users
+    React.useEffect(() => {
+        if (isLocation && formState.difficulty === 'medium') {
+            setTimeout(() => {
+                setIsLocation(false);
+            },3000)
+        }
+    }, [isLocation, formState.difficulty])
+
     return (
         <View style={styles.container}>
             <PointsTally />
             <StartModal timer={timer} />
             <MapView
+                ref={mapRef}
                 style={styles.mapStyle}
                 mapType='hybrid'
                 initialRegion={region}
-                showsUserLocation={timer > 0 || formState.difficulty === 'easy'}
+                showsUserLocation={isLocation || (timer > 0 || formState.difficulty === 'easy')}
+                showsCompass
+                compassOffset={{x: -5, y: 25}}
+                showsScale
             >
                 <MarkerList markerList={markerState.markers} />
             </MapView>
+            <MapButtons mapRef={mapRef} handleCompass={setIsHeading} handleLocation={setIsLocation} />
         </View>
     );
 }

yarn.lock

@@ -2402,6 +2402,14 @@
     "@types/react" "*"
     "@types/react-native" "*"
 
+"@types/react-native-vector-icons@^6.4.4":
+  version "6.4.5"
+  resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz#74cbfc564bd8435e43ad6728572a0e5b49c335d1"
+  integrity sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
 "@types/react-native@*":
   version "0.61.23"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.23.tgz#bff4e0311c229a5203eb37aacd4febf59f3e2980"
@@ -3100,7 +3108,7 @@ color@3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.1.2:
+color@^3.1.0, color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -3379,7 +3387,7 @@ deep-equal@^1.0.0:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deepmerge@^3.2.0:
+deepmerge@^3.1.0, deepmerge@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
   integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
@@ -4169,6 +4177,13 @@ hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.5:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -5422,6 +5437,11 @@ open@^6.2.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opencollective-postinstall@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
+  integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
+
 options@>=0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/options/-/options-0.0.6.tgz#ec22d312806bb53e731773e7cdaefcf1c643128f"
@@ -5805,11 +5825,25 @@ react-dom@~16.9.0:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-react-is@^16.12.0, react-is@^16.13.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-native-elements@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-1.2.7.tgz#1eca2db715c41722aeb67aea62bd2a4621adb134"
+  integrity sha512-0S+0R1cbItl15i64qrkWnyMztwpw60d0SUsZGVDKRAMf0Jvq9Clgyh/MzxJx2sr42mbedQP1sg5Et4fZM7Fp1w==
+  dependencies:
+    "@types/react-native-vector-icons" "^6.4.4"
+    color "^3.1.0"
+    deepmerge "^3.1.0"
+    hoist-non-react-statics "^3.1.0"
+    opencollective-postinstall "^2.0.0"
+    prop-types "^15.7.2"
+    react-native-ratings "^6.3.0"
+    react-native-status-bar-height "^2.2.0"
+
 react-native-gesture-handler@~1.5.0:
   version "1.5.6"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.6.tgz#5d90145f624e3707db2930f43ab41579683e2375"
@@ -5847,6 +5881,14 @@ react-native-material-ui@^1.30.1:
     prop-types "^15.5.10"
     react-native-material-design-styles "^0.2.6"
 
+react-native-ratings@^6.3.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-6.5.0.tgz#a1606ccba3c5b54eec8e6cfa4765a45cf0e4ab8d"
+  integrity sha512-YMcfQ7UQCmXGEc/WPlukHSHs5yvckTwjq5fTRk1FG8gaO7fZCNygEUGPuw4Dbvvp3IlsCUn0bOQd63RYsb7NDQ==
+  dependencies:
+    lodash "^4.17.4"
+    prop-types "^15.5.10"
+
 react-native-reanimated@~1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz#7f1acbf9be08492d834f512700570978052be2f9"
@@ -5864,6 +5906,11 @@ react-native-screens@2.0.0-alpha.12:
   dependencies:
     debounce "^1.2.0"
 
+react-native-status-bar-height@^2.2.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.5.0.tgz#bc0fb85230603850aab9667ee8111a62954de90c"
+  integrity sha512-sYBCPYA/NapBSHkdm/IVL4ID3LLlIuLqINi2FBDyMkc2BU9pfSGOtkz9yfxoK39mYJuTrlTOQ7mManARUsYDSA==
+
 react-native-svg@9.13.3:
   version "9.13.3"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-9.13.3.tgz#6414b337d55af169ac2487ab70f3108404434446"