Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions apps/docs/docs/animations/reanimated3.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 (
<Canvas>
<Group transform={transform}>...</Group>
</Canvas>
);
```