t.js

  <MapView
            ref={c => this.mapView = c}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
            }}
            provider="google"
            region={this.state.region}
            // onPress={this.onPress}
            cacheEnabled={false}
            onRegionChange={region => {
              clearTimeout(this.timerForMap)
              this.timerForMap = setTimeout(() => {
                this.showMarkers(region)
              }, 100)
            }}
            showsUserLocation
            showsCompass
            loadingEnabled
          >

            {this.state.coordinates.map((coordinate, index) =>
              (<MapView.Marker
                pinColor="#4499FC"
                key={`coordinate_${index}`}
                coordinate={coordinate}

              />), // eslint-disable-line react/no-array-index-key
            )}
            {(this.state.coordinates.length === 2) && (
              <MapViewDirections
                origin={this.state.coordinates[0]}
                destination={this.state.coordinates[1]}
                apikey={GOOGLE_MAPS_APIKEY}
                strokeWidth={3}
                strokeColor="black"
                onStart={(params) => {
                  console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
                }}
                onReady={(result) => {
                  this.mapView.fitToCoordinates(this.state.coordinates, {
                    edgePadding: {
                      right: (width / 20),
                      bottom: (height / 20),
                      left: (width / 20),
                      top: (height / 20),
                    }
                  }
                  );
                }}
                onError={(errorMessage) => {
                  // console.log('GOT AN ERROR');
                }}
              />
            )}


          </MapView>