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,
  }
)