React-native-mapbox-gl: `fitBounds` much slower than `flyTo`

[lucasbento]

This is a screen with fitBounds being called on the callback of onDidFinishLoadingMap: https://streamable.com/vyz45 and this is the same screen working the same way but with flyTo: https://streamable.com/uajyu.

Is there a way to make fitBounds faster?

I believe that on version 5.x.x I used setVisibleCoordinateBounds and didn't have this kind of problem.

[hernanmateo]

I can confirm that the setVisibleCoordinateBounds (v5) method was much faster than the fitBounds method (v6)

[hernanmateo]

I don't have the v6 installed yet because still missing some functionalities. But, only to test, you can try to set the mode param from Flight to None (MapboxGL.CameraModes.None) in the fitBounds() method.

Because this isn't parametrized in the fitBounds method you must call this by the setCamera() method or you must change this directly on the mapbox bundle (file react-native-mapbox-gl/javascript/components/MapView.js), only to test...

If you do it post the results! Thanks

[nitaliano]

Have you tried messing with the duration?

[hernanmateo]

Yes, I tried this and the rendering is still slow.

[nitaliano]

It's a different SDK call under the hood I can expose the old one and call it fitCoordinates and that can take in an array of coordinates instead of a bounding box.

[nitaliano]

It's has an ease-in-out function applied to the camera animation making it use a linear function and not using the flight camera makes it fast.

[lucasbento]

only to test, you can try to set the mode param from Flight to None (MapboxGL.CameraModes.None) in the fitBounds() method.

This fix indeed works, thank you!

Just for reference what I did is:

this.map.setCamera({
  duration: 0.1,
  mode: MapboxGL.CameraModes.None,
  bounds: {
    paddingTop: 30,
    paddingRight: 30,
    paddingBottom: 15,
    paddingLeft: 30,
    ne: [northEastCoordinates.longitude, northEastCoordinates.latitude],
    sw: [southWestCoordinates.longitude, southWestCoordinates.latitude],
  },
})

duration === 0.1 because if it's not specified or === 0 it will default to 2000.

@nitaliano, @hernanmateo: I believe that it should be faster in core, for now I will use this _workaround_.

[hernanmateo]

Nice! Thanks @lucasbento

[nitaliano]

PR is out that updates this https://github.com/mapbox/react-native-mapbox-gl/pull/828

[nitaliano]

Closing this out since it's in master now