react-native-skia-gesture 0.2.0 → 0.3.2

package/src/hooks/use-gesture-handler.ts

@@ -1,19 +1,23 @@
-import {
-  type ExtendedTouchInfo,
-  type TouchInfo,
-  useValue,
-} from '@shopify/react-native-skia';
 import { useCallback } from 'react';
-import type { TranslationInfo } from '../hoc';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type {
+  GestureStateChangeEvent,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
 
 type UseGestureHandlerParams<ContextType> = {
-  onStart?: (touchInfo: TouchInfo, context: ContextType) => void;
+  onStart?: (
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
+    context: ContextType
+  ) => void;
   onActive?: (
-    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    touchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>,
     context: ContextType
   ) => void;
   onEnd?: (
-    extendedTouchInfo: ExtendedTouchInfo & TranslationInfo,
+    touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>,
     context: ContextType
   ) => void;
 };
@@ -23,28 +27,33 @@ const useGestureHandler = <ContextType>(
 ) => {
   const { onStart, onActive, onEnd } = gestureHandlers;
 
-  const context = useValue<ContextType>({} as any);
+  const context = useSharedValue<ContextType>({} as any);
 
   const handleStart = useCallback(
-    (touchInfo: TouchInfo) => {
+    (touchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (!onStart) return;
-      return onStart(touchInfo, context.current);
+      return onStart(touchInfo, context.value);
     },
     [context, onStart]
   );
 
   const handleActive = useCallback(
-    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+    (extendedTouchInfo: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+      'worklet';
       if (!onActive) return;
-      return onActive(extendedTouchInfo, context.current);
+      return onActive(extendedTouchInfo, context.value);
     },
     [context, onActive]
   );
 
   const handleEnd = useCallback(
-    (extendedTouchInfo: ExtendedTouchInfo & TranslationInfo) => {
+    (
+      extendedTouchInfo: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+    ) => {
+      'worklet';
       if (!onEnd) return;
-      return onEnd(extendedTouchInfo, context.current);
+      return onEnd(extendedTouchInfo, context.value);
     },
     [context, onEnd]
   );

package/src/index.ts

@@ -1,5 +1,5 @@
+import * as Touchable from './components';
 export * from './hoc';
 export * from './hooks/use-gesture-handler';
-import * as Touchable from './components';
 
 export default Touchable;

package/src/utils/get-circle-path.ts

@@ -3,5 +3,6 @@ import { Skia } from '@shopify/react-native-skia';
 type GetCirclePathParams = { cx: number; cy: number; r: number };
 
 export const getCirclePath = ({ cx, cy, r }: GetCirclePathParams) => {
+  'worklet';
   return Skia.Path.Make().addCircle(cx, cy, r);
 };

package/src/utils/get-rect-path.ts

@@ -1,4 +1,4 @@
-import { rect, rrect, Skia, type SkRect } from '@shopify/react-native-skia';
+import { Skia, type SkRect } from '@shopify/react-native-skia';
 
 type GetRectPathParams =
   | {
@@ -10,16 +10,18 @@ type GetRectPathParams =
   | { rect: SkRect };
 
 const getRectPath = (params: GetRectPathParams) => {
+  'worklet';
+
   const skPath = Skia.Path.Make();
   if ('rect' in params) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     const { rect } = params;
 
     skPath.addRect(rect);
     return skPath;
   }
   const { x, y, width, height } = params;
-  skPath.addRect(rect(x, y, width, height));
+
+  skPath.addRect(Skia.XYWHRect(x, y, width, height));
   return skPath;
 };
 
@@ -28,17 +30,20 @@ type GetRoundedRectPathParams = GetRectPathParams & {
 };
 
 const getRoundedRectPath = (params: GetRoundedRectPathParams) => {
+  'worklet';
+
   const { r } = params;
   const skPath = Skia.Path.Make();
   if ('rect' in params) {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     const { rect } = params;
-    skPath.addRRect(rrect(rect, r, r));
+
+    skPath.addRRect(Skia.RRectXY(rect, r, r));
     return skPath;
   }
   const { x, y, width, height } = params;
 
-  skPath.addRRect(rrect(rect(x, y, width, height), r, r));
+  const roundedRect = Skia.RRectXY(Skia.XYWHRect(x, y, width, height), r, r);
+  skPath.addRRect(roundedRect);
   return skPath;
 };
 

package/src/utils/unwrap-animated-value.ts

@@ -1,12 +1,19 @@
 import type { SkiaValue } from '@shopify/react-native-skia';
+import type Animated from 'react-native-reanimated';
 
 type SkiaValueWithSelector<T> = {
   value: SkiaValue<T>;
   selector: (v: T) => T;
 };
 const unwrapAnimatedValue = <T>(
-  value: SkiaValue<T> | SkiaValueWithSelector<T> | T
+  value: SkiaValue<T> | SkiaValueWithSelector<T> | Animated.SharedValue<T> | T
 ): T => {
+  'worklet';
+
+  if ((value as Animated.SharedValue<T>).value != null) {
+    return (value as Animated.SharedValue<T>).value as T;
+  }
+
   if ((value as SkiaValue<T>).current != null) {
     return (value as SkiaValue<T>).current;
   }
@@ -22,6 +29,7 @@ const unwrapAnimatedValue = <T>(
 const unwrapAnimatedValueObject = <T>(
   value: Record<any, SkiaValue<T> | T>
 ): Record<any, T> => {
+  'worklet';
   return Object.keys(value).reduce((acc, key) => {
     return { ...acc, [key]: unwrapAnimatedValue(value[key]) };
   }, {});