'React Native Map : How to fit Polyline coordinates to screen?

I am working with react native map and i used polyline and Marker but when i display polyline to map it not fit to screen its just shows some part of line in screen other i have to scroll then i see, so how to fit polyline coordinatin inside current screen .This is current polyine image

But i want to make polyline look it like this. so how can i do it enter image description here

here is my code look likes.

 <MapView
                  

style={styles.mapStyle}
                 provider={PROVIDER_GOOGLE}
                 minZoomLevel={0}
                 paddingAdjustmentBehavior="automatic"
                 ref={(ref) => {
                   this.mapRef = ref;
                 }}
                 onLayout={() =>
                   this.mapRef.fitToCoordinates(this.state.cord, {
                     edgePadding: {top: 50, right: 10, bottom: 10, left: 10},
                     animated: false,
                   })
                 }
                 onMapReady={this.onMapReadyHandler.bind(this)}
                 
                 showsUserLocation={true}
                 fitToElements={true}
                 region={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}
                 initialRegion={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}>
                 <Circle
                   center={{
                     latitude: this.state.start[0],
                     longitude: this.state.start[1],
                   }}
                   radius={40}
                   strokeColor={'blue'}
                   strokeWidth={6}
                   fillColor={'#fff'}
                   zIndex={1}
                 />

                
                  {speed.map((d) =>
                    d.segments.map((c, i) => (
                      <Polyline
                        key={i}
                        coordinates={c.coordinates.map((c) => ({
                          latitude: c[0],
                          longitude: c[1],
                        }))}
                        strokeColor={c.color}
                        strokeWidth={6}></Polyline>
                    )),
                  )}
                </MapView>

Thanks in advance



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source