0

I am trying to animate a Rect component using react-native-reanimated and react-native-svg. The transform works on Android using useAnimatedProps, but on iOS and Web, the rectangle does not rotate. It seems like the transform works only when applied using useAnimatedStyle on View components, not on SVG elements like Rect.

Here is the part of the code I am working with:

const angle = useSharedValue(75);

useEffect(() => {
  angle.value = withRepeat(
    withTiming(360, { duration: 3000, easing: Easing.linear }),
    -1,
    true
  );
}, []);

const rotateAnimatedProps = useAnimatedProps(() => ({
  transform: [
    { translateX: 50 },
    { translateY: 50 },
    { rotate: `${angle.value}deg` },
    { translateX: -50 },
    { translateY: -50 },
    { translateX: 0 },
    { translateY: 0 },
  ],
}));

return (
  <Svg height="100%" width="100%" viewBox="0 0 100 100">
    <AnimatedRect
      x="15"
      y="15"
      width="70"
      height="70"
      stroke="red"
      strokeWidth="2"
      fill="yellow"
      animatedProps={rotateAnimatedProps}
    />
  </Svg>
);

Issue:

  • Android: The rotation works fine.
  • iOS and Web: The rectangle does not rotate. The transform does not seem to work for the Rect component using useAnimatedProps. However, when using useAnimatedStyle with a View, the transform works perfectly.

Question:

  1. Is there a known limitation with useAnimatedProps for SVG elements like Rect on iOS and Web?
  2. How can I make the transform property work across all platforms, including iOS and Web?
  3. If this is not feasible, does anyone know a workaround to rotate a part of an SVG (e.g., Rect) on its own axis using React Native Reanimated and react-native-svg?

Additional Information:

I have seen in the React Native Reanimated documentation that there exists an SVGAdapter to adapt the animated props for SVG elements. However, this does not seem to work on iOS either.

My Setup:

  • React Native: 0.76.7
  • react-native-reanimated: 3.16.1
  • react-native-svg: 15.8.0
  • expo: 52.0.30
  • react-native-web: 0.19.13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.