Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in MapViewDirections

[uchitchakma]

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import MapView, {Marker} from 'react-native-maps'
import tw from 'twrnc';
import { useSelector } from 'react-redux';
import { selectDestination, selectOrigin } from '../../navSlice/navSlice';
import MapViewDirections from 'react-native-maps-directions';
import {GOOGLE_MAPS_APIKEY} from "@env";

const Map = () => {
const origin = useSelector(selectOrigin);
const destination = useSelector(selectDestination);
return (
<MapView
style={twflex-1}
mapType= {'hybrid'}
initialRegion={{

  latitude: origin.location.lat,
  longitude: origin.location.lng,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005,
}}

{!!origin && !!destination && (
<MapViewDirections
origin={origin.description}
destination={destination.description}
apikey={GOOGLE_MAPS_APIKEY}
lineDashPattern={[0]}
onError={error => console.log("Directions error: ", error)}
strokeWidth={3}
strokeColor="black"
/>

)}

{origin?.location && (
<Marker
coordinate = {{
latitude: origin.location.lat,
longitude: origin.location.lng,

  }}
  title= "Origin"
  description={origin.description}
  identifier="origin"
/>

)}
{destination?.loaction && (
<Marker
coordinate={{
latitude: destination?.loaction.lat,
longitude: destination?.loaction.lng,
}}
title="Destination"
description={destination.description}
identifier="destination"
>

                </Marker>
            )}

) }

export default Map

// const styles = StyleSheet.create({})