feat(reanimated): useAnimatedScrollHandler, withDelay

Author: thealmarques

.changeset/tall-sloths-fix.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning-plugin-reanimated": minor
+---
+
+Added useAnimatedScrollHandler, withDelay implementations.

packages/plugin-reanimated/src/animation/spring.ts

@@ -139,7 +139,7 @@ export function createSpringAnimation(
   const animation = {
     duration: 350,
     easing: `cubic-bezier(${1 / 3}, ${p1_y}, ${2 / 3}, ${p2_y})`,
-    delay: 0,
+    delay: config?.delay ?? 0,
     loop: false,
     repeat: 0,
     repeatDelay: 0,

packages/plugin-reanimated/src/animation/timing.ts

@@ -14,7 +14,7 @@ export function createTimingAnimation(
   return {
     duration: config?.duration ?? DefaultTimingConfig.duration,
     easing: 'linear',
-    delay: 0,
+    delay: config?.delay ?? 0,
     loop: false,
     repeat: 0,
     repeatDelay: 0,

packages/plugin-reanimated/src/exports/useAnimatedScrollHandler.tsx

@@ -0,0 +1,42 @@
+import { type DependencyList, useCallback, useRef } from 'react';
+import type {
+  ScrollHandlerProcessed,
+  useAnimatedScrollHandler as useAnimatedScrollHandlerRN,
+} from 'react-native-reanimated-original';
+
+type UseAnimatedScrollHandlerFn = (
+  ...args: Parameters<typeof useAnimatedScrollHandlerRN>
+) => ScrollHandlerProcessed;
+
+export const useAnimatedScrollHandler: UseAnimatedScrollHandlerFn = (
+  scrollHandlers,
+  dependencies,
+) => {
+  const inputs: DependencyList = dependencies ?? [];
+  // We want to persist context between scroll events
+  // The caller should use it, we won't do any assignment in
+  // this function.
+  const contextRef = useRef({});
+
+  return useCallback(
+    (event) => {
+      const context = contextRef.current;
+      // Only allow onScroll event
+      const reanimatedEvent = {
+        eventName: 'onScroll',
+        ...event.nativeEvent,
+      };
+
+      if (typeof scrollHandlers === 'function') {
+        scrollHandlers(reanimatedEvent, context);
+        return;
+      }
+
+      if (scrollHandlers && typeof scrollHandlers.onScroll === 'function') {
+        scrollHandlers.onScroll(reanimatedEvent, context);
+      }
+    },
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We're passing a dependencies array from the props
+    inputs,
+  );
+};

packages/plugin-reanimated/src/exports/withDelay.tsx

@@ -0,0 +1,19 @@
+import type {
+  AnimationObject,
+  withDelay as withDelayRN,
+} from 'react-native-reanimated-original';
+
+export type WithDelayFn = (
+  ...args: Parameters<typeof withDelayRN>
+) => AnimationObject;
+
+export const withDelay: WithDelayFn = (
+  _delayMs,
+  _nextAnimation,
+  _reduceMotion,
+): AnimationObject => {
+  // withTiming and withSpring supports `delay`. The client should pass it directly
+  return typeof _nextAnimation === 'function'
+    ? (_nextAnimation as () => AnimationObject)()
+    : (_nextAnimation as AnimationObject);
+};

packages/plugin-reanimated/src/index.ts

@@ -46,8 +46,10 @@ export {
   SlideOutUp,
 } from './builders/Slide';
 
+export { useAnimatedScrollHandler } from './exports/useAnimatedScrollHandler';
 export { useAnimatedStyle } from './exports/useAnimatedStyle';
 export { useComposedEventHandler } from './exports/useComposedEventHandler';
+export { withDelay } from './exports/withDelay';
 export { withRepeat } from './exports/withRepeat';
 export { withSpring } from './exports/withSpring';
 export { withTiming } from './exports/withTiming';

packages/plugin-reanimated/src/types/reanimated-extended.d.ts

@@ -0,0 +1,19 @@
+import type {
+  WithSpringConfig as BaseSpringConfig,
+  WithTimingConfig as BaseTimingConfig,
+} from 'react-native-reanimated';
+
+declare module 'react-native-reanimated' {
+  interface WithTimingConfig extends BaseTimingConfig {
+    delay?: number;
+  }
+
+  interface WithSpringConfig extends BaseSpringConfig {
+    delay?: number;
+  }
+}
+
+export type {
+  WithSpringConfig as SpringConfig,
+  WithTimingConfig as TimingConfig,
+} from 'react-native-reanimated';