How to rotate a rotating image when user dragging/panning the image towards a specific direction

[ffan0811]

I have a rotating image like the image below.

For example, when user panning the image from bottom to up and from left to right, then i want the image to rotate towards that direction. the image is set to absolute so, it should stay where it is but just rotate.

currently, I have a rotating image when its rendered first but I can't rotate the image depending on the direction user panning... please help

const [rotateValue, setRotateValue] = useState(new Animated.Value(0));

useEffect(() => {
    startImageRotateFunction();
}, []);

const startImageRotateFunction = () => {
    rotateValue.setValue(0);

    Animated.loop(
      Animated.timing(rotateValue, {
        toValue: 1,
        duration: 20000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  };

const RotateData = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "360deg"],
});

const onHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      //maybe i can detect which direction user dragging here with event.nativEvent.translationXY?
      console.log(event.nativeEvent.translationX);
      console.log(event.nativeEvent.translationY);
  };

<PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
    <Animated.Image
        style={transform: [{ rotate: RotateData }]}
        source={cardsImg}
    />
</PanGestureHandler>

[AndriyParkho]

Hi, did you find a solution at your problem ? I am facing the same issue with a spin.