Is it possible to cancel dragging when tabview switching started?

[bezenson]

Hello 👋!

I am using react-native-tab-view. Inside it I have a react-native-draggable-flatlist.

The problem is that when I hold finger to start dragging and then swipe left - item still scaled until I tap on list again. onDragEnd or onRelease events are not called. How can I cancel dragging when tab switching started?

Here is short video:

https://github.com/computerjazz/react-native-draggable-flatlist/assets/3227120/7749496a-e665-4f93-860e-3cef163e4124

Setup is very basic:

const TasksList: FC<TasksListProps> = ({ route }) => {
  const [dragging, setDragging] = useState(false);

  const onDragBegin = useCallback(() => setDragging(true), []);
  const onDragEnd = useCallback(
    ({ data }: DragEndParams<ListItem>) => {
      setDragging(false);
    },
    [todosStore, route.key],
  );
  // ... other staff
  return (
    <>
      <DraggableFlatList
        activationDistance={20}
        containerStyle={styles.container}
        contentContainerStyle={styles.contentContainer}
        data={todos}
        keyExtractor={keyExtractor}
        onDragBegin={onDragBegin}
        onDragEnd={onDragEnd}
        refreshControl={
          <RefreshControl
            enabled={!dragging}
            refreshing={todosStore.fetching || listsStore.fetching}
            onRefresh={onRefresh}
          />
        }
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
        ListEmptyComponent={listEmptyComponent}
        ListFooterComponent={listFooterComponent}
      />
    </>
  );
};

[inho1019]

I solved the problem by setting scroll's enable to false only while dragging.

[bezenson]

@inho1019 Sorry, but which scroll's "enable" prop? Could you provide small example please?

[inho1019]

@bezenson Its horizontal scrolling looks like appears to be the pagingEnabled function of ScrollView. I solved the problem by setting the scrollEnabled state of the ScrollView to false while dragging the item.

[bezenson]

@inho1019 I've tried to add scrollEnabled={false} to <DraggableFlatList> component but it makes no any effect