feat(reanimated): Add placeholder withSequence function to prevent errors

Also a bit of cleanup of withRepeat and withDelay functions

Author: WillsonHaw

.changeset/icy-ways-exist.md

@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning-plugin-reanimated": patch
+---
+
+feat: Add a placeholder withSequence

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

@@ -1,19 +1,13 @@
-import type {
-  AnimationObject,
-  withDelay as withDelayRN,
-} from 'react-native-reanimated-original';
+import type { AnimatedValue } from '../animation/AnimatedValue';
 
 export type WithDelayFn = (
-  ...args: Parameters<typeof withDelayRN>
-) => AnimationObject;
+  delayMs: number,
+  animation: AnimatedValue,
+  reduceMotion?: string,
+) => AnimatedValue;
 
-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);
+export const withDelay: WithDelayFn = (delayMs, animation) => {
+  animation.lngAnimation.delay = delayMs;
+
+  return animation;
 };

packages/plugin-reanimated/src/exports/withRepeat.ts

@@ -1,31 +1,19 @@
 import type { AnimatedValue } from '../animation/AnimatedValue';
-import type { AnimationType } from '../types/AnimationType';
 
-export function withRepeat(
+export type WithRepeatFn = (
+  animation: AnimatedValue,
+  repeatCount?: number,
+  reverse?: boolean,
+) => AnimatedValue;
+
+export const withRepeat: WithRepeatFn = (
   animation: AnimatedValue,
   repeatCount = 2,
   reverse = false,
-): {
-  isHigherOrder: boolean;
-  onFrame: () => void;
-  onStart: () => void;
-  reps: number;
-  current: AnimatedValue<AnimationType>;
-  callback: () => void;
-  startValue: number;
-  reduceMotion: boolean;
-} {
+) => {
+  animation.lngAnimation.loop = repeatCount === -1;
   animation.lngAnimation.repeat = repeatCount;
   animation.lngAnimation.stopMethod = reverse ? 'reverse' : false;
 
-  return {
-    isHigherOrder: true,
-    onFrame: (): void => {},
-    onStart: (): void => {},
-    reps: 0,
-    current: animation,
-    callback: (): void => {},
-    startValue: 0,
-    reduceMotion: false,
-  };
-}
+  return animation;
+};

packages/plugin-reanimated/src/exports/withSequence.ts

@@ -0,0 +1,26 @@
+import type {
+  AnimatableValue,
+  AnimationObject,
+  withSequence as withSequenceRN,
+} from 'react-native-reanimated-original';
+
+export function withSequence(
+  _reduceMotion: string,
+  ...animations: AnimatableValue[]
+): ReturnType<typeof withSequenceRN> {
+  console.error(
+    '[Reanimated] withSequence is unsupported. Consider building a custom animation in lightning directly instead. Returning just the first animation.',
+  );
+
+  const returnAnimation = animations[0];
+
+  if (!returnAnimation) {
+    throw new Error(
+      '[Reanimated] withSequence requires at least one animation.',
+    );
+  }
+
+  return typeof returnAnimation === 'function'
+    ? (returnAnimation as () => AnimationObject)()
+    : (returnAnimation as AnimationObject);
+}

packages/plugin-reanimated/src/index.ts

@@ -52,6 +52,7 @@ export { useAnimatedStyle } from './exports/useAnimatedStyle';
 export { useComposedEventHandler } from './exports/useComposedEventHandler';
 export { withDelay } from './exports/withDelay';
 export { withRepeat } from './exports/withRepeat';
+export { withSequence } from './exports/withSequence';
 export { withSpring } from './exports/withSpring';
 export { withTiming } from './exports/withTiming';