How to make the view always visible with the 2 points?

[djalmaaraujo]

Example. I am rendering 2 points.. but I want the zoom to always show the 2 points. So I need to adjust. I am not sure what calc is that or if it's too complicate.

This is the map:

What would be the calc to always show the 2 points? :}

[bramus]

Yes, you can use the onReady callback for this, in combination with the fitToCoordinates method of the <MapView /> component:

      <MapView
        initialRegion={…}
        ref={c => this.mapView = c}
      >
          <MapViewDirections
            origin={…}
            destination={…}
            apikey={GOOGLE_MAPS_APIKEY}
            onReady={(result) => {
              this.mapView.fitToCoordinates(result.coordinates, {
                edgePadding: {
                  right: (width / 20),
                  bottom: (height / 20),
                  left: (width / 20),
                  top: (height / 20),
                }
              });
            }}
          />
      </MapView>

Note that a reference to the <MapView /> component was made (this.mapView) in order to make things work.

[djalmaaraujo]

Thanks @bramus, you are super fast.

[thorizer]

@bramus how to use this in a functional component? ( this.mapView instance )