use initialRegion and regionToAnimate for maps

src/components/Explore/MapView.tsx

@@ -78,6 +78,7 @@ const MapView = ( {
   const { t } = useTranslation( );
   const { state: exploreState, dispatch, defaultExploreLocation } = useExplore( );
   const [showRedoSearchButton, setShowRedoSearchButton] = useState( false );
+  const [regionToAnimate, setRegionToAnimate] = useState<Region | undefined>( undefined );
   const isFirstRender = useRef( true );
 
   const mapRef = useRef<RNMapView | null>( null );
@@ -116,13 +117,12 @@ const MapView = ( {
 
     // since we're using initialRegion, we need to animate to the correct zoom level
     // when a user switches back to NEARBY or WORLDWIDE
-    if ( mapRef.current
-        && exploreState.placeMode === PLACE_MODE.NEARBY ) {
+    if ( exploreState.placeMode === PLACE_MODE.NEARBY ) {
       // Note: we do get observationBounds back from the API for nearby
       // but per user feedback, we want to show users a more zoomed in view
       // when they're looking at NEARBY view
       if ( nearbyRegion.latitude !== undefined && nearbyRegion.longitude !== undefined ) {
-        mapRef.current.animateToRegion( {
+        setRegionToAnimate( {
           ...nearbyRegion,
           latitude: nearbyRegion.latitude,
           longitude: nearbyRegion.longitude,
@@ -132,13 +132,13 @@ const MapView = ( {
     }
     if ( mapRef.current
       && exploreState.placeMode === PLACE_MODE.WORLDWIDE ) {
-      mapRef.current.animateToRegion( worldwideRegion );
+      setRegionToAnimate( worldwideRegion );
     }
     if ( mapRef.current
       && exploreState.placeMode === PLACE_MODE.PLACE ) {
       if ( observationBounds ) {
         const newRegion = getMapRegion( observationBounds );
-        mapRef.current.animateToRegion( newRegion );
+        setRegionToAnimate( newRegion );
       }
     }
   }, [
@@ -229,6 +229,7 @@ const MapView = ( {
         currentLocationButtonClassName="left-5 bottom-20"
         onPanDrag={handlePanDrag}
         initialRegion={initialRegion}
+        regionToAnimate={regionToAnimate}
         showCurrentLocationButton
         showSwitchMapTypeButton
         showsCompass={false}

src/components/SharedComponents/Map/DetailsMap.tsx

@@ -27,7 +27,7 @@ interface Props {
   headerTitle?: React.ReactNode;
   // TODO MOB-1038: reconcile the type issues here requiring the intersection
   observation?: Observation & RealmObservation;
-  region?: Region;
+  initialRegion?: Region;
   tileMapParams: Record<string, string> | null;
 }
 
@@ -68,7 +68,7 @@ const DetailsMap = ( {
   coordinateString,
   headerTitle,
   observation,
-  region,
+  initialRegion,
   tileMapParams,
 }: Props ) => {
   const insets = useSafeAreaInsets();
@@ -114,7 +114,7 @@ const DetailsMap = ( {
         <Map
           mapHeight="100%"
           observation={observation}
-          region={region}
+          initialRegion={initialRegion}
           showCurrentLocationButton
           showSwitchMapTypeButton
           tileMapParams={tileMapParams}

src/components/SharedComponents/Map/Map.tsx

@@ -68,7 +68,6 @@ interface Props {
   onRegionChangeComplete?: ( _r: Region, _b: BoundingBox | undefined ) => void;
   openMapScreen?: () => void;
   ref?: React.Ref<MapView>;
-  region?: Region;
   regionToAnimate?: Region;
   scrollEnabled?: boolean;
   showCurrentLocationButton?: boolean;
@@ -103,7 +102,6 @@ const Map = ( {
   onRegionChangeComplete,
   openMapScreen,
   ref,
-  region,
   regionToAnimate,
   scrollEnabled = true,
   showCurrentLocationButton,
@@ -194,6 +192,8 @@ const Map = ( {
     animateToRegion( {
       latitude: regionToAnimate.latitude,
       longitude: regionToAnimate.longitude,
+      latitudeDelta: regionToAnimate.latitudeDelta,
+      longitudeDelta: regionToAnimate.longitudeDelta,
     } );
   }, [
     regionToAnimate,
@@ -235,9 +235,6 @@ const Map = ( {
     if ( Platform.OS !== "android" && initialRegion ) {
       return null;
     }
-    if ( region?.latitude ) {
-      return region;
-    }
     return Platform.OS === "android"
       ? androidLocalRegion
       : defaultInitialRegion;
@@ -377,7 +374,7 @@ const Map = ( {
   useEffect(
     ( ) => {
       if ( Platform.OS === "android" && androidAnimateRegion ) {
-        const curRegion = androidLocalRegion || region;
+        const curRegion = androidLocalRegion;
         const newRegion = {
           ...curRegion, // provides defaults for latitudeDelta and longitudeDelta
           ...androidAnimateRegion,
@@ -391,7 +388,6 @@ const Map = ( {
     [
       androidAnimateRegion,
       androidLocalRegion,
-      region,
       handleRegionChangeComplete,
     ],
   );

src/components/TaxonDetails/TaxonMapPreview.tsx

@@ -69,7 +69,7 @@ const TaxonMapPreview = ( {
           mapViewClassName="-mx-3"
           observation={observation}
           openMapScreen={() => setShowMapModal( true )}
-          region={region}
+          initialRegion={region}
           scrollEnabled={false}
           tileMapParams={obsParams}
           withObsTiles
@@ -93,7 +93,7 @@ const TaxonMapPreview = ( {
           style={{ margin: 0 }}
           modal={(
             <DetailsMap
-              region={region}
+              initialRegion={region}
               observation={observation}
               closeModal={( ) => setShowMapModal( false )}
               tileMapParams={obsParams}