How to render directions coordinates in react-native-maps using mapquest coordinates data?

Question

I am trying to render directions polyline on map using coordinates from MapQuest REST API but I get the polyline not showing on top of road exatctly. Rather its showing a different output. I want to draw the polyline on top of the road exactly. I am sending the following request to get the directions (using MapQuest Directions Route API):

http://www.mapquestapi.com/directions/v2/optimizedroute?key=[API_KEY]&json={%22locations%22:[%2234.0120337,-6.7383617%22,%2234.0253894,-6.7592364%22]}

Then depending on the above request session id, I am sending another request to get the coordinates (using MapQuest Directions Route Shape API):

http://www.mapquestapi.com/directions/v2/routeshape?key=[API_KEY]&sessionId=[ABOVE_REQUEST_SESSION_ID]&mapWidth=320&mapHeight=240&mapScale=1733371&mapLat=34.0120337&mapLon=-6.7383617

I am using the array route.shape.shapePoints, How I am I supposed to get polyline correctly plotted above roads on map?

Code I am using:

<MapView
    style={{ flex: 1 }}
    showsUserLocation
    initialRegion={{
        latitude,
        longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
    }}
>
    <MapView.Polyline strokeWidth={2} strokeColor="red" coordinates={this.state.coords}></MapView.Polyline>
</MapView>

Below is a screenshot of current map I am getting:

Answer 1

Try setting the generalize option to something low like 0 or 10.