create different lengths and a home button

components/HomeButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+import { useMarkerContext } from '../context/MarkerContext';
+
+type HomeButtonProps = {
+    handlePress: () => void
+}
+
+export default function HomeButton({ handlePress }: HomeButtonProps) {
+
+    const [,markerDispatch] = useMarkerContext();
+
+    const _handlePress: () => void = () => {
+        markerDispatch({type: 'RESET_STATE'});
+        handlePress();
+    }
+
+    return (
+        <View style={styles.container}>
+            <Icon name='home' type='font-awesome' size={25} color='orange' reverse onPress={_handlePress}/>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        bottom: 100,
+        right: 15,
+        zIndex: 300
+    }
+})

components/MapButtons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useFormContext } from '../context/FormContext';
-import { Icon } from 'react-native-elements'
+import { Icon } from 'react-native-elements';
 
 type MapButtonProps = {
     handleCompass?: React.Dispatch<React.SetStateAction<boolean>>,
@@ -41,12 +41,5 @@ const styles = StyleSheet.create({
         left: 15,
         flexDirection: 'column',
         zIndex: 300
-    },
-    button: {
-        width: 100,
-        height: 100,
-        borderRadius: 50,
-        justifyContent: 'center',
-        alignItems: 'center'
     }
 })

screens/BboxCreateScreen.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleSheet, View, Dimensions } from 'react-native';
 import { RootStackParamList } from '../App';
 import { StackNavigationProp } from '@react-navigation/stack';
-import { LocationData, Accuracy } from 'expo-location';
 // utilties
 import { useFormContext } from '../context/FormContext';
 import { useMarkerContext } from '../context/MarkerContext';
@@ -12,8 +11,8 @@ import { usePolygonCreator, PolyBoundary } from '../components/PolyBoundary';
 import PolyButton from '../components/PolyButton';
 import MapView, { Region, LatLng } from 'react-native-maps';
 import Instructions from '../components/Instructions';
-import { StackActions } from '@react-navigation/native';
 import { useRegionContext } from '../context/RegionContext';
+import HomeButton from '../components/HomeButton';
 
 type ProfileScreenNavigationProp = StackNavigationProp<
     RootStackParamList,
@@ -40,19 +39,32 @@ export default function BboxCreateScreen({ navigation }: BboxCreateProps) {
     const [isFollowingUser, setFollowing] = React.useState<boolean>(true);
     const [finalRegion, setRegion] = useRegionContext();
 
+    const returnLen: () => number = () => {
+        switch (formState.distance) {
+            case 'short':
+                return 6;
+            case 'medium':
+                return 10;
+            case 'long':
+                return 14;
+            default:
+                return 6
+        }
+    }
+
     React.useEffect(() => {
         if (boundary.length) {
             // init markers
             if (formState.activity === 'on-road') {
-                initSnappedMarkerList(boundary, 10)
+                initSnappedMarkerList(boundary, returnLen())
                     .then(list => {
                         markerDispatch({type: 'SET_LIST', payload: list})
                     })
                     .catch(e => {
                         console.log(e);
                     })
             } else {
-                let list = initMarkerList(boundary, 10);
+                let list = initMarkerList(boundary, returnLen());
                 console.log('list is', list)
                 markerDispatch({type: 'SET_LIST', payload: list})
             }
@@ -83,6 +95,7 @@ export default function BboxCreateScreen({ navigation }: BboxCreateProps) {
             </MapView>
             <Instructions coordsLen={coords.length}/>
             <PolyButton coordsLen={coords.length} coords={coords} setBoundary={setBoundary}/>
+            <HomeButton handlePress={() => navigation.navigate('Home')} />
         </View>
     );
 }

screens/MapScreen.tsx

@@ -16,6 +16,7 @@ import MarkerList from '../components/MarkerList';
 import StartModal from '../components/StartModal';
 import PointsTally from '../components/PointsTally';
 import MapButtons from '../components/MapButtons';
+import HomeButton from '../components/HomeButton';
 
 type ProfileScreenNavigationProp = StackNavigationProp<
     RootStackParamList,
@@ -126,6 +127,7 @@ export default function MapScreen({ navigation }: HomeScreenProps) {
                 <MarkerList markerList={markerState.markers} />
             </MapView>
             <MapButtons mapRef={mapRef} handleCompass={setIsHeading} handleLocation={setIsLocation} />
+            <HomeButton handlePress={() => navigation.navigate('Home')} />
         </View>
     );
 }