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 ( + + ... + +); +```