@souscheflabs/reanimated-flashlist 0.1.7

package/src/AnimatedFlashListItem.tsx

@@ -0,0 +1,212 @@
+import React, { useLayoutEffect, useMemo, useCallback, useRef } from 'react';
+import Animated, { useAnimatedRef } from 'react-native-reanimated';
+import type { ViewStyle, LayoutChangeEvent } from 'react-native';
+import {
+  useDragGesture,
+  useDragShift,
+  useDragAnimatedStyle,
+  useDropCompensation,
+  useListExitAnimation,
+  useListEntryAnimation,
+} from './hooks';
+import { useListAnimationOptional } from './contexts';
+import type {
+  AnimatedListItem,
+  AnimatedRenderItemInfo,
+  HapticFeedbackType,
+} from './types';
+
+interface AnimatedFlashListItemProps<T extends AnimatedListItem> {
+  /** The item data */
+  item: T;
+  /** Current index in list */
+  index: number;
+  /** Total number of items */
+  totalItems: number;
+  /** Whether drag is enabled for this item */
+  isDragEnabled: boolean;
+  /** Render function from parent */
+  renderItem: (info: AnimatedRenderItemInfo<T>) => React.ReactElement;
+  /** Callback when reorder occurs */
+  onReorderByDelta?: (itemId: string, delta: number) => void;
+  /** Optional haptic feedback callback */
+  onHapticFeedback?: (type: HapticFeedbackType) => void;
+}
+
+/**
+ * Internal item wrapper that provides all animation functionality.
+ *
+ * This component:
+ * 1. Sets up drag gesture and shift animations
+ * 2. Sets up entry/exit animations
+ * 3. Combines all animated styles
+ * 4. Passes everything to the consumer's renderItem function
+ *
+ * @internal
+ */
+function AnimatedFlashListItemInner<T extends AnimatedListItem>({
+  item,
+  index,
+  totalItems,
+  isDragEnabled,
+  renderItem,
+  onReorderByDelta,
+  onHapticFeedback,
+}: AnimatedFlashListItemProps<T>): React.ReactElement | null {
+  // Animated ref for measuring item height on drag start
+  const containerRef = useAnimatedRef<Animated.View>();
+
+  // Track measured height for layout compensation
+  const measuredHeightRef = useRef<number>(0);
+
+  // List animation context for subscription-triggered animations and layout compensation
+  const animationContext = useListAnimationOptional();
+
+  // === DRAG HOOKS ===
+
+  // Pan gesture for drag-to-reorder
+  const { panGesture, isDragging, translateY } = useDragGesture(
+    {
+      itemId: item.id,
+      index,
+      totalItems,
+      enabled: isDragEnabled,
+      containerRef,
+    },
+    {
+      onReorderByDelta,
+      onHapticFeedback,
+    },
+  );
+
+  // Shift animation for non-dragged items
+  const { shiftY } = useDragShift({ itemId: item.id, index });
+
+  // Handle index changes after cache updates (drop compensation)
+  useDropCompensation({ itemId: item.id, index, translateY, shiftY });
+
+  // Animated style for drag transforms
+  const { dragAnimatedStyle } = useDragAnimatedStyle(
+    item.id,
+    isDragging,
+    translateY,
+    shiftY,
+  );
+
+  // === ANIMATION HOOKS ===
+
+  // Callbacks for layout compensation (register/unregister exiting items)
+  const onExitStart = useCallback(
+    (exitIndex: number, height: number) => {
+      animationContext?.registerExitingItem(item.id, exitIndex, height);
+    },
+    [animationContext, item.id],
+  );
+
+  const onExitComplete = useCallback(() => {
+    animationContext?.unregisterExitingItem(item.id);
+  }, [animationContext, item.id]);
+
+  // Exit animation for smooth slide-out (with layout compensation callbacks)
+  const { exitAnimatedStyle, triggerExit, resetAnimation } =
+    useListExitAnimation(item.id, {
+      index,
+      measuredHeight: measuredHeightRef.current,
+      onExitStart,
+      onExitComplete,
+    });
+
+  // Entry animation for items appearing
+  const { entryAnimatedStyle } = useListEntryAnimation(item.id);
+
+  // Register exit animation trigger (O(1) direct calls from subscriptions)
+  useLayoutEffect(() => {
+    if (!animationContext) return;
+    animationContext.registerAnimationTrigger(item.id, triggerExit);
+    return () => animationContext.unregisterAnimationTrigger(item.id);
+  }, [item.id, triggerExit, animationContext]);
+
+  // Track measured height for layout compensation
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    measuredHeightRef.current = event.nativeEvent.layout.height;
+  }, []);
+
+  // Create combined animated style
+  const combinedAnimatedStyle = useMemo<ViewStyle>(() => {
+    // We can't directly combine animated styles here since they're worklet-based
+    // Instead, we'll let the consumer apply them via the render prop
+    return {};
+  }, []);
+
+  // Create drag handle props
+  const dragHandleProps = useMemo(
+    () =>
+      isDragEnabled
+        ? {
+            gesture: panGesture,
+            isDragging,
+          }
+        : null,
+    [isDragEnabled, panGesture, isDragging],
+  );
+
+  // Trigger exit animation wrapper
+  const triggerExitAnimation = useCallback(
+    (
+      direction: 1 | -1,
+      onComplete: () => void,
+      preset?: 'default' | 'fast',
+    ) => {
+      triggerExit(direction, onComplete, preset);
+    },
+    [triggerExit],
+  );
+
+  // Create render info
+  const renderInfo = useMemo<AnimatedRenderItemInfo<T>>(
+    () => ({
+      item,
+      index,
+      totalItems,
+      animatedStyle: combinedAnimatedStyle,
+      dragHandleProps,
+      isDragging: false, // This is a SharedValue, consumer should use dragHandleProps.isDragging
+      isDragEnabled,
+      triggerExitAnimation,
+      resetExitAnimation: resetAnimation,
+    }),
+    [
+      item,
+      index,
+      totalItems,
+      combinedAnimatedStyle,
+      dragHandleProps,
+      isDragEnabled,
+      triggerExitAnimation,
+      resetAnimation,
+    ],
+  );
+
+  // Render the item with animations applied
+  // The consumer's renderItem gets wrapped in our animated container
+  const renderedItem = renderItem(renderInfo);
+
+  return (
+    <Animated.View
+      ref={containerRef}
+      onLayout={handleLayout}
+      style={[
+        exitAnimatedStyle,
+        entryAnimatedStyle,
+        isDragEnabled && dragAnimatedStyle,
+      ]}
+    >
+      {renderedItem}
+    </Animated.View>
+  );
+}
+
+// Memoize to prevent unnecessary re-renders
+export const AnimatedFlashListItem = React.memo(
+  AnimatedFlashListItemInner,
+) as typeof AnimatedFlashListItemInner;

package/src/__tests__/components/AnimatedFlashList.test.tsx

@@ -0,0 +1,365 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { AnimatedFlashList } from '../../AnimatedFlashList';
+import type { AnimatedRenderItemInfo } from '../../types';
+
+interface TestItem {
+  id: string;
+  title: string;
+}
+
+const createTestItems = (count: number): TestItem[] =>
+  Array.from({ length: count }, (_, i) => ({
+    id: `item-${i + 1}`,
+    title: `Test Item ${i + 1}`,
+  }));
+
+describe('AnimatedFlashList', () => {
+  const defaultRenderItem = ({ item }: AnimatedRenderItemInfo<TestItem>) => (
+    <View testID={`item-${item.id}`}>
+      <Text>{item.title}</Text>
+    </View>
+  );
+
+  const defaultKeyExtractor = (item: TestItem) => item.id;
+
+  it('renders without crashing', () => {
+    const data = createTestItems(3);
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('renders items from data array', () => {
+    const data = createTestItems(3);
+
+    const { getByText } = render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(getByText('Test Item 1')).toBeTruthy();
+    expect(getByText('Test Item 2')).toBeTruthy();
+    expect(getByText('Test Item 3')).toBeTruthy();
+  });
+
+  it('returns null for empty data when no ListFooterComponent', () => {
+    const { toJSON } = render(
+      <AnimatedFlashList<TestItem>
+        data={[]}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders ListFooterComponent for empty data', () => {
+    const FooterComponent = () => (
+      <View testID="footer">
+        <Text>No items</Text>
+      </View>
+    );
+
+    const { getByText } = render(
+      <AnimatedFlashList<TestItem>
+        data={[]}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        estimatedItemSize={80}
+        ListFooterComponent={FooterComponent}
+      />,
+    );
+
+    expect(getByText('No items')).toBeTruthy();
+  });
+
+  it('supports dragEnabled prop', () => {
+    const data = createTestItems(3);
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          dragEnabled
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('supports dragEnabled=false (disabled)', () => {
+    const data = createTestItems(3);
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          dragEnabled={false}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('calls onReorder callback when provided', () => {
+    const data = createTestItems(3);
+    const onReorder = jest.fn();
+
+    render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        dragEnabled
+        onReorder={onReorder}
+        estimatedItemSize={80}
+      />,
+    );
+
+    // onReorder should be provided but not called until user drags
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it('supports canDrag filter function', () => {
+    const data = createTestItems(5);
+    const canDrag = (item: TestItem, index: number) => index % 2 === 0;
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          dragEnabled
+          canDrag={canDrag}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('supports custom drag config', () => {
+    const data = createTestItems(3);
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          dragEnabled
+          config={{
+            drag: {
+              longPressDuration: 500,
+              dragScale: 1.1,
+              itemHeight: 100,
+            },
+          }}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('supports haptic feedback callback', () => {
+    const data = createTestItems(3);
+    const onHapticFeedback = jest.fn();
+
+    render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        dragEnabled
+        onHapticFeedback={onHapticFeedback}
+        estimatedItemSize={80}
+      />,
+    );
+
+    // Haptic feedback should not be called until drag starts
+    expect(onHapticFeedback).not.toHaveBeenCalled();
+  });
+
+  it('supports onRefresh and refreshing props', () => {
+    const data = createTestItems(3);
+    const onRefresh = jest.fn();
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          onRefresh={onRefresh}
+          refreshing={false}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('supports onEndReached prop', () => {
+    const data = createTestItems(3);
+    const onEndReached = jest.fn();
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          onEndReached={onEndReached}
+          onEndReachedThreshold={0.5}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('supports contentContainerStyle prop', () => {
+    const data = createTestItems(3);
+
+    expect(() => {
+      render(
+        <AnimatedFlashList<TestItem>
+          data={data}
+          keyExtractor={defaultKeyExtractor}
+          renderItem={defaultRenderItem}
+          contentContainerStyle={{ padding: 16 }}
+          estimatedItemSize={80}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('re-renders when data changes', () => {
+    const data1 = createTestItems(2);
+    const data2 = createTestItems(4);
+
+    const { rerender, getByText, queryByText } = render(
+      <AnimatedFlashList<TestItem>
+        data={data1}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(getByText('Test Item 1')).toBeTruthy();
+    expect(getByText('Test Item 2')).toBeTruthy();
+    expect(queryByText('Test Item 3')).toBeNull();
+
+    rerender(
+      <AnimatedFlashList<TestItem>
+        data={data2}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={defaultRenderItem}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(getByText('Test Item 3')).toBeTruthy();
+    expect(getByText('Test Item 4')).toBeTruthy();
+  });
+
+  it('passes dragHandleProps when drag is enabled', () => {
+    const data = createTestItems(1);
+    let receivedDragHandleProps: unknown = null;
+
+    const renderItem = ({ item, dragHandleProps }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedDragHandleProps = dragHandleProps;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={renderItem}
+        dragEnabled
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(receivedDragHandleProps).not.toBeNull();
+    expect((receivedDragHandleProps as any).gesture).toBeDefined();
+  });
+
+  it('passes null dragHandleProps when drag is disabled', () => {
+    const data = createTestItems(1);
+    let receivedDragHandleProps: unknown = 'initial';
+
+    const renderItem = ({ item, dragHandleProps }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedDragHandleProps = dragHandleProps;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={renderItem}
+        dragEnabled={false}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(receivedDragHandleProps).toBeNull();
+  });
+
+  it('provides triggerExitAnimation function', () => {
+    const data = createTestItems(1);
+    let receivedTriggerExit: unknown = null;
+
+    const renderItem = ({
+      item,
+      triggerExitAnimation,
+    }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedTriggerExit = triggerExitAnimation;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashList<TestItem>
+        data={data}
+        keyExtractor={defaultKeyExtractor}
+        renderItem={renderItem}
+        estimatedItemSize={80}
+      />,
+    );
+
+    expect(typeof receivedTriggerExit).toBe('function');
+  });
+});