more reliable event handling between pan gesture and FlatList

src/components/CellRendererComponent.tsx

@@ -4,6 +4,7 @@ import {
   LayoutChangeEvent,
   MeasureLayoutOnSuccessCallback,
   StyleProp,
+  StyleSheet,
   ViewStyle,
 } from "react-native";
 import Animated, {
@@ -162,7 +163,11 @@ function CellRendererComponent<T>(props: Props<T>) {
           ? itemLayoutAnimation
           : undefined
       }
-      style={[props.style, baseStyle, animStyle]}
+      style={[
+        props.style,
+        baseStyle,
+        activeKey ? animStyle : styles.zeroTranslate,
+      ]}
       pointerEvents={activeKey ? "none" : "auto"}
     >
       <CellProvider isActive={isActive}>{children}</CellProvider>
@@ -172,6 +177,12 @@ function CellRendererComponent<T>(props: Props<T>) {
 
 export default typedMemo(CellRendererComponent);
 
+const styles = StyleSheet.create({
+  zeroTranslate: {
+    transform: [{ translateX: 0 }, { translateY: 0 }],
+  },
+});
+
 declare global {
   namespace NodeJS {
     interface Global {

src/components/DraggableFlatList.tsx

@@ -6,12 +6,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import {
-  ListRenderItem,
-  FlatListProps,
-  LayoutChangeEvent,
-  InteractionManager,
-} from "react-native";
+import { ListRenderItem, FlatListProps, LayoutChangeEvent } from "react-native";
 import {
   FlatList,
   Gesture,
@@ -64,6 +59,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
     keyToIndexRef,
     propsRef,
     animationConfigRef,
+    panRef,
   } = useRefs<T>();
   const {
     activeCellOffset,
@@ -119,9 +115,6 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
   if (dataHasChanged) {
     // When data changes make sure `activeKey` is nulled out in the same render pass
     activeKey = null;
-    InteractionManager.runAfterInteractions(() => {
-      reset();
-    });
   }
 
   useEffect(() => {
@@ -229,8 +222,7 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
       }
 
       onDragEnd?.({ from, to, data: newData });
-
-      setActiveKey(null);
+      reset();
     }
   );
 
@@ -273,9 +265,11 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
   const gestureDisabled = useSharedValue(false);
 
   const panGesture = Gesture.Pan()
+    .withRef(panRef)
     .onBegin((evt) => {
       gestureDisabled.value = disabled.value;
       if (gestureDisabled.value) return;
+      runOnJS(reset)();
       panGestureState.value = evt.state;
     })
     .onUpdate((evt) => {
@@ -395,7 +389,9 @@ function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
             keyExtractor={keyExtractor}
             onScroll={scrollHandler}
             scrollEventThrottle={16}
-            simultaneousHandlers={props.simultaneousHandlers}
+            simultaneousHandlers={([panRef] as React.Ref<any>[]).concat(
+              props.simultaneousHandlers ?? []
+            )}
             removeClippedSubviews={false}
           />
           {!!props.onScrollOffsetChange && (

src/context/refContext.tsx

@@ -1,7 +1,11 @@
 import React, { useContext, useEffect } from "react";
 import { useMemo, useRef } from "react";
-import { FlatList } from "react-native-gesture-handler";
-import Animated, { type SharedValue, useSharedValue, WithSpringConfig } from "react-native-reanimated";
+import { FlatList, GestureType } from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  WithSpringConfig,
+} from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import { DEFAULT_PROPS } from "../constants";
 import { useProps } from "./propsContext";
 import { CellData, DraggableFlatListProps } from "../types";
@@ -14,6 +18,7 @@ type RefContextValue<T> = {
   containerRef: React.RefObject<Animated.View>;
   flatlistRef: React.RefObject<FlatList<T>> | React.ForwardedRef<FlatList<T>>;
   scrollViewRef: React.RefObject<Animated.ScrollView>;
+  panRef: React.MutableRefObject<GestureType | undefined>;
 };
 const RefContext = React.createContext<RefContextValue<any> | undefined>(
   undefined
@@ -51,10 +56,11 @@ function useSetupRefs<T>({
   const propsRef = useRef(props);
   propsRef.current = props;
   const animConfig = useMemo(
-    () => ({
-      ...DEFAULT_PROPS.animationConfig,
-      ...animationConfig,
-    } as WithSpringConfig),
+    () =>
+      ({
+        ...DEFAULT_PROPS.animationConfig,
+        ...animationConfig,
+      } as WithSpringConfig),
     [animationConfig]
   );
 
@@ -69,6 +75,7 @@ function useSetupRefs<T>({
   const flatlistRefInternal = useRef<FlatList<T>>(null);
   const flatlistRef = flatListRefProp || flatlistRefInternal;
   const scrollViewRef = useRef<Animated.ScrollView>(null);
+  const panRef = useRef<GestureType | undefined>(undefined);
 
   // useEffect(() => {
   //   // This is a workaround for the fact that RN does not respect refs passed in
@@ -91,6 +98,7 @@ function useSetupRefs<T>({
       keyToIndexRef,
       propsRef,
       scrollViewRef,
+      panRef,
     }),
     []
   );