Rotation with PanGesture example

[enesozturk]

I am trying to create an example with transforms. An item in center and I want to rotate it with PanGesture. Here is what I did;

const Switcher = () => {
  const rotate = useSharedValue("0deg");

  const getDegree = (event: any) => {
    "worklet";
    const x = clamp(event.x, 0, size);
    const y = clamp(event.y, 0, size);

    const theta = canvas2Polar({ x, y }, { x: size / 2, y: size / 2 }).theta;
    const degree = (theta * 180) / Math.PI;
    return degree;
  };

  const onGestureEvent = useAnimatedGestureHandler<
    PanGestureHandlerGestureEvent, {offset: { degree: number }}
  >({
    onStart: (event, ctx) => {},
    onActive: (event, ctx) => {
      const degree = getDegree(event);
      console.log(degree > 0 ? degree : 360 + degree);
      // rotate.value = `${degree > 0 ? degree : 360 + degree}deg`;
    },
  });

  const circleStyle = useAnimatedStyle(() => {
    return { transform: [{ rotate: rotate.value }] };
  });

  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <Animated.View style={[styles.shadow, circleStyle]} />
    </PanGestureHandler>
  );
};

I see degree in console as expected. But when I uncomment rotate.value, it is unexpectedly works like this;

Screen.Recording.2021-02-17.at.1.40.48.AM.mov

Do you have any example like that? I checked your Events Part 2 but can not figure it out. This is little different. Your advice about the calculation would be great 🙌🏽 Thanks in advance.