animation in react native reanimated animation only works once

Question

I have a Pressable component and inside it I have an icon. I want to press it and rotate it 180 degrees. But the animation only works once. When I click again nothing happens.

const animation = useSharedValue(0);

  const rotation = useDerivedValue(() => {
    return interpolate(animation.value, [0, 180], [0, 65]);
  });

  const animationStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotate: rotation.value + "deg",
        },
      ],
    };
  });

  const startAnimation = () => {
    setShowDetail(!showDetail);
    animation.value = withTiming(500, {
      duration: 300,
    });
  };

In the component

              <Animated.View style={[animationStyle]}>
                <Icons/>
              </Animated.View>

score 0 · Answer 1 · answered Jan 06 '22 at 10:01

That's because it rotates from 0 to 180 again and again. cuz rotation value is fixed. You should update the rotate value with useState.

const [rotationValue, setRotationValue] = useState(0);

const handleClickRotate = () => {
    setRotationValue(p => p + 180); // you can use other deg value
}

And use the rotationValue to animate your component. :D

animation in react native reanimated animation only works once

1 Answers1