How should I modify my code so that it continuously rotates the arrow so that it always points at the given coordinates? (Making a compass)

Question

This is what I have for now but I have no idea how to make it so that rotateImage gets called every time angle is modified. That will allow me to animate the arrow and make it point at the given direction anyone got any idea? Should I put rotateImage in useState so that every time it updates, the function is called?

I'm at a loss here!!

import {
  Alert,
  Animated,
  Easing,
  Linking,
  StyleSheet,
  Text,
  View,
} from "react-native";
import React, { useEffect, useState } from "react";

import * as Location from "expo-location";
import * as geolib from "geolib";

import { COLORS } from "../../assets/Colors/Colors";

export default function DateFinder() {
  const [hasForegroundPermissions, setHasForegroundPermissions] =
    useState(null);
  const [userLocation, setUserLocation] = useState(null);

  useEffect(() => {
    const AccessLocation = async () => {
      function appSettings() {
        console.warn("Open settigs pressed");
        if (Platform.OS === "ios") {
          Linking.openURL("app-settings:");
        } else RNAndroidOpenSettings.appDetailsSettings();
      }

      const appSettingsALert = () => {
        Alert.alert(
          "Allow Wassupp to Use your Location",
          "Open your app settings to allow Wassupp to access your current position. Without it, you won't be able to use the love compass",
          [
            {
              text: "Cancel",
              onPress: () => console.warn("Cancel pressed"),
            },
            { text: "Open settings", onPress: appSettings },
          ]
        );
      };

      const foregroundPermissions =
        await Location.requestForegroundPermissionsAsync();
      if (
        foregroundPermissions.canAskAgain == false ||
        foregroundPermissions.status == "denied"
      ) {
        appSettingsALert();
      }
      setHasForegroundPermissions(foregroundPermissions.status === "granted");
      if (foregroundPermissions.status == "granted") {
        const location = await Location.watchPositionAsync(
          {
            accuracy: Location.Accuracy.BestForNavigation,
            activityType: Location.ActivityType.Fitness,
            distanceInterval: 0.5,
          },
          (location) => {
            setUserLocation(location);
          }
        );
      }
    };

    AccessLocation().catch(console.error);
  }, []);

  const textPosition = JSON.stringify(userLocation);

  const getBearing = () => {
    const bearing = geolib.getGreatCircleBearing(
      {
        latitude: userLocation.coords.latitude,
        longitude: userLocation.coords.longitude,
      },
      {
        latitude: 45.472019680834606,
        longitude: -73.8624948923216,
      }
    );
    return bearing;
  };

  const rotation = new Animated.Value(0);

  let angle;
  if (userLocation != null) {
    angle = getBearing();
  }

  const rotateImage = (angle) => {
    rotation;
    Animated.timing(rotation, {
      toValue: angle,
      duration: 1000,
      easing: Easing.bounce,
      useNativeDriver: true,
    }).start();
  };

  if (userLocation != null) {
    rotateImage(angle);
  }

  console.warn(rotation);

  return (
    <View style={styles.background}>
      <Text>{textPosition}</Text>
      <Animated.Image
        source={require("../../assets/Compass/Arrow_up.png")}
        style={[styles.image, { transform: [{ rotate: `${rotation}deg` }] }]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  background: {
    backgroundColor: COLORS.background_Pale,
    flex: 1,
    // justifyContent: "flex-start",
    //alignItems: "center",
  },
  image: {
    flex: 1,
    // height: null,
    // width: null,
    //alignItems: "center",
  },
  scrollView: {
    backgroundColor: COLORS.background_Pale,
  },
});

Answer 1

useEffect(() => {
    if (userLocation != null) {
      Animated.timing(rotation, {
        toValue: angle,
        duration: 1000,
        easing: Easing.bounce,
        useNativeDriver: true,
      }).start();
    }
  }, [angel]);

That it.