onPressIn not working in android for drag immediately

[oneHamidreza]

Hello, I want to use a TouchableOpacity as drag handler. in Android when FlatList doesn't need to scroll, drag works with onPressIn but when size of data increases and FlatList needs to scroll, onPressIn not working and when I touch drag zone, flatList scroll avoid me to drag immediately without LongPress.

in iOS, everything is working good.

and my code is like below:

const Item = ({title, drag, onDragHandlerPressIn, onDragHandlerPressOut}): Node => {
  return (
    <View style={{flexDirection: 'row'}}>
      <Text>{title}</Text>
      <TouchableOpacity
        style={{height: 70}}
        onPressIn={() => {
          onDragHandlerPressIn();
          drag();
        }}
        onPressOut={onDragHandlerPressOut}
        activeOpacity={1}>
        <Text>Drag Me</Text>
      </TouchableOpacity>
    </View>
  );
};

<DraggableFlatList
        scrollEnabled={scrollEnabled}
        data={data}
        keyExtractor={(item, index) => `key::${index}`}
        onDragEnd={(newData) => {
          setScrollEnabled(true);
          if (newData.from === newData.to)
            return;
          setData(newData.data);
        }}
        renderItem={({item, drag}) => (
          <ScaleDecorator>
            <OpacityDecorator activeOpacity={1}>
              <ShadowDecorator>
                <Item
                  drag={drag}
                  onDragHandlerPressIn={() => setScrollEnabled(false)}
                  onDragHandlerPressOut={() => setScrollEnabled(true)}
                  title={item}
                />
              </ShadowDecorator>
            </OpacityDecorator>
          </ScaleDecorator>
        )}
      />

Platform & Dependencies "react": "17.0.2", "react-native": "0.66.3", "react-native-draggable-flatlist": "^3.0.3", "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.4"

[computerjazz]

I don't fully understand the problem, can you post a snack? onPressIn on android seems to be working as expected in the snack I created here: https://snack.expo.dev/@computerjazz/rndfl-onpressin

[halaei]

I am testing it using expo. I don't know if my issue is the same as @oneHamidreza's, but both Android and iOS have issues when I press on a number immediately after scrolling the list down/up. On Android, I can't select the item on press, so I have to long press the item. Also the selected item sometimes goes behind the other items, instead of above.

https://user-images.githubusercontent.com/7089140/144453277-a8fd5117-c6f5-48d7-860d-a525ed7ab345.mp4

On iOS, same issue happens sometimes. Moreover, sometimes the selected item only moves a few pixels and after moving my finger away from the screen, the item is still in the moved position and the next touch, everywhere in the screen, moves the previously selected item.

https://user-images.githubusercontent.com/7089140/144456590-48baac8a-4190-4c0c-9084-9e3acb8c4c7c.MP4

[oneHamidreza]

I don't fully understand the problem, can you post a snack? onPressIn on android seems to be working as expected in the snack I created here: https://snack.expo.dev/@computerjazz/rndfl-onpressin

I've tried this sample on Real Android Device in 2 ways:

1- Run with Expo Go => Everything is working as expected.

2- Run in a bare react native project by npx react-native init => it has issue (with or without GestureHandlerRootView)

When I want to start drag by pressing the item, the scroll of Flatlist will be started and drag state is canceled.

1- without GestureHandlerRootView: Whether I press or long press the item, the drag state is not activated.

2- with GestureHandlerRootView: When I press item for long duration, the drag state is activated and I can drag the item successfully. However, I want to activate drag state by onPressIn.