I'm new to react so please be nice,

I'm trying to animate my compass, so that every time the userLocation is updated, the arrow (in my code the png of the animated image) is rotated at the given angle (here rotation) so that it points at another location. For some reason, it seems like the rotation passed to the Animated.Image remains 0, because the image never rotates. Can someone land me a hand real quick.

Here's my code:

import {
  Alert,
  Animated,
  Easing,
  Linking,
  StyleSheet,
  Text,
  View,
} from "react-native";
import React, { useEffect, useRef, 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);
  const [userHeading, setUserHeading] = useState(null);
  const [angle, setAngle] = useState(0);
  const rotation = useRef(new Animated.Value(0)).current;

  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,
          },
          (location) => {
            setUserLocation(location);
          }
        );
        const heading = await Location.watchHeadingAsync((heading) => {
          setUserHeading(heading.trueHeading);
        });
      }
    };

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

  useEffect(() => {
    if (userLocation != null) {
      setAngle(getBearing() - userHeading);
      rotateImage(angle);  // Here's the call to the rotateImage function that should cause the value of rotation to be animated
    }
  }, [userLocation]);

  const textPosition = JSON.stringify(userLocation);

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

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

  return (
    <View style={styles.background}>
      <Text>{textPosition}</Text>
      <Animated.Image
        source={require("../../assets/Compass/Arrow_up.png")}
        style={[styles.image, { transform: [{ rotate: `${rotation}deg` }] }]} // this is where it should get rotated but it doesn't for some reason
      />
    </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,
  },
});

CodePudding user response：

Your error is here

 useEffect(() => {
  if (userLocation != null) {
    setAngle(getBearing() - userHeading);
   rotateImage(angle);  // Here's the call to the rotateImage function that should cause the value of rotation to be animated
  }
}, [userLocation]);

The angle will be updated on the next render, so the rotation you do will always be a render behind. You could either store the result of getBearing and setAngle to that value as well as provide that value to rotateImage:

useEffect(() => {
if (userLocation != null) {
  const a = getBearing() -userHeading;
  setAngle(a);
  rotateImage(a);  // Here's the call to the rotateImage function that should cause the value of rotation to be animated
  }
}, [userLocation]);

or you could use useEffect and listen for angle changes:

useEffect(() => {
  rotateImage(angle)
}, [angle]);