usePathValue

Author: wcandillon

example/src/Examples/FrostedCard/FrostedCard.tsx

@@ -7,16 +7,12 @@ import {
   BackdropFilter,
   Fill,
   Blur,
-  notifyChange,
+  usePathValue,
 } from "@shopify/react-native-skia";
 import React from "react";
 import { Dimensions, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import {
-  useDerivedValue,
-  useSharedValue,
-  withSpring,
-} from "react-native-reanimated";
+import { useSharedValue, withSpring } from "react-native-reanimated";
 
 const { width, height } = Dimensions.get("window");
 const CARD_WIDTH = width * 0.9;
@@ -47,7 +43,6 @@ export const FrostedCard = () => {
   const image = useImage(require("./dynamo.jpg"));
   const rotateX = useSharedValue(0);
   const rotateY = useSharedValue(0);
-  const path = useSharedValue(Skia.Path.Make());
 
   const gesture = Gesture.Pan()
     .onChange((event) => {
@@ -59,10 +54,9 @@ export const FrostedCard = () => {
       rotateY.value = withSpring(0, springConfig(velocityX / sf));
     });
 
-  useDerivedValue(() => {
-    path.value.reset();
-    path.value.addRRect(rrct);
-    path.value.transform(
+  const clip = usePathValue((path) => {
+    path.addRRect(rrct);
+    path.transform(
       processTransform3d([
         { translate: [width / 2, height / 2] },
         { perspective: 300 },
@@ -71,7 +65,6 @@ export const FrostedCard = () => {
         { translate: [-width / 2, -height / 2] },
       ])
     );
-    notifyChange(path);
   });
 
   return (
@@ -86,7 +79,7 @@ export const FrostedCard = () => {
             height={height}
             fit="cover"
           />
-          <BackdropFilter filter={<Blur blur={30} mode="clamp" />} clip={path}>
+          <BackdropFilter filter={<Blur blur={30} mode="clamp" />} clip={clip}>
             <Fill color="rgba(255, 255, 255, 0.1)" />
           </BackdropFilter>
         </Canvas>

package/src/external/reanimated/interpolators.ts

@@ -13,6 +13,7 @@ import {
   useAnimatedReaction,
   useFrameCallback,
   useSharedValue,
+  useDerivedValue
 } from "./moduleWrapper";
 
 export const notifyChange = (value: SharedValue<unknown>) => {
@@ -23,6 +24,17 @@ export const notifyChange = (value: SharedValue<unknown>) => {
   }
 };
 
+export const usePathValue = (cb: (path: SkPath) => void) => {
+  const pathInit = useMemo(() => Skia.Path.Make(), []);
+  const path = useSharedValue(pathInit);
+  useDerivedValue(() => {
+    path.value.reset();
+    cb(path.value);
+    notifyChange(path);
+  });
+  return path;
+};
+
 export const useClock = () => {
   const clock = useSharedValue(0);
   const callback = useRef((info: FrameInfo) => {

package/src/external/reanimated/moduleWrapper.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { DependencyList } from "react";
 import type {
+  DerivedValue,
   FrameCallback,
   FrameInfo,
   SharedValue,
@@ -42,6 +43,9 @@ export const useSharedValue: <T>(
   oneWayReadsOnly?: boolean
 ) => SharedValue<T> = Reanimated2?.useSharedValue || throwOnMissingReanimated;
 
+
+export const useDerivedValue: <T>(processor: () => T,dependencies?: DependencyList) => DerivedValue<T> = Reanimated2?.useDerivedValue || throwOnMissingReanimated;
+
 export const useFrameCallback: (
   callback: (frameInfo: FrameInfo) => void,
   autostart?: boolean