Fix #5 and add showsMyLocationButton

packages/react-native-web-maps/package.json

@@ -48,6 +48,7 @@
     "@testing-library/react": "12.1.5",
     "@types/geojson": "^7946.0.8",
     "@types/react": "~18.0.27",
+    "@types/react-dom": "^18.3.0",
     "@types/react-native": "~0.70.6",
     "@types/supercluster": "^7.1.0",
     "jest": "^29.2.1",

packages/react-native-web-maps/src/components/map-view.tsx

@@ -29,6 +29,8 @@ import {
 import { useUserLocation } from '../hooks/use-user-location';
 import { UserLocationMarker } from './user-location-marker';
 import * as Location from 'expo-location';
+import { createRoot } from 'react-dom/client';
+import { CurrentLocationButton } from './user-location-button';
 
 function _MapView(props: MapViewProps, ref: ForwardedRef<Partial<RNMapView>>) {
   // State
@@ -281,6 +283,33 @@ function _MapView(props: MapViewProps, ref: ForwardedRef<Partial<RNMapView>>) {
     }
   }, [props.followsUserLocation, userLocation]);
 
+  const panToUserLocation = () => {
+    if (map && userLocation) {
+      map?.panTo({
+        lat: userLocation.coords.latitude,
+        lng: userLocation.coords.longitude,
+      });
+      map?.setZoom(15);
+    }
+  };
+
+  useEffect(() => {
+    if (props.showsMyLocationButton) {
+      const buttonDiv = document.createElement('div');
+      const rootElem = createRoot(buttonDiv);
+      rootElem.render(
+        <CurrentLocationButton onPressCurrentLocation={panToUserLocation} />
+      );
+
+      map?.controls[google.maps.ControlPosition.RIGHT_BOTTOM]?.setAt(
+        0,
+        buttonDiv
+      );
+    } else {
+      map?.controls[google.maps.ControlPosition.RIGHT_BOTTOM]?.pop();
+    }
+  }, [props.showsMyLocationButton, userLocation]);
+
   const mapNode = useMemo(
     () => (
       <GoogleMap

packages/react-native-web-maps/src/components/user-location-button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+
+interface CurrentLocationButtonProps {
+  onPressCurrentLocation: Function;
+}
+
+export function CurrentLocationButton(props: CurrentLocationButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        props.onPressCurrentLocation();
+      }}
+    >
+      <View style={styles.locateBtn}>
+        <svg
+          style={{ fill: '#666' }}
+          height="50"
+          viewBox="0 0 50 50"
+          width="50"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="m0 0h48v48h-48z" fill="none" />
+          <path d="m44 22h-4.1a16.1 16.1 0 0 0 -13.9-13.9v-4.1a2 2 0 0 0 -4 0v4a16.1 16.1 0 0 0 -13.9 14h-4.1a2 2 0 0 0 0 4h4.1a16.1 16.1 0 0 0 13.9 13.9v4a2 2 0 0 0 4 0v-3.9a16.1 16.1 0 0 0 13.9-14h4.1a2 2 0 0 0 0-4zm-20 14a12 12 0 1 1 12-12 12 12 0 0 1 -12 12z" />
+          <circle cx="24" cy="24" r="7" />
+        </svg>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  locateBtn: {
+    display: 'flex',
+    width: 40,
+    height: 40,
+    margin: 10,
+    backgroundColor: '#fff',
+    padding: 6,
+    borderRadius: 3,
+    elevation: 1,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    zIndex: 189,
+    alignItems: 'center',
+  },
+});

packages/react-native-web-maps/src/hooks/use-user-location.tsx

@@ -42,12 +42,14 @@ export function useUserLocation(options: UseUserLocationOptions) {
 
   useEffect(() => {
     if (permission?.granted && options.followUserLocation) {
-      Location.getCurrentPositionAsync().then(handleLocationChange);
       // Watch position
       Location.watchPositionAsync(
         { accuracy: Location.Accuracy.Balanced },
         handleLocationChange
       ).then(setWatchPositionSubscription);
+    } else if (permission?.granted) {
+      // Set location
+      Location.getCurrentPositionAsync().then(handleLocationChange);
     }
 
     return () => watchPositionSubscription?.remove();