How to make <Polyline /> follow roads in react-native-maps with HERE API

Question

I was able to make the request to HERE API and get the response, I put all the waypoints from leg to an array(latitude and longitude) and it does draw a polyline but it does not follow the road. It just goes trough buildings etc.

This is my Polyline component:

<Polyline coordinates={this.state.route} strokeWidth={7} strokeColor="#2ecc71" geodesic={true} />

this.state.route is an array of coordinates which I got like this:

axios.get(`https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled`).then((response) => {
      console.log(response.data.response.route);
      response.data.response.route[0].leg[0].maneuver.map((m) => {
        routeCoordinates.push({latitude: m.position.latitude, longitude: m.position.longitude});
      })
      console.log(routeCoordinates);
      this.props.navigation.navigate('ShowMap', {
        spot: chosenSpot,
        route: routeCoordinates,
      });  
    }).catch((error) => {
        console.log(error);
    })

And then I pass this array to my screen and put it in my state as route.

I expect it to draw a polyline over roads and not over buildings and stuff.

Here is an image to show you how it looks like(NOTE that blue lines are just to cover road names it has nothing to do with drawing a polyline):

Answer 1

Please add an additional parameter to the calculateroute rest api: legAttributes=shape

Then the rest api will return shape object containing the points along the roads.

https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled&legAttributes=shape

Please see legAttributes in the documentation. https://developer.here.com/documentation/routing/topics/resource-calculate-route.html