Fix scroll interactions

[m-bert]

Description

During development of web version we initially decided to set touchAction: none to all gesture handlers' views in order to avoid scrolling while gestures like pan are active. Now it turns out that because of this decision, components like FlatList or ScrollView may become useless when combined with some handlers (or, like in the issue mentioned below - Swipeable components).

This PR aims to fix that problem by replacing touchAction: none with e.preventDefault().

Fixes #2617

Test plan

Tested on:

• Draggable example
• Transformation example (with ScrollView and LoremIpsum)
  Modified code from issue

import React from 'react';
import { View, Text } from 'react-native';
import { FlatList, GestureHandlerRootView } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';

export default function Home() {
  type ItemProps = {
    item: {
      text: string;
    };
  };

  const data = Array.from({ length: 50 }, (_, i) => ({
    id: i,
    text: `Item ${i}`,
  }));

  const Item = ({ item }: ItemProps) => {
    return (
      <View style={{ margin: 10 }}>
        <Swipeable
          renderRightActions={() => (
            <View
              style={{
                justifyContent: 'center',
              }}>
              <Text style={{ color: 'white', textAlign: 'center' }}>
                Delete
              </Text>
            </View>
          )}>
          <View
            style={{
              height: 50,
              backgroundColor: 'white',
              justifyContent: 'center',
            }}>
            <Text>{item.text}</Text>
          </View>
        </Swipeable>
      </View>
    );
  };

  return (
    <GestureHandlerRootView>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Item item={item} />}
        style={{ maxHeight: 400 }}
      />
    </GestureHandlerRootView>
  );
}

[j-piasecki]

Looks like there still are some things left to iron out

https://github.com/software-mansion/react-native-gesture-handler/assets/21055725/1cb24eba-cf57-4911-897d-2168d170edf3

https://github.com/software-mansion/react-native-gesture-handler/assets/21055725/a12fb4da-658e-48da-96a3-68c738685bc3

https://github.com/software-mansion/react-native-gesture-handler/assets/21055725/73a84a8d-f182-43d9-9011-f3519335fe37

All captured on Android 13, Chrome 118.0.5993.111

[m-bert]

@j-piasecki I agree that there are some problems that should be fixed. However, I've checked the one with swipeable on main and it seems that it is already there, even without this PR. Could you please check if that's true?

[j-piasecki]

However, I've checked the one with swipeable on main and it seems that it is already there, even without this PR. Could you please check if that's true?

Works fine for me on the current main (8d3d5e0b7)

https://github.com/software-mansion/react-native-gesture-handler/assets/21055725/aaa5b43c-f061-4b4b-a91c-34265aa86bb2

[GuestInCorle]

@m-bert What's blocking this pull request from getting a review?

[j-piasecki]

iOS doesn't seem to work at all yet - all handlers are running simultaneously with scrolling the page and navigation gestures

[m-bert]

Hi @GuestInCorle!

Problems that @j-piasecki described seem to affect both platforms, Android and iOS.

I'm not sure about the navigation part and I have yet to check that. However, most of the issues seem to originate from default minDistance in PanGestureHandler (which right now is set to 15px, see this line). By manipulating this value I was able to achieve what I think is the solution that we are looking for.

[m-bert]

This PR was superseded by #2788, followed by #2794.