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
Rectcomponent usinguseAnimatedProps. However, when usinguseAnimatedStylewith aView, the transform works perfectly.
Question:
- Is there a known limitation with
useAnimatedPropsfor SVG elements likeRecton iOS and Web? - How can I make the
transformproperty work across all platforms, including iOS and Web? - 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 andreact-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