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

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]);