React-Native-Maps: How to use animateCamera and setCamera

user_7449126 0
Viewed 13083

I am new in react native and I want to animate map on particular position i'll use animateToCoordinates that deprecated and not working sometimes.

new Method for that is animateCamera but i don't get how to use that na d how to create camera object to pass in that.

thanks

react-native
4 Answers

You can use animateToRegion(region,duration) by simply passing the region as

let region={latitude:<Target_latitude>,longitude:<Targeted_longitude>,latitudeDelta: LATITUDE_DELTA,longitudeDelta:LONGITUDE_DELTA}

keeping Deltas fixed you can have your animation in map.

For animateToCamera you can use

    this.mapRef.animateCamera({center: temp_cordinate,pitch: 2, heading: 20,altitude: 200, zoom: 40},duration)

where type of temp_cordinate is {latitude:latitude,longitude:longitude}

user_88610640

set ref to your mapView like this;

            <MapView
                ref={(map) => { this.map = map; }}
                initialRegion={this.state.region}
            />

then,

this.map.animateToRegion(region,1000)

call this whenever you need to update your region value

user_59899330 
<MapView
   ref={ref => { this.map = ref }}
   region={{
            latitude: this.state.mapLat,
            longitude: this.state.mapLong,
            latitudeDelta: 0.001663,
            longitudeDelta: 0.002001,
    }}
    onLayout={() => {
        this.map.animateCamera({
           center: {
           latitude: this.state.mapLat,
           longitude: this.state.mapLong,
        },
           heading: 0,
           pitch: 90,
         });
      }}
    />
user_130743450 
    const map = useRef(null)

    <MapView
        ref={(current) => map.current = current}
        onLayout={() => {
            map.current.animateCamera({
                pitch: 90
            })
        }}
    />
user_147175510
Related