How to use animateToRegion function in react native maps?

Question

I am using MapView of react-native map clustering and Marker and callout of react-native-maps. I am unable to use animateToRegion. It shows me this.mapView.animateToRegion is not a function

 <MapView
 ref={map=>{mapView = map}}
 provider='google'
 clustering={true}
 onClusterPress={this.onPressCluster}
 region={this.state.region}
 onRegionChange={this.onRegionChange}
 onRegionChangeComplete={this.onRegionChangeComplete}
 style={styles.map}
 showsUserLocation={true}
 followUserLocation={true}
 zoomEnabled={true}
 ScrollEnabled={true}
 showsBuildings={true}
 showsMyLocationButton={false}/>

Solution 1

animate(){
    let r = {
        latitude: 42.5,
        longitude: 15.2,
        latitudeDelta: 7.5,
        longitudeDelta: 7.5,
    };
    this.mapView.root.animateToRegion(r, 2000);
}

render(){
    return(
        <MapView
            ref = {(ref)=>this.mapView=ref}
            region={{
                latitude: 35.688442,
                longitude: 51.403753,
                latitudeDelta: 0.5,
                longitudeDelta: 0.5,
            }}
            onPress={()=>this.animate()}
        >

           ...markers...

        </MapView>
    );
}

Solution 2

clickOnSearchedAddress = (placeId, index, dscrpt) => {
  getLatLongFromAddress(placeId).then((response) => {

    let r = {
      [Constants.KEY_LATITUDE]: response.geometry.location.lat,
      [Constants.KEY_LONGITUDE]: response.geometry.location.lng,
      latitudeDelta: latitudeDelta,
      longitudeDelta: longitudeDelta
    }
    this.mapView.animateToRegion(r, 1000)
    Keyboard.dismiss()
    isSetTextProgramatically = true;
    this.setState({
      search: dscrpt,
      searchData: [],

    })

  }).then((error) => { })
}


<MapView

  ref={ref => this.mapView = ref}
  provider={PROVIDER_GOOGLE}
  style={[styles.map, , { width: this.state.width }]}

  initialRegion={region}
  onRegionChangeComplete={this.onRegionChange}
  showsMyLocationButton={true}
  showsCompass={true}
  showsUserLocation={true}
  onMapReady={() => this.setState({ width: width - 1 })}}
/>

Comments

[PrimeTimeTran]

When I try this approach mapView.root returns null, would you mind telling me which version of React Native Maps you're using?

[Rob Gleeson]

Just use this.mapView.animateToRegion(r, 2000);

[yaswanthkoneri]

can you tell how to do this using functional component and useRef

[anshuman burmman]

@yaswanthkoneri . I am too, getting the same issue with useRef in react-native-map. when i am doing ref={ref => mapRef = ref} then i get null in mapRef and if i do ref={mapRef} in this case i am not able to get "animateToCoordinate" function. Please help me if you found any solution for this issue else i ll have to create a class component.