Directions between Two-point location in mapbox-gl - React Native?

I have two point i get it from database and i want to render a line From start point to end point

what I got is the Straight line in two points without consideration the routes and directions on the maps

So how can i handle it to take a look for routes and Directions on the map?

here’s what i got

here’s what i expect

here is my code

    import MapboxGL from '@react-native-mapbox-gl/maps';
    import React, {Component} from 'react';
    import {PermissionsAndroid, StyleSheet, View} from 'react-native';
    import Icon from 'react-native-vector-icons/Ionicons';
    
    export default class Mapbox extends Component {
      constructor(props) {
        super(props);
        this.startPoint = [34.4999, 31.5542];
        this.finishedPoint = [34.4979, 31.5512];
        this.state = {
          center: [],
          // initialCoords: undefined,
          initialCoords: [-77.034084, 38.9],
          acceptedPermations: false,
    
          // Two point state
          route: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'LineString',
                  coordinates: [
                    this.startPoint, //point A "current" ~ From
                    this.finishedPoint, //Point B ~ to
                  ],
                },
                style: {
                  fill: 'red',
                  strokeWidth: '10',
                  fillOpacity: 0.6,
                },
                paint: {
                  'fill-color': '#088',
                  'fill-opacity': 0.8,
                },
              },
            ],
          },
        };
        this.onRegionDidChange = this.onRegionDidChange.bind(this);
      }
    
      async componentDidMount() {
        const isGranted = await MapboxGL.requestAndroidLocationPermissions();
        this.setState({isGranted: isGranted});
        MapboxGL.setAccessToken(
          '....',
        );
      }
    
      async onRegionDidChange() {
        const center = await this._map.getCenter();
        this.setState({center}, () =>
          console.log('onRegionDidChange', this.state.center),
        );
      }
    
      renderCurrentPoint = () => {
        return (
          <>
            <MapboxGL.UserLocation
              renderMode="normal"
              visible={false}
              onUpdate={location => {
                const currentCoords = [
                  location.coords.longitude,
                  location.coords.latitude,
                ];
                // console.log(location); // current location is here
                this.setState({
                  initialCoords: currentCoords,
                });
              }}
            />
    
            {/* current Provider location */}
            <MapboxGL.PointAnnotation
              selected={true}
              key="key1"
              id="id1"
              coordinate={this.startPoint}>
              <Icon name="ios-pin" size={45} color="#00f" />
              <MapboxGL.Callout title="My" />
            </MapboxGL.PointAnnotation>
            {/* user From DB location */}
            <MapboxGL.PointAnnotation
              selected={true}
              key="key2"
              id="id2"
              coordinate={this.finishedPoint}>
              <Icon name="ios-pin" size={45} color="#0f0" />
              <MapboxGL.Callout title="User" />
            </MapboxGL.PointAnnotation>
            <MapboxGL.ShapeSource id="line1" shape={this.state.route}>
              <MapboxGL.LineLayer
                id="linelayer1"
                style={{
                  lineColor: 'red',
                  lineWidth: 10,
                  lineCap: 'round',
                }}
              />
            </MapboxGL.ShapeSource>
            <MapboxGL.Camera
              zoomLevel={16}
              centerCoordinate={this.state.initialCoords}
              // centerCoordinate={[-5.803457464752711, 35.769940811797404]}
            />
          </>
        );
      };
      render() {
        if (!this.state.isGranted) {
          return null;
        }
    
        return (
          <View style={styles.page}>
            <MapboxGL.MapView
              styleURL={MapboxGL.StyleURL.Street}
              ref={c => (this._map = c)}
              onRegionDidChange={this.onRegionDidChange}
              zoomEnabled={true}
              style={styles.map}>
              {this.renderCurrentPoint()}
            </MapboxGL.MapView>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      page: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        // backgroundColor: '#F5FCFF',
      },
      container: {
        height: 500,
        width: 500,
        backgroundColor: 'tomato',
      },
      map: {
        flex: 1,
      },
    });

[anastely]

check this : https://github.com/xander18/MapBoxShowDirection Tell me if everything is ok for you If you have some question don’t hesitate Le sam. 4 janv. 2020 à 21:54, Anas T [e-mail] a écrit : … Ok, take your time , thanks in advance On Sat, Jan 4, 2020, 10:19 PM xander18 @.***> wrote: > ok i’ll take the time tomorow to write u an exemple with explication > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #565?email_source=notifications&email_token=AF327M3STJFISJQ77FPNR4LQ4DVO3A5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7P4Y#issuecomment-570816499 >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AF327M3W5GQGOU2BZ7YKZZTQ4DVO3ANCNFSM4JY5YC6A > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#565?email_source=notifications&email_token=ABP3PZGO6YFSXJZ6JYHVLP3Q4DZPDA5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIDAEUQ#issuecomment-570819154>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABP3PZBFKJZSZJRRK4SYLBDQ4DZPDANCNFSM4JY5YC6A . – Al Akkad Youssef LD: 07 81 94 74 07 Site Web : http://youssef-alakkad.com/ Twitter : https://twitter.com/LittleYouss Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139

Great!! Thank you I just run it and it’s work like a charm, i will check the code you write when I have more time

[kristfal]

This is a map rendering library and not a direction library.

Any API/service/library that provides navigation assistance and outputs geojson should be easy to implement.