Make map bound calculations simpler

package.json

@@ -31,7 +31,6 @@
     },
     "homepage": "https://github.com/Expensify/react-native-x-maps#readme",
     "peerDependencies": {
-        "@math.gl/web-mercator": "^3.6.3",
         "@rnmapbox/maps": "^10.0.11",
         "mapbox-gl": "^2.15.0",
         "react": "^18.2.0",

src/MapView/MapView.web.tsx

@@ -1,62 +1,45 @@
 import Map, {MapRef, Marker} from 'react-map-gl';
-import {RefObject, forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import WebMercatorViewport from '@math.gl/web-mercator';
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
 import {View} from 'react-native';
 import {MapViewHandle, MapViewProps} from './MapViewTypes';
 import Utils from './utils';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import Direction from './Direction';
 import {DEFAULT_INITIAL_STATE} from './CONST';
 
-const getMapDimension = (mapRef: RefObject<MapRef>): {width: number; height: number} | undefined => {
-    if (!mapRef.current?.getMap()) {
-        return undefined;
-    }
-
-    const {clientWidth, clientHeight} = mapRef.current.getCanvas();
-    return {width: clientWidth, height: clientHeight};
-};
-
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, initialState = DEFAULT_INITIAL_STATE}, ref) {
-    const mapRef = useRef<MapRef>(null);
-    const [bounds, setBounds] = useState<{
-        longitude: number;
-        latitude: number;
-        zoom: number;
-    }>();
+    const [mapRef, setMapRef] = useState<MapRef | null>(null);
+
+    const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
 
     useEffect(() => {
         if (!waypoints || waypoints.length === 0) {
             return;
         }
 
+        if (!mapRef) {
+            return;
+        }
+
         if (waypoints.length === 1) {
-            mapRef.current?.flyTo({
+            mapRef.flyTo({
                 center: waypoints[0].coordinate,
                 zoom: 15,
             });
             return;
         }
 
-        const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
-        const {width, height} = getMapDimension(mapRef) || {
-            width: 0,
-            height: 0,
-        };
-        const viewport = new WebMercatorViewport({height, width});
-
-        const {latitude, longitude, zoom} = viewport.fitBounds([southWest, northEast], {
-            padding: mapPadding,
-        });
+        const map = mapRef.getMap();
 
-        setBounds({latitude, longitude, zoom});
-    }, [waypoints]);
+        const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
+        map.fitBounds([northEast, southWest], {padding: mapPadding});
+    }, [waypoints, mapRef]);
 
     useImperativeHandle(
         ref,
         () => ({
             flyTo: (location: [number, number], animationDuration?: number) =>
-                mapRef.current?.flyTo({
+                mapRef?.flyTo({
                     center: location,
                     duration: animationDuration,
                 }),
@@ -67,15 +50,14 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({access
     return (
         <View style={style}>
             <Map
-                ref={mapRef}
+                ref={setRef}
                 mapboxAccessToken={accessToken}
                 initialViewState={{
                     longitude: initialState?.location[0],
                     latitude: initialState?.location[1],
                     zoom: initialState?.zoom,
                 }}
                 mapStyle="mapbox://styles/mapbox/streets-v9"
-                {...bounds}
             >
                 {waypoints &&
                     waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (

src/MapView/MapViewTypes.ts

@@ -37,13 +37,13 @@ type InitialState = {
 };
 
 // Waypoint to be displayed on the map
-type WayPoint = {
+export type WayPoint = {
     coordinate: [number, number];
     markerComponent: ComponentType;
 };
 
 // Style used for the line that displays direction
-type DirectionStyle = {
+export type DirectionStyle = {
     width?: number;
     color?: string;
 };