react-native-reorderable-list 0.13.0 → 0.14.0

package/src/components/{ReorderableListCore/useReorderableListCore.ts → ReorderableListCore.tsx}

@@ -1,14 +1,18 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {
+  CellRendererProps,
   FlatList,
+  FlatListProps,
   LayoutChangeEvent,
+  Platform,
   ScrollView,
-  unstable_batchedUpdates,
 } from 'react-native';
 
 import {
   Gesture,
+  GestureDetector,
   GestureUpdateEvent,
+  NativeGesture,
   PanGestureHandlerEventPayload,
   State,
 } from 'react-native-gesture-handler';
@@ -16,87 +20,88 @@ import Animated, {
   AnimatedRef,
   Easing,
   SharedValue,
+  measure,
   runOnJS,
   runOnUI,
   scrollTo,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useDerivedValue,
   useSharedValue,
   withDelay,
   withTiming,
 } from 'react-native-reanimated';
 
+import {ReorderableListContext} from '../contexts';
+import {ReorderableListProps, ReorderableListState} from '../types';
 import {
+  AUTOSCROLL_CONFIG,
   OPACITY_ANIMATION_CONFIG_DEFAULT,
   SCALE_ANIMATION_CONFIG_DEFAULT,
-} from './animationDefaults';
-import {AUTOSCROLL_CONFIG} from './autoscrollConfig';
-import {
-  ReorderableListCellAnimations,
-  ReorderableListDragEndEvent,
-  ReorderableListDragStartEvent,
-  ReorderableListIndexChangeEvent,
-  ReorderableListState,
-} from '../../types';
-import type {ReorderableListReorderEvent} from '../../types';
-
-const version = React.version.split('.');
-const hasAutomaticBatching = version.length
-  ? parseInt(version[0], 10) >= 18
-  : false;
-
-interface UseReorderableListCoreArgs<T> {
-  ref: React.ForwardedRef<FlatList<T>>;
-  autoscrollThreshold: number;
-  autoscrollThresholdOffset: {top?: number; bottom?: number} | undefined;
-  autoscrollSpeedScale: number;
-  autoscrollDelay: number;
-  autoscrollActivationDelta: number;
-  animationDuration: number;
-  onReorder: (event: ReorderableListReorderEvent) => void;
-  onDragStart?: (event: ReorderableListDragStartEvent) => void;
-  onDragEnd?: (event: ReorderableListDragEndEvent) => void;
-  onIndexChange?: (event: ReorderableListIndexChangeEvent) => void;
-  onLayout?: (event: LayoutChangeEvent) => void;
+} from './constants';
+import {ReorderableListCell} from './ReorderableListCell';
+
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList,
+) as unknown as <T>(
+  props: FlatListProps<T> & {ref?: React.Ref<FlatList<T>>},
+) => React.ReactElement;
+
+interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
+  // Not optional but undefined to force passing the prop.
   scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
+  scrollViewPageY: SharedValue<number> | undefined;
   scrollViewHeightY: SharedValue<number> | undefined;
   scrollViewScrollOffsetY: SharedValue<number> | undefined;
   scrollViewScrollEnabled: SharedValue<boolean> | undefined;
-  initialScrollEnabled: boolean | undefined;
+  outerScrollGesture: NativeGesture | undefined;
   initialScrollViewScrollEnabled: boolean | undefined;
-  nestedScrollable: boolean | undefined;
-  cellAnimations: ReorderableListCellAnimations | undefined;
-  shouldUpdateActiveItem: boolean | undefined;
-  panEnabled: boolean;
-  panActivateAfterLongPress: number | undefined;
+  scrollable: boolean | undefined;
+  scrollEnabled: boolean | undefined;
 }
 
-export const useReorderableListCore = <T>({
-  ref,
-  autoscrollThreshold,
-  autoscrollThresholdOffset,
-  autoscrollSpeedScale,
-  autoscrollDelay,
-  autoscrollActivationDelta,
-  animationDuration,
-  onReorder,
-  onDragStart,
-  onDragEnd,
-  onLayout,
-  onIndexChange,
-  scrollViewContainerRef,
-  scrollViewHeightY,
-  scrollViewScrollOffsetY,
-  scrollViewScrollEnabled,
-  initialScrollEnabled,
-  initialScrollViewScrollEnabled,
-  nestedScrollable,
-  cellAnimations,
-  shouldUpdateActiveItem,
-  panActivateAfterLongPress,
-  panEnabled,
-}: UseReorderableListCoreArgs<T>) => {
+const ReorderableListCore = <T,>(
+  {
+    autoscrollThreshold = 0.1,
+    autoscrollThresholdOffset,
+    autoscrollSpeedScale = 1,
+    autoscrollDelay = AUTOSCROLL_CONFIG.delay,
+    autoscrollActivationDelta = 5,
+    animationDuration = 200,
+    onLayout,
+    onReorder,
+    onScroll,
+    onDragStart,
+    onDragEnd,
+    onIndexChange,
+    scrollViewContainerRef,
+    scrollViewPageY,
+    scrollViewHeightY,
+    scrollViewScrollOffsetY,
+    scrollViewScrollEnabled,
+    scrollable,
+    outerScrollGesture,
+    cellAnimations,
+    shouldUpdateActiveItem,
+    panGesture,
+    panEnabled = true,
+    panActivateAfterLongPress,
+    data,
+    ...rest
+  }: ReorderableListCoreProps<T>,
+  ref: React.ForwardedRef<FlatList<T>>,
+) => {
+  // FlatList will default to true if we pass explicitly undefined,
+  // but internally we would treat it as false, so we force true.
+  const initialScrollEnabled =
+    typeof rest.scrollEnabled === 'undefined' ? true : rest.scrollEnabled;
+  const initialScrollViewScrollEnabled =
+    typeof rest.initialScrollViewScrollEnabled === 'undefined'
+      ? true
+      : rest.initialScrollViewScrollEnabled;
+
   const flatListRef = useAnimatedRef<FlatList>();
   const [activeIndex, setActiveIndex] = useState(-1);
   const scrollEnabled = useSharedValue(initialScrollEnabled);
@@ -107,7 +112,7 @@ export const useReorderableListCore = <T>({
   const startItemDragCenterY = useSharedValue<number>(0);
   const flatListScrollOffsetY = useSharedValue(0);
   const flatListHeightY = useSharedValue(0);
-  const nestedFlatListPositionY = useSharedValue(0);
+  const flatListPageY = useSharedValue(0);
   // The scroll y translation of the list since drag start
   const dragScrollTranslationY = useSharedValue(0);
   // The initial scroll offset y of the list on drag start
@@ -119,6 +124,9 @@ export const useReorderableListCore = <T>({
   const draggedHeight = useSharedValue(0);
   const itemOffset = useSharedValue<number[]>([]);
   const itemHeight = useSharedValue<number[]>([]);
+  // We need to track data length since itemOffset and itemHeight might contain more data than we need.
+  // e.g. items are removed from the list, in which case layout data for those items is set to 0.
+  const itemCount = useSharedValue(data.length);
   const autoscrollTrigger = useSharedValue(-1);
   const lastAutoscrollTrigger = useSharedValue(-1);
   const dragY = useSharedValue(0);
@@ -135,11 +143,41 @@ export const useReorderableListCore = <T>({
   const dragDirection = useSharedValue(0);
   const lastDragDirectionPivot = useSharedValue<number | null>(null);
   const autoscrollDelta = useSharedValue(autoscrollActivationDelta);
+  const prevItemCount = useRef(data.length);
+
+  // Position of the list relative to the scroll container
+  const nestedFlatListPositionY = useDerivedValue(
+    () => flatListPageY.value - (scrollViewPageY?.value || 0),
+  );
 
   useEffect(() => {
     duration.value = animationDuration;
     autoscrollDelta.value = autoscrollActivationDelta;
-  }, [duration, animationDuration, autoscrollDelta, autoscrollActivationDelta]);
+  }, [
+    duration,
+    animationDuration,
+    autoscrollDelta,
+    autoscrollActivationDelta,
+    itemCount,
+  ]);
+
+  useEffect(() => {
+    itemCount.value = data.length;
+
+    // This could be done unmount of the removed cell, however it leads to bugs.
+    // Surprisingly the unmount gets sometimes called after the onLayout event
+    // setting all layout data to 0 and breaking the list. So we solve it like this.
+    if (data.length < prevItemCount.current) {
+      for (let i = data.length; i < prevItemCount.current; i++) {
+        runOnUI(() => {
+          itemHeight.value[i] = 0;
+          itemOffset.value[i] = 0;
+        })();
+      }
+    }
+
+    prevItemCount.current = data.length;
+  }, [data.length, itemHeight, itemOffset, itemCount]);
 
   const listContextValue = useMemo(
     () => ({
@@ -234,8 +272,10 @@ export const useReorderableListCore = <T>({
 
   const panGestureHandler = useMemo(
     () =>
-      Gesture.Pan()
+      (panGesture || Gesture.Pan())
         .onBegin(e => {
+          'worklet';
+
           // prevent new dragging until item is completely released
           if (state.value === ReorderableListState.IDLE) {
             startY.value = e.y;
@@ -246,6 +286,8 @@ export const useReorderableListCore = <T>({
           }
         })
         .onUpdate(e => {
+          'worklet';
+
           if (state.value === ReorderableListState.DRAGGED) {
             setDragDirection(e);
           }
@@ -262,9 +304,18 @@ export const useReorderableListCore = <T>({
             gestureState.value = e.state;
           }
         })
-        .onEnd(e => (gestureState.value = e.state))
-        .onFinalize(e => (gestureState.value = e.state)),
+        .onEnd(e => {
+          'worklet';
+
+          gestureState.value = e.state;
+        })
+        .onFinalize(e => {
+          'worklet';
+
+          gestureState.value = e.state;
+        }),
     [
+      panGesture,
       state,
       startY,
       currentY,
@@ -278,7 +329,7 @@ export const useReorderableListCore = <T>({
     ],
   );
 
-  const panGestureHandlerWithOptions = useMemo(() => {
+  const panGestureHandlerWithPropOptions = useMemo(() => {
     if (typeof panActivateAfterLongPress === 'number') {
       panGestureHandler.activateAfterLongPress(panActivateAfterLongPress);
     }
@@ -291,8 +342,9 @@ export const useReorderableListCore = <T>({
   }, [panActivateAfterLongPress, panEnabled, panGestureHandler]);
 
   const gestureHandler = useMemo(
-    () => Gesture.Simultaneous(Gesture.Native(), panGestureHandlerWithOptions),
-    [panGestureHandlerWithOptions],
+    () =>
+      Gesture.Simultaneous(Gesture.Native(), panGestureHandlerWithPropOptions),
+    [panGestureHandlerWithPropOptions],
   );
 
   const setScrollEnabled = useCallback(
@@ -354,15 +406,7 @@ export const useReorderableListCore = <T>({
     runOnUI(resetSharedValues)();
 
     if (fromIndex !== toIndex) {
-      const updateState = () => {
-        onReorder({from: fromIndex, to: toIndex});
-      };
-
-      if (!hasAutomaticBatching) {
-        unstable_batchedUpdates(updateState);
-      } else {
-        updateState();
-      }
+      onReorder({from: fromIndex, to: toIndex});
     }
   };
 
@@ -414,7 +458,7 @@ export const useReorderableListCore = <T>({
     const currentHeight = itemHeight.value[currentIndex.value];
     const currentCenter = currentOffset + currentHeight * 0.5;
 
-    const max = itemOffset.value.length;
+    const max = itemCount.value;
     const possibleIndex =
       relativeDragCenterY < currentCenter
         ? Math.max(0, currentIndex.value - 1)
@@ -441,6 +485,7 @@ export const useReorderableListCore = <T>({
   }, [
     currentIndex,
     currentItemDragCenterY,
+    itemCount,
     itemOffset,
     itemHeight,
     flatListScrollOffsetY,
@@ -543,7 +588,7 @@ export const useReorderableListCore = <T>({
     },
   );
 
-  const calculateHiddenArea = useCallback(() => {
+  const computeHiddenArea = useCallback(() => {
     'worklet';
     if (!scrollViewScrollOffsetY || !scrollViewHeightY) {
       return {top: 0, bottom: 0};
@@ -569,103 +614,121 @@ export const useReorderableListCore = <T>({
     flatListHeightY,
   ]);
 
-  const calculateThresholdArea = useCallback(
-    (hiddenArea: {top: number; bottom: number}) => {
-      'worklet';
-      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
-      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
-      const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-      const visibleHeight =
-        flatListHeightY.value -
-        (hiddenArea.top + hiddenArea.bottom) -
-        (offsetTop + offsetBottom);
+  const computeThresholdArea = useCallback(() => {
+    'worklet';
 
-      const area = visibleHeight * threshold;
-      const top = area + offsetTop;
-      const bottom = flatListHeightY.value - area - offsetBottom;
+    const hiddenArea = computeHiddenArea();
 
-      return {top, bottom};
-    },
-    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
-  );
+    const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+    const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
+    const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
+    const visibleHeight =
+      flatListHeightY.value -
+      (hiddenArea.top + hiddenArea.bottom) -
+      (offsetTop + offsetBottom);
 
-  const calculateThresholdAreaParent = useCallback(
-    (hiddenArea: {top: number; bottom: number}) => {
-      'worklet';
-      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
-      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
-      const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-
-      const area = flatListHeightY.value * threshold;
-      const top = area + offsetTop;
-      const bottom = flatListHeightY.value - area - offsetBottom;
-
-      // if the hidden area is 0 then we don't have a threshold area
-      // we might have floating errors like 0.0001 which we should ignore
-      return {
-        top: hiddenArea.top > 0.1 ? top + hiddenArea.top : 0,
-        bottom: hiddenArea.bottom > 0.1 ? bottom - hiddenArea.bottom : 0,
-      };
-    },
-    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
-  );
+    const area = visibleHeight * threshold;
+    const top = area + offsetTop;
+    const bottom = flatListHeightY.value - area - offsetBottom;
+
+    return {top, bottom};
+  }, [
+    computeHiddenArea,
+    autoscrollThreshold,
+    autoscrollThresholdOffset,
+    flatListHeightY,
+  ]);
+
+  const computeContainerThresholdArea = useCallback(() => {
+    'worklet';
+    if (!scrollViewHeightY) {
+      return {top: -Infinity, bottom: Infinity};
+    }
 
-  const shouldScrollParent = useCallback(
+    const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+    const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
+    const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
+    const visibleHeight = scrollViewHeightY.value - (offsetTop + offsetBottom);
+
+    const area = visibleHeight * threshold;
+    const top = area + offsetTop;
+    const bottom = visibleHeight - area - offsetBottom;
+
+    return {top, bottom};
+  }, [autoscrollThreshold, autoscrollThresholdOffset, scrollViewHeightY]);
+
+  const shouldScrollContainer = useCallback(
     (y: number) => {
       'worklet';
-      const hiddenArea = calculateHiddenArea();
-      const thresholdAreaParent = calculateThresholdAreaParent(hiddenArea);
+      const containerThresholdArea = computeContainerThresholdArea();
+      const nestedListHiddenArea = computeHiddenArea();
 
-      // we might have floating errors like 0.0001 which we should ignore
+      // We should scroll the container if there's a hidden part of the nested list.
+      // We might have floating errors like 0.0001 which we should ignore.
       return (
-        (hiddenArea.top > 0.1 && y <= thresholdAreaParent.top) ||
-        (hiddenArea.bottom > 0.1 && y >= thresholdAreaParent.bottom)
+        (nestedListHiddenArea.top > 0.01 && y <= containerThresholdArea.top) ||
+        (nestedListHiddenArea.bottom > 0.01 &&
+          y >= containerThresholdArea.bottom)
       );
     },
-    [calculateHiddenArea, calculateThresholdAreaParent],
+    [computeHiddenArea, computeContainerThresholdArea],
   );
 
-  const scrollDirection = useCallback(
-    (y: number) => {
-      'worklet';
-      const hiddenArea = calculateHiddenArea();
+  const getRelativeContainerY = useCallback(() => {
+    'worklet';
 
-      if (shouldScrollParent(y)) {
-        const thresholdAreaParent = calculateThresholdAreaParent(hiddenArea);
-        if (y <= thresholdAreaParent.top) {
-          return -1;
-        }
+    return (
+      currentY.value +
+      nestedFlatListPositionY.value -
+      scrollViewDragInitialScrollOffsetY.value
+    );
+  }, [currentY, nestedFlatListPositionY, scrollViewDragInitialScrollOffsetY]);
 
-        if (y >= thresholdAreaParent.bottom) {
-          return 1;
-        }
+  const getRelativeListY = useCallback(() => {
+    'worklet';
 
-        return 0;
-      } else if (nestedScrollable) {
-        const thresholdArea = calculateThresholdArea(hiddenArea);
-        if (y <= thresholdArea.top) {
-          return -1;
-        }
+    return currentY.value + scrollViewDragScrollTranslationY.value;
+  }, [currentY, scrollViewDragScrollTranslationY]);
 
-        if (y >= thresholdArea.bottom) {
-          return 1;
-        }
+  const scrollDirection = useCallback(() => {
+    'worklet';
+
+    const relativeContainerY = getRelativeContainerY();
+    if (shouldScrollContainer(relativeContainerY)) {
+      const containerThresholdArea = computeContainerThresholdArea();
+      if (relativeContainerY <= containerThresholdArea.top) {
+        return -1;
       }
 
-      return 0;
-    },
-    [
-      nestedScrollable,
-      shouldScrollParent,
-      calculateHiddenArea,
-      calculateThresholdArea,
-      calculateThresholdAreaParent,
-    ],
-  );
+      if (relativeContainerY >= containerThresholdArea.bottom) {
+        return 1;
+      }
+    } else if (scrollable) {
+      const relativeListY = getRelativeListY();
+      const thresholdArea = computeThresholdArea();
+
+      if (relativeListY <= thresholdArea.top) {
+        return -1;
+      }
+
+      if (relativeListY >= thresholdArea.bottom) {
+        return 1;
+      }
+    }
+
+    return 0;
+  }, [
+    shouldScrollContainer,
+    computeThresholdArea,
+    computeContainerThresholdArea,
+    getRelativeContainerY,
+    getRelativeListY,
+    scrollable,
+  ]);
 
   useAnimatedReaction(
-    () => currentY.value + scrollViewDragScrollTranslationY.value,
-    y => {
+    () => currentY.value,
+    () => {
       if (
         state.value === ReorderableListState.DRAGGED ||
         state.value === ReorderableListState.AUTOSCROLL
@@ -676,7 +739,7 @@ export const useReorderableListCore = <T>({
         // 1. Within the threshold area (top or bottom of list)
         // 2. Have dragged in the same direction as the scroll
         // 3. Not already in autoscroll mode
-        if (dragDirection.value === scrollDirection(y)) {
+        if (dragDirection.value === scrollDirection()) {
           // When the first two conditions are met and it's already in autoscroll mode, we let it continue (no-op)
           if (state.value !== ReorderableListState.AUTOSCROLL) {
             state.value = ReorderableListState.AUTOSCROLL;
@@ -697,9 +760,8 @@ export const useReorderableListCore = <T>({
         autoscrollTrigger.value !== lastAutoscrollTrigger.value &&
         state.value === ReorderableListState.AUTOSCROLL
       ) {
-        let y = currentY.value + scrollViewDragScrollTranslationY.value;
         const autoscrollIncrement =
-          scrollDirection(y) *
+          dragDirection.value *
           AUTOSCROLL_CONFIG.increment *
           autoscrollSpeedScale;
 
@@ -708,7 +770,13 @@ export const useReorderableListCore = <T>({
           let listRef =
             flatListRef as unknown as AnimatedRef<Animated.ScrollView>;
 
-          if (shouldScrollParent(y) && scrollViewScrollOffsetY) {
+          // Checking on every autoscroll whether to scroll the container,
+          // this allows to smoothly pass the scroll from the container to the nested list
+          // without any gesture input.
+          if (
+            scrollViewScrollOffsetY &&
+            shouldScrollContainer(getRelativeContainerY())
+          ) {
             scrollOffset = scrollViewScrollOffsetY.value;
             listRef =
               scrollViewContainerRef as unknown as AnimatedRef<Animated.ScrollView>;
@@ -750,7 +818,7 @@ export const useReorderableListCore = <T>({
     }
   });
 
-  // parent scroll handler
+  // container scroll handler
   useAnimatedReaction(
     () => scrollViewScrollOffsetY?.value,
     value => {
@@ -826,35 +894,104 @@ export const useReorderableListCore = <T>({
 
   const handleFlatListLayout = useCallback(
     (e: LayoutChangeEvent) => {
-      nestedFlatListPositionY.value = e.nativeEvent.layout.y;
       flatListHeightY.value = e.nativeEvent.layout.height;
 
+      // If nested in a scroll container.
+      if (scrollViewScrollOffsetY) {
+        // Timeout fixes a bug where measure returns height 0.
+        setTimeout(() => {
+          runOnUI(() => {
+            const measurement = measure(flatListRef);
+            if (!measurement) {
+              return;
+            }
+
+            flatListPageY.value = measurement.pageY;
+          })();
+        }, 100);
+      }
+
       onLayout?.(e);
     },
-    [nestedFlatListPositionY, flatListHeightY, onLayout],
+    [
+      flatListRef,
+      flatListPageY,
+      flatListHeightY,
+      scrollViewScrollOffsetY,
+      onLayout,
+    ],
   );
 
-  const handleRef = (value: FlatList<T>) => {
-    flatListRef(value);
+  const handleRef = useCallback(
+    (value: FlatList<T>) => {
+      flatListRef(value);
+
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref) {
+        ref.current = value;
+      }
+    },
+    [flatListRef, ref],
+  );
 
-    if (typeof ref === 'function') {
-      ref(value);
-    } else if (ref) {
-      ref.current = value;
+  const combinedGesture = useMemo(() => {
+    // android is able to handle nested scroll view, but not the full height ones like iOS
+    if (outerScrollGesture && !(Platform.OS === 'android' && scrollable)) {
+      return Gesture.Simultaneous(outerScrollGesture, gestureHandler);
     }
-  };
 
-  return {
-    gestureHandler,
+    return gestureHandler;
+  }, [scrollable, outerScrollGesture, gestureHandler]);
+
+  const composedScrollHandler = useComposedEventHandler([
     handleScroll,
-    handleFlatListLayout,
-    handleRef,
-    startDrag,
-    listContextValue,
-    itemOffset,
-    itemHeight,
-    draggedIndex,
-    dragY,
-    duration,
-  };
+    onScroll || null,
+  ]);
+
+  const renderAnimatedCell = useCallback(
+    ({cellKey, ...props}: CellRendererProps<T>) => (
+      <ReorderableListCell
+        {...props}
+        // forces remount with key change on reorder
+        key={`${cellKey}+${props.index}`}
+        itemOffset={itemOffset}
+        itemHeight={itemHeight}
+        dragY={dragY}
+        draggedIndex={draggedIndex}
+        animationDuration={duration}
+        startDrag={startDrag}
+      />
+    ),
+    [itemOffset, itemHeight, dragY, draggedIndex, duration, startDrag],
+  );
+
+  return (
+    <ReorderableListContext.Provider value={listContextValue}>
+      <GestureDetector gesture={combinedGesture}>
+        <AnimatedFlatList
+          {...rest}
+          ref={handleRef}
+          data={data}
+          CellRendererComponent={renderAnimatedCell}
+          onLayout={handleFlatListLayout}
+          onScroll={composedScrollHandler}
+          scrollEventThrottle={1}
+          horizontal={false}
+          removeClippedSubviews={false}
+          numColumns={1}
+        />
+      </GestureDetector>
+    </ReorderableListContext.Provider>
+  );
 };
+
+const MemoizedReorderableListCore = React.memo(
+  React.forwardRef(ReorderableListCore),
+) as <T>(
+  props: ReorderableListCoreProps<T> & {
+    ref?: React.ForwardedRef<FlatList<T> | null>;
+  },
+) => React.ReactElement;
+
+export {MemoizedReorderableListCore as ReorderableListCore};