React Native: Center MapBox in a given area, not just in center coordinate

Question

Here I am trying to achieve centering a MapBox map in a given area:

• The area can be defined ideally by a (sub) set of annotations
• Alternatively it can just be an a rectangle for simplicity

From what I know from its documentation, MapBox only allows centering in a single centerCoordinate and setting zoomLevel. By setting zoomLevel there seems to be no guarantee that the rectangle will be contained inside the MapBox.

How to achieve a whole area being displayed at once and the map being centered around it?

<Mapbox
  accessToken={'ACCESS_TOKEN'}
  centerCoordinate={this.state.currentView.coordinates}
  zoomLevel={this.state.currentView.zoomLevel}
/> 

Answer 1

The Map#fitBounds method seems to do exactly what you're looking for. I'm not sure if / how to use it with the react wrapper, however.