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({})