react-native-mapsのanimateToCoordinateがDeprecatedになっていたので、代わりを調査しました。

はじめに

react-nativeで、GoogleMapsやAppleMapを使う際によく使われるreact-native-maps というライブラリがあります。

その中で、カメラを動かすような処理を行う際に利用するメソッドの一つの animateToCoordinateが、Deprecatedになっていました。

置き換えるのに、それほど手間はありませんが 記事が少なかったのでこちらにまとめておこうと思います。

結論

公式ドキュメントに、変更方法書いてありました。 animateCameraに置き換えることができるようです。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods

期待する引数はそれぞれ、以下の通りです。 関数が期待する引数が違うため、単純に入れ替えるだけではダメでした。

animateToCoordinate(coordinate: LatLng, duration: Number)
animateCamera(camera: Camera, { duration: Number })

のため、Lat/LonをCameraというオブジェクトに変更する必要があります。 公式ドキュメントを読むと、以下にCameraオブジェクトに関しての定義がありました。

type Camera = {
    center: {
       latitude: number,
       longitude: number,
   },
}

centerという、キーにLat/Lonそれぞれを定義してあげれば良さそうです。

// Before

animateToCoordinate({
  latitude: lat,
  longitude: lon,
})

// After
animateCamera(
  {
    center:
      latitude: lat,
      longitude: lon,
  }
)