Changing animateCamera pitch and zoom properties dynamically doesn't work

Question

Changing animateCamera pitch and zoom properties dynamically with useState doesn't work

                onLayout={() => {
                    map.current.animateCamera({
                        center: { latitude: location?.coords?.latitude, longitude: location?.coords?.longitude },
                        zoom: zoomLevel,
                        heading: 50,
                        pitch: pitchLevel,
                        altitude: 5,
                    })
                }}

I find that onlayout doesn't quite work with transformations.

So here's all of the undocumented or buggy behavior I've encountered with onLayout and .measure so far:

onLayout doesn't get called in some conditions (seemingly when an element is moved by a parent resizing)
the measure returns undefined on android unless there's an onLayout or collapsible: false on the view
onLayout doesn't take transforms into account, it returns the "internal" size of the view not the size displayed on the screen
onLayout doesn't fire for animations of transforms (which is pretty much all animations since only transforms and opacity can use native driver) -- that's this issue
measure returns different values for width and height than onLayout. It returns scaled values if any parent is scaled as opposed to the raw values. Docs suggest the opposite.
onLayout Will return wrong/random values during component mount in some (maybe all?) cases if the view or any parent is being animated.

It's because layout process is not involved in transformations at all. Actually Animated can't change any properties that can change layout of the component tree.

I find this approach https://reactnative.dev/docs/direct-manipulation I will give a snippet if I find solution

Horatius

Answer 1

solution was:

ref={(current) => (map.current = current)}
          onUserLocationChange={() => {
            map.current.animateCamera({
              center: {
                latitude: locationUpdate?.coords?.latitude,
                longitude: locationUpdate?.coords?.longitude,
              },
              zoom: 16,
              heading: Math.round(headingRef.current),
              pitch: 90,
              altitude: Math.round(altitudeRef.current),
              useNativeDriver: true,
            });
          }}

although to even enhance react native performance you can set this in useCallback hook and call it from that like:

onUserLocationChange={animateCameraUseCallback}

Horatius

Answer 2

I think you should use hook (useEffect) for animating Map to then region. In my case i was getting new locations from GoogleAutoPlaces api . i am receiving latlng object in coordinate variable. here you can add coordinate variable as dependency and when your location will change it will automatically animate the map to the new location. useEffect(() => { mapref?.current?.animateToRegion(coordinate, 1000); }, [coordinate]);

Ide