Cant able to update the polyline in the map using react hooks - react-native

Question

Please help me here I am trying to update polyline based on the user tracking but the polyline is not getting updated and i am using the functional components i had tried different ways but its not working. Please help me Below is code i had wrote
Map component
<MapView
provider={PROVIDER_GOOGLE}
style={{flex: 1, borderRadius: 20}}
showsUserLocation={true}
userLocationPriority={'high'}
userLocationFastestInterval={2000}
initialRegion={{
latitude: originLat,
longitude: originLng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}>
<Marker.Animated
coordinate={
new AnimatedRegion({
latitude: originLat,
longitude: originLng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
})
}
pinColor={'#FF8C00'}>
<Image
source={Images.marker}
style={{height: 100, width: 100, marginTop: 36}}
/>
</Marker.Animated>
<Polyline
coordinates={userLocation}
strokeColor={colors.blue}
strokeWidth={3}
/>
</MapView>
Watch poistion
const watchPosition = () => {
Geolocation.watchPosition(
position => {
const userUpdatedLocation = new Location();
userUpdatedLocation.latitude = position.coords.latitude;
userUpdatedLocation.longitude = position.coords.longitude;
setUserLocationLL(userUpdatedLocation);
},
error => {
Alert.alert(error.message.toString());
},
{
enableHighAccuracy: true,
timeout: 100,
maximumAge: 0,
distanceFilter: 0,
useSignificantChanges: true
},
);
}
Below are variables i am assigning
const [userLocation, setUserLocation] = useState<Location[]>([]);
const [userLocationLL, setUserLocationLL] = useState<Location>(initialLocation);
Polyline :
<Polyline
coordinates={userLocation}
strokeColor={colors.blue}
strokeWidth={3}
/>
Updating the set state
useEffect(() => {
setUserLocation(locations => [...locations, userLocationLL]);
}, [userLocationLL]);

Answer 1

Looks like you are missing updating the userLocation state holding the historical location data in an array to plot out.
<Polyline
coordinates={userLocation} // <-- array of locations
strokeColor={colors.blue}
strokeWidth={3}
/>
You can either update the userLocation array in the watchPosition handler
const watchPosition = () => {
Geolocation.watchPosition(
position => {
const userUpdatedLocation = new Location();
userUpdatedLocation.latitude = position.coords.latitude;
userUpdatedLocation.longitude = position.coords.longitude;
setUserLocationLL(userUpdatedLocation);
// Append new position to `userLocation` array
setUserLocation(locations => [...locations, userUpdatedLocation]);
},
....
);
}
or you can use an useEffect hook to update the userLocation state when the userLocationLL state updates.
useEffect(() => {
setUserLocation(locations => [...locations, userLocationLL]);
}, [userLocationLL]);