diff --git a/src/components/CellRendererComponent.tsx b/src/components/CellRendererComponent.tsx index e4e861a6..d7b833b7 100644 --- a/src/components/CellRendererComponent.tsx +++ b/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(props: Props) { ? itemLayoutAnimation : undefined } - style={[props.style, baseStyle, animStyle]} + style={[ + props.style, + baseStyle, + activeKey ? animStyle : styles.zeroTranslate, + ]} pointerEvents={activeKey ? "none" : "auto"} > {children} @@ -172,6 +177,12 @@ function CellRendererComponent(props: Props) { export default typedMemo(CellRendererComponent); +const styles = StyleSheet.create({ + zeroTranslate: { + transform: [{ translateX: 0 }, { translateY: 0 }], + }, +}); + declare global { namespace NodeJS { interface Global { diff --git a/src/components/DraggableFlatList.tsx b/src/components/DraggableFlatList.tsx index 7c88afc5..181dd9f6 100644 --- a/src/components/DraggableFlatList.tsx +++ b/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(props: DraggableFlatListProps) { keyToIndexRef, propsRef, animationConfigRef, + panRef, } = useRefs(); const { activeCellOffset, @@ -119,9 +115,6 @@ function DraggableFlatListInner(props: DraggableFlatListProps) { 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(props: DraggableFlatListProps) { } onDragEnd?.({ from, to, data: newData }); - - setActiveKey(null); + reset(); } ); @@ -273,9 +265,11 @@ function DraggableFlatListInner(props: DraggableFlatListProps) { 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(props: DraggableFlatListProps) { keyExtractor={keyExtractor} onScroll={scrollHandler} scrollEventThrottle={16} - simultaneousHandlers={props.simultaneousHandlers} + simultaneousHandlers={([panRef] as React.Ref[]).concat( + props.simultaneousHandlers ?? [] + )} removeClippedSubviews={false} /> {!!props.onScrollOffsetChange && ( diff --git a/src/context/refContext.tsx b/src/context/refContext.tsx index 49bee062..8422bb9d 100644 --- a/src/context/refContext.tsx +++ b/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 = { containerRef: React.RefObject; flatlistRef: React.RefObject> | React.ForwardedRef>; scrollViewRef: React.RefObject; + panRef: React.MutableRefObject; }; const RefContext = React.createContext | undefined>( undefined @@ -51,10 +56,11 @@ function useSetupRefs({ 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({ const flatlistRefInternal = useRef>(null); const flatlistRef = flatListRefProp || flatlistRefInternal; const scrollViewRef = useRef(null); + const panRef = useRef(undefined); // useEffect(() => { // // This is a workaround for the fact that RN does not respect refs passed in @@ -91,6 +98,7 @@ function useSetupRefs({ keyToIndexRef, propsRef, scrollViewRef, + panRef, }), [] );