Search code examples
iosreactjsreact-nativegoogle-mapsreact-native-maps

React native maps, animateCamera has offset on ios


I'm using "react-native-maps": "0.29.4", and google provider on the Map component.

for some reason, using animateCamera on ios only and only in some cases (mainly after refreshing the app as in switching rtl to ltr for example either after initial getting user location GPS permission) has an offset that what supposed to be on the center going to the top left corner

https://youtu.be/3cLeZSIAaVk

the video shows the bag while using handlePressMyLocation function

const handleAnmiateToRegion = useCallback((center: IMapLocation, zoom: number = undefined) => {
        mapRef.current
            ? mapRef.current.animateCamera({ center, zoom })
            : setTimeout(() => {
                  handleAnmiateToRegion(center, zoom)
              }, 100)
}, [])

const handlePressMyLocation = useCallback(() => {
        handleAnmiateToRegion(location)
}, [location.latitude, location.longitude])

again, this is never happening on android, and also on ios sometimes it's working normally, but in case a session has this bug, it gonna happen all the time and in all of animateCamera usage (there're more cases for this handleAnmiateToRegion as init focusing + zooming or in case of pressing some of the markers)

any thoughts? also tried to change animateCamera to animateToRegion, as well as calling the functions with 12 digits after . instead of 5 (as given by Geolocation.watchPosition) but the same bug occurs)

thanks in advance!

(in case more code will help, pls write in a comment and I'll add)


Solution

  • For some reason, rendering the map only after I got the user location (using memo for making sure it indeed happen and for avoiding unnessecary rerendering) and setting initialRegion prop on Map fixed the issue