Skip to main content

Reanimated

You can connect Reanimated values to a Skia canvas. A common use-case is a gesture from react-native-gesture-handler driving a Skia canvas using Reanimated.

When using the useSharedValueEffect hook, the canvas will redraw whenever the shared value changes.

Definition

tsx
useSharedValueEffect(callback: () => void, values: Reanimated.SharedValue<any>[]);
tsx
useSharedValueEffect(callback: () => void, values: Reanimated.SharedValue<any>[]);

Example

In the example below we are running a Reanimated animation on the shared value named progress - and then we have callback invoked on any shared value change thanks to the useSharedValueEffect hook:

tsx
import {useEffect} from "react";
import {Canvas, Rect, mix, useSharedValueEffect, useValue} from "@shopify/react-native-skia";
import {useSharedValue, withRepeat, withTiming} from "react-native-reanimated";
 
const MyComponent = () => {
const x = useValue(0);
const progress = useSharedValue(0);
 
useEffect(() => {
progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
}, [progress]);
 
useSharedValueEffect(() => {
x.current = mix(progress.value, 0, 100);
}, progress); // you can pass other shared values as extra parameters
 
return (
<Canvas style={{ flex: 1 }}>
<Rect
x={x}
y={100}
width={10}
height={10}
color="red"
/>
</Canvas>
);
};
tsx
import {useEffect} from "react";
import {Canvas, Rect, mix, useSharedValueEffect, useValue} from "@shopify/react-native-skia";
import {useSharedValue, withRepeat, withTiming} from "react-native-reanimated";
 
const MyComponent = () => {
const x = useValue(0);
const progress = useSharedValue(0);
 
useEffect(() => {
progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
}, [progress]);
 
useSharedValueEffect(() => {
x.current = mix(progress.value, 0, 100);
}, progress); // you can pass other shared values as extra parameters
 
return (
<Canvas style={{ flex: 1 }}>
<Rect
x={x}
y={100}
width={10}
height={10}
color="red"
/>
</Canvas>
);
};