reactjs - React Native Item jumping to previous drag endpoint - Stack Overflow

admin管理员组

文章数量:1332352

Right now, I am building a draggable flatlist with sticky headers. I am using the react-native draggable-flatlist library. For some reason, if I drag or swipe my finger on the screen, then I grab an item to drag, it will make the item jump to the endpoint of the previous drag.

Here's the relevant code:

<DraggableFlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item, drag, isActive }: RenderItemParams<any>) => (
        <ListItem item={item} drag={drag} isActive={isActive} />
    )}
    onDragEnd={handleDragEnd}
    // Resolve Gesture Conflicts
    dragItemOverflow={false} // Prevent the drag item from exceeding its bounds
    activationDistance={0} // Reduce accidental drag activations
    // Smooth Animations
    animationConfig={{
        damping: 30,
        stiffness: 150,
        mass: 1,
        overshootClamping: true,
    }}
/>

const handleDragEnd = useCallback(({ data: newData }: { data: any[] }) => {
    setData(newData); // Update the state with the new data order
}, []);

const ListItem = memo(({ item, drag, isActive }: any) => {
    return (
        <TouchableOpacity
            onPressIn={drag}
            disabled={isActive}
            style={[
                styles.item,
                isActive ? styles.activeItem : null,
            ]}
        >
        <Text style={styles.itemText}>{item.title || item.name}</Text>
        <Image
            source={require('../assets/images/slideIcon.webp')}
            style={styles.dragIcon}
        />
    </TouchableOpacity>
    );
});

I have tried multiple attempts at altering the settings on the draggable flatlist component, but nothing worked.

本文标签： reactjsReact Native Item jumping to previous drag endpointStack Overflow