@souscheflabs/reanimated-flashlist 0.1.7

package/src/__tests__/contexts/ListAnimationContext.test.tsx

@@ -0,0 +1,324 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-native';
+import { LayoutAnimation } from 'react-native';
+import {
+  ListAnimationProvider,
+  useListAnimation,
+  useListAnimationOptional,
+} from '../../contexts/ListAnimationContext';
+
+// Mock LayoutAnimation
+jest.mock('react-native/Libraries/LayoutAnimation/LayoutAnimation');
+
+describe('ListAnimationContext', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('useListAnimation', () => {
+    it('throws when used outside ListAnimationProvider', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => {
+        renderHook(() => useListAnimation());
+      }).toThrow('useListAnimation must be used within ListAnimationProvider');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('provides context value when used within ListAnimationProvider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ListAnimationProvider>{children}</ListAnimationProvider>
+      );
+
+      const { result } = renderHook(() => useListAnimation(), { wrapper });
+
+      expect(result.current).toBeDefined();
+      expect(typeof result.current.registerAnimationTrigger).toBe('function');
+      expect(typeof result.current.triggerExitAnimation).toBe('function');
+    });
+  });
+
+  describe('useListAnimationOptional', () => {
+    it('returns null when used outside ListAnimationProvider', () => {
+      const { result } = renderHook(() => useListAnimationOptional());
+      expect(result.current).toBeNull();
+    });
+
+    it('returns context value when used within ListAnimationProvider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ListAnimationProvider>{children}</ListAnimationProvider>
+      );
+
+      const { result } = renderHook(() => useListAnimationOptional(), { wrapper });
+      expect(result.current).not.toBeNull();
+    });
+  });
+
+  describe('ListAnimationProvider', () => {
+    const createWrapper = (props?: Partial<Parameters<typeof ListAnimationProvider>[0]>) => {
+      const Wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ListAnimationProvider {...props}>{children}</ListAnimationProvider>
+      );
+      return Wrapper;
+    };
+
+    describe('exit animations', () => {
+      it('registerAnimationTrigger and unregisterAnimationTrigger work correctly', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        const mockTrigger = jest.fn();
+
+        act(() => {
+          result.current.registerAnimationTrigger('item-1', mockTrigger);
+        });
+
+        // Trigger should be called
+        const onComplete = jest.fn();
+        act(() => {
+          const triggered = result.current.triggerExitAnimation('item-1', 1, onComplete);
+          expect(triggered).toBe(true);
+        });
+
+        expect(mockTrigger).toHaveBeenCalledWith(1, onComplete);
+
+        // Unregister
+        act(() => {
+          result.current.unregisterAnimationTrigger('item-1');
+        });
+
+        // Should not trigger after unregister
+        const triggered = result.current.triggerExitAnimation('item-1', 1, onComplete);
+        expect(triggered).toBe(false);
+      });
+
+      it('triggerExitAnimation returns false for non-existent item', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        const onComplete = jest.fn();
+        const triggered = result.current.triggerExitAnimation('non-existent', 1, onComplete);
+
+        expect(triggered).toBe(false);
+        expect(onComplete).not.toHaveBeenCalled();
+      });
+
+      it('triggerExitAnimation passes correct direction and callback', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        const mockTrigger = jest.fn();
+        const onComplete = jest.fn();
+
+        act(() => {
+          result.current.registerAnimationTrigger('item-1', mockTrigger);
+        });
+
+        // Test direction 1 (down)
+        act(() => {
+          result.current.triggerExitAnimation('item-1', 1, onComplete);
+        });
+        expect(mockTrigger).toHaveBeenCalledWith(1, onComplete);
+
+        mockTrigger.mockClear();
+
+        // Test direction -1 (up)
+        act(() => {
+          result.current.triggerExitAnimation('item-1', -1, onComplete);
+        });
+        expect(mockTrigger).toHaveBeenCalledWith(-1, onComplete);
+      });
+    });
+
+    describe('entry animations', () => {
+      it('queueEntryAnimation and claimEntryAnimation work correctly', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        act(() => {
+          result.current.queueEntryAnimation('item-1', 1);
+        });
+
+        let entry: ReturnType<typeof result.current.claimEntryAnimation>;
+        act(() => {
+          entry = result.current.claimEntryAnimation('item-1');
+        });
+
+        expect(entry).not.toBeNull();
+        expect(entry?.itemId).toBe('item-1');
+        expect(entry?.direction).toBe(1);
+      });
+
+      it('claimEntryAnimation returns null for non-queued item', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        const entry = result.current.claimEntryAnimation('non-existent');
+        expect(entry).toBeNull();
+      });
+
+      it('claimEntryAnimation consumes the pending animation', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        act(() => {
+          result.current.queueEntryAnimation('item-1', 1);
+        });
+
+        // First claim succeeds
+        let entry1: ReturnType<typeof result.current.claimEntryAnimation>;
+        act(() => {
+          entry1 = result.current.claimEntryAnimation('item-1');
+        });
+        expect(entry1).not.toBeNull();
+
+        // Second claim fails (already consumed)
+        const entry2 = result.current.claimEntryAnimation('item-1');
+        expect(entry2).toBeNull();
+      });
+
+      it('entry animation expires after timeout', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper({ entryAnimationTimeout: 1000 }),
+        });
+
+        act(() => {
+          result.current.queueEntryAnimation('item-1', 1);
+        });
+
+        // Advance past timeout
+        act(() => {
+          jest.advanceTimersByTime(1500);
+        });
+
+        // Should be expired
+        const entry = result.current.claimEntryAnimation('item-1');
+        expect(entry).toBeNull();
+      });
+
+      it('entry animation is valid before timeout', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper({ entryAnimationTimeout: 1000 }),
+        });
+
+        act(() => {
+          result.current.queueEntryAnimation('item-1', 1);
+        });
+
+        // Advance but not past timeout
+        act(() => {
+          jest.advanceTimersByTime(500);
+        });
+
+        // Should still be valid
+        let entry: ReturnType<typeof result.current.claimEntryAnimation>;
+        act(() => {
+          entry = result.current.claimEntryAnimation('item-1');
+        });
+        expect(entry).not.toBeNull();
+      });
+    });
+
+    describe('exiting items for layout compensation', () => {
+      it('registerExitingItem and unregisterExitingItem work correctly', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        const initialVersion = result.current.exitingItemsVersion.value;
+
+        act(() => {
+          result.current.registerExitingItem('item-1', 0, 80);
+        });
+
+        // Version should increment
+        expect(result.current.exitingItemsVersion.value).toBe(initialVersion + 1);
+
+        act(() => {
+          result.current.unregisterExitingItem('item-1');
+        });
+
+        // Version should increment again
+        expect(result.current.exitingItemsVersion.value).toBe(initialVersion + 2);
+      });
+
+      it('getExitingHeightAbove returns correct total', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        act(() => {
+          result.current.registerExitingItem('item-0', 0, 80);
+          result.current.registerExitingItem('item-1', 1, 90);
+          result.current.registerExitingItem('item-3', 3, 70);
+        });
+
+        // For index 2, items 0 and 1 are above
+        const heightAbove2 = result.current.getExitingHeightAbove(2);
+        expect(heightAbove2).toBe(170); // 80 + 90
+
+        // For index 4, all items are above
+        const heightAbove4 = result.current.getExitingHeightAbove(4);
+        expect(heightAbove4).toBe(240); // 80 + 90 + 70
+
+        // For index 0, no items are above
+        const heightAbove0 = result.current.getExitingHeightAbove(0);
+        expect(heightAbove0).toBe(0);
+      });
+
+      it('registerExitingItem triggers LayoutAnimation when enabled', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper({ enableLayoutAnimation: true }),
+        });
+
+        act(() => {
+          result.current.registerExitingItem('item-1', 0, 80);
+        });
+
+        expect(LayoutAnimation.configureNext).toHaveBeenCalled();
+      });
+
+      it('registerExitingItem does not trigger LayoutAnimation when disabled', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper({ enableLayoutAnimation: false }),
+        });
+
+        act(() => {
+          result.current.registerExitingItem('item-1', 0, 80);
+        });
+
+        expect(LayoutAnimation.configureNext).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('configuration', () => {
+      it('uses default layoutAnimationDuration', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper(),
+        });
+
+        expect(result.current.layoutAnimationDuration).toBe(200);
+      });
+
+      it('uses custom layoutAnimationDuration', () => {
+        const { result } = renderHook(() => useListAnimation(), {
+          wrapper: createWrapper({ layoutAnimationDuration: 300 }),
+        });
+
+        expect(result.current.layoutAnimationDuration).toBe(300);
+      });
+    });
+  });
+});

package/src/__tests__/hooks/useDragAnimatedStyle.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { useDragAnimatedStyle } from '../../hooks/drag/useDragAnimatedStyle';
+import { DragStateProvider } from '../../contexts/DragStateContext';
+import { createMockSharedValue } from '../utils/test-utils';
+
+describe('useDragAnimatedStyle', () => {
+  const createWrapper = () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <DragStateProvider>{children}</DragStateProvider>
+    );
+    return Wrapper;
+  };
+
+  it('returns dragAnimatedStyle', () => {
+    const isDragging = createMockSharedValue(false);
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('uses itemId to identify the dragged item', () => {
+    const isDragging = createMockSharedValue(false);
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('test-item', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('works with different isDragging states', () => {
+    const isDraggingFalse = createMockSharedValue(false);
+    const isDraggingTrue = createMockSharedValue(true);
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { result: resultFalse } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDraggingFalse as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    const { result: resultTrue } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDraggingTrue as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(resultFalse.current.dragAnimatedStyle).toBeDefined();
+    expect(resultTrue.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('handles translateY values', () => {
+    const isDragging = createMockSharedValue(true);
+    const translateY = createMockSharedValue(100);
+    const shiftY = createMockSharedValue(0);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('handles shiftY values', () => {
+    const isDragging = createMockSharedValue(false);
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(-80);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('handles negative translateY', () => {
+    const isDragging = createMockSharedValue(true);
+    const translateY = createMockSharedValue(-50);
+    const shiftY = createMockSharedValue(0);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+
+  it('works with custom drag config from provider', () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <DragStateProvider config={{ dragScale: 1.1, dragShadowOpacity: 0.3 }}>
+        {children}
+      </DragStateProvider>
+    );
+
+    const isDragging = createMockSharedValue(true);
+    const translateY = createMockSharedValue(50);
+    const shiftY = createMockSharedValue(0);
+
+    const { result } = renderHook(
+      () => useDragAnimatedStyle('item-1', isDragging as any, translateY as any, shiftY as any),
+      { wrapper: Wrapper },
+    );
+
+    expect(result.current.dragAnimatedStyle).toBeDefined();
+  });
+});

package/src/__tests__/hooks/useDragGesture.test.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { useDragGesture } from '../../hooks/drag/useDragGesture';
+import { DragStateProvider } from '../../contexts/DragStateContext';
+import { createMockAnimatedRef } from '../utils/test-utils';
+
+// Mock scheduleOnRN to execute synchronously in tests
+jest.mock('react-native-worklets', () => ({
+  scheduleOnRN: jest.fn((fn, ...args) => fn(...args)),
+}));
+
+describe('useDragGesture', () => {
+  const createWrapper = () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <DragStateProvider>{children}</DragStateProvider>
+    );
+    return Wrapper;
+  };
+
+  const defaultConfig = {
+    itemId: 'item-1',
+    index: 0,
+    totalItems: 5,
+    enabled: true,
+    containerRef: createMockAnimatedRef(),
+  };
+
+  const defaultCallbacks = {
+    onReorderByDelta: jest.fn(),
+    onHapticFeedback: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns panGesture, isDragging, and translateY', () => {
+    const { result } = renderHook(
+      () => useDragGesture(defaultConfig, defaultCallbacks),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.panGesture).toBeDefined();
+    expect(result.current.isDragging).toBeDefined();
+    expect(result.current.translateY).toBeDefined();
+  });
+
+  it('initializes isDragging to false', () => {
+    const { result } = renderHook(
+      () => useDragGesture(defaultConfig, defaultCallbacks),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.isDragging.value).toBe(false);
+  });
+
+  it('initializes translateY to 0', () => {
+    const { result } = renderHook(
+      () => useDragGesture(defaultConfig, defaultCallbacks),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.translateY.value).toBe(0);
+  });
+
+  it('creates a Pan gesture with long press activation', () => {
+    const { result } = renderHook(
+      () => useDragGesture(defaultConfig, defaultCallbacks),
+      { wrapper: createWrapper() },
+    );
+
+    // Gesture should be created by Gesture.Pan()
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+  it('respects the enabled config', () => {
+    const { result } = renderHook(
+      () =>
+        useDragGesture(
+          { ...defaultConfig, enabled: false },
+          defaultCallbacks,
+        ),
+      { wrapper: createWrapper() },
+    );
+
+    // Gesture is still created but enabled is set via config
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+  it('uses the containerRef for measuring', () => {
+    const containerRef = createMockAnimatedRef();
+
+    const { result } = renderHook(
+      () =>
+        useDragGesture(
+          { ...defaultConfig, containerRef },
+          defaultCallbacks,
+        ),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+  it('updates gesture when config changes', () => {
+    const { result, rerender } = renderHook(
+      ({ config }) => useDragGesture(config, defaultCallbacks),
+      {
+        wrapper: createWrapper(),
+        initialProps: { config: defaultConfig },
+      },
+    );
+
+    const initialGesture = result.current.panGesture;
+
+    rerender({
+      config: { ...defaultConfig, enabled: false },
+    });
+
+    // Gesture should be recreated when enabled changes
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+  it('accepts different item indices', () => {
+    const items = [0, 1, 2, 3, 4].map((index) => {
+      const { result } = renderHook(
+        () =>
+          useDragGesture(
+            { ...defaultConfig, index, itemId: `item-${index}` },
+            defaultCallbacks,
+          ),
+        { wrapper: createWrapper() },
+      );
+      return result.current;
+    });
+
+    items.forEach((item) => {
+      expect(item.panGesture).toBeDefined();
+      expect(item.isDragging.value).toBe(false);
+      expect(item.translateY.value).toBe(0);
+    });
+  });
+
+  it('handles haptic feedback callback', () => {
+    const onHapticFeedback = jest.fn();
+
+    const { result } = renderHook(
+      () => useDragGesture(defaultConfig, { ...defaultCallbacks, onHapticFeedback }),
+      { wrapper: createWrapper() },
+    );
+
+    // Callback should be storable and gesture should be created
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+  it('handles reorder callback', () => {
+    const onReorderByDelta = jest.fn();
+
+    const { result } = renderHook(
+      () =>
+        useDragGesture(defaultConfig, { ...defaultCallbacks, onReorderByDelta }),
+      { wrapper: createWrapper() },
+    );
+
+    // Callback should be storable and gesture should be created
+    expect(result.current.panGesture).toBeDefined();
+  });
+
+});

package/src/__tests__/hooks/useDragShift.test.tsx

@@ -0,0 +1,94 @@
+import { renderHook } from '@testing-library/react-native';
+import React from 'react';
+import { useDragShift } from '../../hooks/drag/useDragShift';
+import { DragStateProvider } from '../../contexts/DragStateContext';
+
+describe('useDragShift', () => {
+  const createWrapper = () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <DragStateProvider>{children}</DragStateProvider>
+    );
+    return Wrapper;
+  };
+
+  it('returns a shiftY SharedValue', () => {
+    const { result } = renderHook(
+      () => useDragShift({ itemId: 'item-1', index: 0 }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.shiftY).toBeDefined();
+    expect(result.current.shiftY.value).toBe(0);
+  });
+
+  it('initializes shiftY to 0', () => {
+    const { result } = renderHook(
+      () => useDragShift({ itemId: 'item-1', index: 0 }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.shiftY.value).toBe(0);
+  });
+
+  it('returns 0 shift when not dragging', () => {
+    const { result } = renderHook(
+      () => useDragShift({ itemId: 'item-1', index: 1 }),
+      { wrapper: createWrapper() },
+    );
+
+    // When nothing is being dragged, shiftY should remain 0
+    expect(result.current.shiftY.value).toBe(0);
+  });
+
+  it('returns 0 shift for the dragged item itself', () => {
+    const { result } = renderHook(
+      () => useDragShift({ itemId: 'dragged-item', index: 2 }),
+      { wrapper: createWrapper() },
+    );
+
+    // Even if this item is being dragged, it shouldn't shift itself
+    expect(result.current.shiftY.value).toBe(0);
+  });
+
+  it('uses item index and id from config', () => {
+    const { result } = renderHook(
+      () => useDragShift({ itemId: 'test-item', index: 5 }),
+      { wrapper: createWrapper() },
+    );
+
+    // Hook should use the provided config values
+    expect(result.current.shiftY).toBeDefined();
+  });
+
+  it('handles different item indices', () => {
+    const items = [0, 1, 2, 3, 4].map((index) => {
+      const { result } = renderHook(
+        () => useDragShift({ itemId: `item-${index}`, index }),
+        { wrapper: createWrapper() },
+      );
+      return result.current;
+    });
+
+    // All items should have shiftY defined
+    items.forEach((item) => {
+      expect(item.shiftY).toBeDefined();
+      expect(item.shiftY.value).toBe(0);
+    });
+  });
+
+  it('re-renders correctly when config changes', () => {
+    const { result, rerender } = renderHook(
+      ({ itemId, index }) => useDragShift({ itemId, index }),
+      {
+        wrapper: createWrapper(),
+        initialProps: { itemId: 'item-1', index: 0 },
+      },
+    );
+
+    expect(result.current.shiftY.value).toBe(0);
+
+    rerender({ itemId: 'item-2', index: 1 });
+
+    expect(result.current.shiftY).toBeDefined();
+  });
+});