fix: allow scrolling the ScrollView from draggable items on web

[MatiPl01]

Description

Closes #545

On web, a Sortable.Grid / Sortable.Flex inside a scrollable container couldn't be scrolled when the gesture started over an item (or a Sortable.Touchable). Gesture Handler sets touch-action: none on web, so the browser never scrolls from that element. The only workaround was a drag handle + a plain Pressable.

Fix

Web-only, isolated in SortableGestureDetector.web (native is a plain passthrough; shared code is untouched):

• Relax touch-action to the scroll axis (pan-y / pan-x) so a swipe starting over an item scrolls the surrounding ScrollView.
• While an item is actively dragged, block native scroll (touchmove preventDefault) so the relaxed touch-action can't steal the drag.

Net: swipe to scroll, hold to drag. No change on native.

Reproduction

import { Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);

export default function Example() {
  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
  return (
    <Animated.ScrollView ref={scrollableRef}>
      <Sortable.Grid
        columns={3}
        data={DATA}
        rowGap={8}
        columnGap={8}
        scrollableRef={scrollableRef}
        renderItem={({ item }) => (
          <View style={{ height: 90, alignItems: 'center', justifyContent: 'center' }}>
            <Text>{item}</Text>
          </View>
        )}
      />
    </Animated.ScrollView>
  );
}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
react-native-sortables-docs	Ignored	Preview	Jun 28, 2026 9:22am

[MatiPl01]

🎉 This PR is included in version 1.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀