React native maps, animateCamera has offset on ios-CodePudding

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)

CodePudding user response：

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

CodePudding user response：

  <MapView
      provider={PROVIDER_GOOGLE}
      key={this.state.forceRefresh}
      style={styles.gmapView}
      showsUserLocation
      ref={(ref) => (this.mapView = ref)}
      followUserLocation
      showsMyLocationButton
      snappedminZoomLevel={Platform.OS == "ios" ? this.state.zoom : 12}
      /* minZoomLevel={11}
      maxZoomLevel={17} */
      showsMyLocationButton={false}
     
      initialRegion={{
        latitude: latlong.lat || currentLocation.latitude,
        longitude: latlong.lng || currentLocation.longitude,
        latitudeDelta: this.state.latitudeDelta,
        longitudeDelta: this.state.longitudeDelta,
      }}
      
      onRegionChange={(data) =>
        this.setState(
          {
            newLatitude: data.latitude,
            newLongitude: data.longitude,
            zoom:Math.round(Math.log(360 / data.longitudeDelta) / Math.LN10),
            latitudeDelta: data.latitudeDelta, 
            longitudeDelta: data.longitudeDelta,
          },
          () => {
            console.log("data ==> " JSON.stringify(data))
          }
        )
      }
      onPress={(e) =>{
          this.animate(e)
        } 
      }
    >
     
    </MapView>


animate(e){
let lat = e?.nativeEvent?.coordinate?.latitude   0.004000;
let long = e?.nativeEvent?.coordinate?.longitude - 0.004000;

let r = {
    latitude: lat,
    longitude: long,
    latitudeDelta: 0.38,//this.state.latitudeDelta,
    longitudeDelta: 0.28,//this.state.longitudeDelta,
};
this.mapView.animateToRegion(r, 300);}

can you try this? may be it's helping you