How to change latitude/longitude delta mapview expo react native

Question

WHen i open my react native expo app my mapview is on my location:

 initialRegion={{
                latitude: Number(userProfil.latitude),
                longitude: Number(userProfil.longitude),
                latitudeDelta: isBoat ? 10 : 0.0922,
                longitudeDelta: isBoat ? 10 : 0.0421,
              }}

When isBoat is true the latitude should be 10 but the map does'nt change the zoom

do you have any recommendation for this issue ?

Answer 1

As you want to change the map camera focus when the app switched to boat view.

you can simply animate the camera as below:

const MapScreen = () => {
  const mapRef = React.useRef();
  const [isBoat, setIsBoat] = useState(false);

  useEffect(() => {
    if (isBoat) {
      const camera = {
        center: {
          latitude: Number(userProfil.latitude),
          longitude: Number(userProfil.longitude),
        },

        // Only on iOS MapKit, in meters. The property is ignored by Google Maps.
        altitude: 20,
        // Only when using Google Maps.
        zoom: 10,
      };

      mapRef.current.animateCamera(camera, 300);
    }
  }, [isBoat]);

  return (
    <MapView
      initialRegion={{
        latitude: Number(userProfil.latitude),
        longitude: Number(userProfil.longitude),
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      ref={mapRef}
    ></MapView>
  );
};