How to prevent draggable items from cancelling scroll? (Web)

[xvvvyz]

I have Sortable.Flex inside a ScrollView and when I initiate scrolling from empty space outside of a draggable item, I am able to scroll. However, if I try to start scrolling and my finger happens to land on a draggable item, I can't scroll. It works fine on iOS.

Any ideas?

[MatiPl01]

I have Sortable.Flex inside a ScrollView and when I initiate scrolling from empty space outside of a draggable item, I am able to scroll. However, if I try to start scrolling and my finger happens to land on a draggable item, I can't scroll. It works fine on iOS.

Any ideas?

Can you share your code? I am pretty sure that I tested if it works and it worked fine before. Do you set the dragActivationDelay to 0 or other low value? You can try setting it to something bigger, e.g. 500 ms and see if it works.

[xvvvyz]

Really appreciate the quick response. Great library btw, only one I found that wasn't super janky.

Here's the rough layout:

<ScrollView
  horizontal
  keyboardShouldPersistTaps="always"
  ref={scrollViewRef}
  showsHorizontalScrollIndicator={false}
>
  <View className="h-10">
    <Sortable.Flex
      autoScrollActivationOffset={50}
      autoScrollDirection="horizontal"
      flexWrap="nowrap"
      gap={12}
      itemEntering={null}
      itemExiting={null}
      onDragEnd={reorderLogTags}
      scrollableRef={scrollViewRef}
    >
      {tags.data.map((tag) => (
        <View className="w-36 flex-row rounded-xl bg-input" key={tag.id}>
          <Checkbox
            checked={isSelected}
            className="size-10"
            onCheckedChange={() => toggleLogTag({ id, isSelected, logId })}
          />
          <View className="group relative flex-1">
            <Input
              autoCapitalize="none"
              autoComplete="name"
              autoCorrect={false}
              className="bg-transparent focus:pr-10"
              defaultValue={name}
              maxLength={16}
              multiline={false}
              onChangeText={(name) => updateLogTag({ id: id, name })}
              placeholder="Tag"
              returnKeyType="done"
              size="sm"
            />
            <Button
              accessibilityHint="Removes this tag"
              accessibilityLabel={`Remove ${name}`}
              className="size-8"
              onPress={() => sheetManager.open('tag-delete', id)}
              size="icon"
              variant="ghost"
              wrapperClassName="rounded-full absolute right-1 top-1"
            >
              <Icon className="text-muted-foreground" icon={X} size={20} />
            </Button>
          </View>
        </View>
      ))}
    </Sortable.Flex>
  </View>
</ScrollView>

I just tried it with a custom drag handle and that seems to resolve the issue so if you don't have time to dive into this more no worries.

[MatiPl01]

One more question, this doesnt work on the web browser used on the mobile device? You said that it works fine on iOS but added (Web) to the discussion title. Please clarify which platforms I should test.

[xvvvyz]

iOS native was working, iOS Safari (and the DuckDuckGo browser) were not working as expected.

[MatiPl01]

Ok, in such a case this is likely an issue with the browser compatibility with the react-native-gesture-handler library. I didn't test if it works on less popular, non chromium-based browsers. I will try to test it and report an issue to the gesture handler team if it turns out to be a compatibility problem.

[MatiPl01]

Update: I talked with a maintainer of the react-native-gesture-handler library and he said that scroll and gesture detection on web on mobile devices is flaky. They added the touchAction property for that case to enable scrolling while handling another gesture but it introduces another issue in this library, as I cannot conditionally disable scrolling, when the user starts dragging an item and scroll should not longer be triggered.

I think that this problems is more complex than it initially seemed to be. If a solution with the custom handle works, please stick to it for now. I may try to look into what is going on wrong on web on mobile devices but I can't promise that I will figure out a better solution.

[xvvvyz]

Interesting. Custom handle is working great so all good from my perspective. Thanks for looking into it.