I don’t have much to read on google maps direction services other than what is provided by google in their documentation with is not react-native complicit. The approach I told was to let Ai dig up someones code from me to get an understanding on how it would be implemented. I have had a lots issue like npm packages which are not known to the repository and typescript namespace issue. This is how code looks like Please help. The react-native-maps does not list any implementation on DirectionServices. I am using bare react-native workflow

import MapView, { Marker, PROVIDER_GOOGLE, Callout } from "react-native-maps";
import DirectionsRenderer from "react-native-maps";
import { Platform } from "react-native";
import { StyleSheet, View, Dimensions } from "react-native";
import Svg from "../assets/police-car-with-top-view.svg";
import { IMapProps } from "../interface/map";
import MapViewDirections from "react-native-maps-directions";
import { GOOGLE_MAPS_API_KEY } from "@env";
import React from "react";

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: Dimensions.get("window").height,
    width: Dimensions.get("window").width,
    justifyContent: "flex-end",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default ({ lng, lat, tracking, origin, destination }: IMapProps) => {
  const [directions, setDirections] = React.useState<string | null>(null);

  React.useEffect(() => {
    const fetchDirections = async () => {
      const googleMapsPromise = Platform.select({
        ios: import("@react-native-community/google-maps"),
        android: import("@react-native-community/google-maps-js"),
      });

      const googleMaps = await googleMapsPromise;
      const directionsService = new googleMaps.DirectionsService(googleMaps);

      const directionsRequest = {
        origin: origin,
        destination: destination,
        travelMode: googleMaps.TravelMode.DRIVING,
      };

      directionsService.route(
        directionsRequest,
        (
          result: googleMaps.DirectionsResult, // Add the namespace to the type
          status: googleMaps.DirectionsStatus
        ) => {
          if (status === googleMaps.DirectionsStatus.OK) {
            const { routes } = result;
            const route = routes[0]; // Assuming a single route
            const { overview_path, bounds, legs, waypoints } = route;
            const encodedPath =
              googleMaps.geometry.encoding.encodePath(overview_path);
            setDirections(encodedPath);
          }
        }
      );
    };

    fetchDirections();
  }, [origin, destination]);

  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        onUserLocationChange={tracking}
        showsCompass={true}
        style={styles.map}
        region={{
          latitude: lat,
          longitude: lng,
          latitudeDelta: 0.0035,
          longitudeDelta: 0.0016,
        }}
      >
        <Marker coordinate={{ latitude: lat, longitude: lng }}>
          <Svg width={60} height={41} />
        </Marker>
        {directions && (
          <DirectionsRenderer
            origin={origin}
            destination={destination}
            path={directions}
            polylineColor="#000"
            strokeWidth={3}
          />
        )}
      </MapView>
    </View>
  );
};