From 9878925836cd00ad1ba25125d78e2427f1d3bc78 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 4 Apr 2023 10:02:49 +0200 Subject: [PATCH 1/2] Refine useSharedValueEffect deprecation --- docs/docs/animations/animations.md | 7 +++ docs/docs/animations/gestures.md | 8 ++++ docs/docs/animations/reanimated.md | 48 ++++++++++++++++++- docs/docs/animations/values.md | 1 + .../reanimated/useSharedValueEffect.ts | 11 +++-- 5 files changed, 70 insertions(+), 5 deletions(-) diff --git a/docs/docs/animations/animations.md b/docs/docs/animations/animations.md index 4b99e47937..9793ae3bd2 100644 --- a/docs/docs/animations/animations.md +++ b/docs/docs/animations/animations.md @@ -5,6 +5,13 @@ sidebar_label: Animations slug: /animations/animations --- +:::info + +Currently, built-in Skia animations are dependant on the JS thread. +For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated). + +::: + To ease building animation, the library provides some utilities to help you. There are two types of utility functions - imperative functions and hooks. If you have a Skia Value that you want to animate declaratively, a hook is the best choice. diff --git a/docs/docs/animations/gestures.md b/docs/docs/animations/gestures.md index edfe18396c..936f07c526 100644 --- a/docs/docs/animations/gestures.md +++ b/docs/docs/animations/gestures.md @@ -5,6 +5,14 @@ sidebar_label: Touch Events slug: /animations/touch-events --- + +:::info + +Currently, built-in Skia animations are dependant on the JS thread. +For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated). + +::: + ### useTouchHandler The `useTouchHandler` hook handles touches in the `Canvas`. diff --git a/docs/docs/animations/reanimated.md b/docs/docs/animations/reanimated.md index 92e203ff14..2ca15a6541 100644 --- a/docs/docs/animations/reanimated.md +++ b/docs/docs/animations/reanimated.md @@ -8,7 +8,7 @@ slug: /animations/reanimated React Native Skia renders drawings on the UI-thread and it provides an integration with Reanimated that allows for animations to be executed on the UI-thread as well. -First, you need will need to install [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation). +You need will need to install [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation). If you are using Reanimated 2, you can integrate with Skia on the JS-thread, see [Reanimated 2 support](#reanimated-2). ## Hello World @@ -89,4 +89,50 @@ export const AnimationWithTouchHandler = () => { ); }; +``` + +## Reanimated 2 + +If you are using Reanimated 2, we offer a hook named `useSharedValueEffect` where you can update Skia values when Reanimated values are updated. + +:::info + +useSharedValueEffect() runs on the JS thread. For UI-thread animated, see [Reanimated 3 support](#reanimated). + +::: + + +### 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 twoslash +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 ( + + + + ); +}; ``` \ No newline at end of file diff --git a/docs/docs/animations/values.md b/docs/docs/animations/values.md index b91d029b40..0232bd6e17 100644 --- a/docs/docs/animations/values.md +++ b/docs/docs/animations/values.md @@ -8,6 +8,7 @@ slug: /animations/values :::info Currently, built-in Skia animations are dependant on the JS thread. +For UI-thread animations with Reanimated 3, see [Reanimated support](/docs/animations/reanimated). ::: diff --git a/package/src/external/reanimated/useSharedValueEffect.ts b/package/src/external/reanimated/useSharedValueEffect.ts index e423c955d9..c304f7efe0 100644 --- a/package/src/external/reanimated/useSharedValueEffect.ts +++ b/package/src/external/reanimated/useSharedValueEffect.ts @@ -8,6 +8,7 @@ import { runOnJS, startMapper, stopMapper, + HAS_REANIMATED3, } from "./moduleWrapper"; /** @@ -21,10 +22,12 @@ export const useSharedValueEffect = ( value: SharedValueType, ...values: SharedValueType[] ) => { - console.warn( - `useSharedValueEffect() is now deprecated, you can use Reanimated values directly. -Learn more at https://shopify.github.io/react-native-skia/.` - ); + if (HAS_REANIMATED3) { + console.warn( + `useSharedValueEffect() is deprecated with Reanimated 3, you can use Reanimated values directly. +Learn more at https://shopify.github.io/react-native-skia/docs/animations/reanimated.` + ); + } const input = useSharedValue(0); useEffect(() => { From 6ae506fb72fe322110da7cf9a080e98442afd09a Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 13 Apr 2023 15:10:19 +0200 Subject: [PATCH 2/2] Implement review comments --- docs/docs/animations/reanimated.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docs/animations/reanimated.md b/docs/docs/animations/reanimated.md index 2ca15a6541..5cefeefeec 100644 --- a/docs/docs/animations/reanimated.md +++ b/docs/docs/animations/reanimated.md @@ -5,10 +5,10 @@ sidebar_label: Reanimated slug: /animations/reanimated --- -React Native Skia renders drawings on the UI-thread and it provides an integration with Reanimated that allows for animations -to be executed on the UI-thread as well. +React Native Skia provides an integration with Reanimated that allows for animations +to be executed on the UI-thread. -You need will need to install [Reanimated v3](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation). If you are using Reanimated 2, you can integrate with Skia on the JS-thread, see [Reanimated 2 support](#reanimated-2). +This integration is available with [Reanimated v3 or higher](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation). If you are using Reanimated 2, [see Reanimated 2 support](#reanimated-2). ## Hello World @@ -97,7 +97,7 @@ If you are using Reanimated 2, we offer a hook named `useSharedValueEffect` wher :::info -useSharedValueEffect() runs on the JS thread. For UI-thread animated, see [Reanimated 3 support](#reanimated). +useSharedValueEffect() runs on the JS thread. We suggest using Reanimated 3 if possible, [see Reanimated 3 support](/docs/animations/reanimated). :::