How to keep marker at the bottom of the screen when zooming like google maps?

Question

I was wondering if it is possible to change the default behavior zoom, the default seems to change the viewport in all directions, but I want to keep the bottom where it is, and only resize the other three, pitch is also necessary.

I want the marker to keep it's position when zooming in/out like in first gif.

The way it works right now is when the gesture stops, the camera animates to new marker that gets generated, because the camera for would be glitchy if it were to animate.

const markerLatLng: LatLng = {latitude: 42.00352792344026, longitude: 21.396884999999997}

const generatedMarker: LatLng = computeDestinationPoint(
  markerLatLng,
  currentDistance,
  currentHeading,
);

mapViewRef.current?.animateCamera(
  {
    center: generatedMarker,
    heading: currentHeading,
    pitch: defaultPitch,
    zoom: currentZoom,
  }
)

Answer 1

Use prop scrollDuringRotateOrZoomEnabled and set it to false.

While using this prop zoom works (as long zoomEnabled prop is true as it is by default) using pinch and double tap while the center of map staying same or changing really small values.

I have used onRegionChangeComplete prop to get new coordinates after changing region and through that update state "region" with lat, lng, latDelta, lngDelta. But I need to check change is not under specified values. For my use case onRegionChangeComplete fires twice for some events so I don't update "region" multiple times unnessesarily.

So I will make following check before updating "region" state change,
(marker= previous region + address information)

const diff = (a: number, b: number) => (a > b ? a - b : b - a);

const onRegionChange = (newRegion: Region) => {
    if (marker && (
          diff(newRegion.latitude, marker.latitude) > 0.0001) ||
          diff(newRegion.longitude, marker.longitude) > 0.0001)
    ) {
      setRegion(newRegion);
    }
  };

  <MapView
      ref={mapRef}
      region={region}
      scrollDuringRotateOrZoomEnabled={false}
      provider={PROVIDER_GOOGLE}
      style={Styles.MapsStyles.mapView}
      onRegionChangeComplete={e => regionChange(e)}
    />

Edit
It seems now after testing that this prop works on iOS but not on Android.