From a3f652b57f09fd8881aef4e8bf4cbf24cd5e9ceb Mon Sep 17 00:00:00 2001 From: Ali Saeed Date: Sat, 8 Nov 2025 10:21:16 -0500 Subject: [PATCH] chore: add docs on how to animate transform properties --- apps/docs/docs/animations/reanimated3.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/apps/docs/docs/animations/reanimated3.md b/apps/docs/docs/animations/reanimated3.md index d26f142bfb..9127ac4a01 100644 --- a/apps/docs/docs/animations/reanimated3.md +++ b/apps/docs/docs/animations/reanimated3.md @@ -9,6 +9,8 @@ React Native Skia offers integration with [Reanimated v3 and above](https://docs React Native Skia supports the direct usage of Reanimated's shared and derived values as properties. There is no need for functions like `createAnimatedComponent` or `useAnimatedProps`; simply pass the Reanimated values directly as properties. +**Note:** For animating `transform` properties, pass the entire transform object instead of individual properties. See section below for details. + ```tsx twoslash import {useEffect} from "react"; import {Canvas, Circle, Group} from "@shopify/react-native-skia"; @@ -113,3 +115,22 @@ export const AnimatedGradient = () => { ); }; ``` + +## Animating Transforms + +For animating `transform` properties, create a derived value that returns the array of transforms with each property as a separate object. Passing reanimated values directly will not work. + +```tsx +const transform = useDerivedValue(() => { + return [ + { rotate: rotation.value }, + { scale: scale.value } + ]; +}); + +return ( + + ... + +); +```