react-native-gesture-handler cancels presses on normal react-native touchables.

[curiousdustin]

I am trying to use react-native-draggable-flatlist, which uses react-native-gesture-handler.

It wraps each flat list item in a TagGestureHandler. Inside these items I have buttons that are using normal react-native TouchableOpacity.

This works fine on iOS.

On Android, onPress seems to be cancelled for these TouchableOpacity buttons.

If I tap normally onPress is NOT called.

However, if I tap somewhat slowly, but NOT necessarily a "long" press, onPress DOES get called.

What is the expected behavior when using RN Touchables within GestureHandlers? Is there a work around I could use to stop this unexpected behavior?

[curiousdustin]

I am able to replicate the behavior I am having trouble with in the react-native-gesture-handler Example app.

I am testing in the Touchables -> TouchableOpacity with nothing inside and style applied example.

Before any modifications both the RN and GH Touchables call all three callbacks as expected:

 WARN  press in
 WARN  press out
 WARN  press

In the Touchables index.js, I wrapped the buttons in a TapGestureHandler to simulate how they are rendered by react-native-draggable-flatlist.

    return (
      <Component style={{ width: '100%', height: '100%', padding: 10 }}>
        <TouchableOpacity onPress={this.toggleScrollView}>
          <Text>
            Use {this.state.useScrollView ? 'View' : 'ScrollView'} as a wrapper
          </Text>
        </TouchableOpacity>
        <Text>{text}</Text>
        <TapGestureHandler>{/* Added handler here to simulate how react-native-draggable-flatlist renders items */}
          <View 
            style={{
              justifyContent: 'space-between',
              flexDirection: 'row',
              margin: 20,
            }}>
            <RNTouchable
              {...props}
              background={background && background(RNTouchableNativeFeedback)}>
              {renderChild(color)}
            </RNTouchable>
            <GHTouchable
              {...props}
              background={background && background(TouchableNativeFeedback)}>
              {renderChild(color)}
            </GHTouchable>
          </View>
        </TapGestureHandler>{/* Added */}
      </Component>
    );

After this change, the RNTouchable no longer calls onPress when tapping it at a normal duration.

 WARN  press in
 WARN  press out

However, when holding the press long enough to trigger a "long" press, onPress IS called. Assuming this is just a result of falling back to onPress when onLongPress is not defined.

[curiousdustin]

However, setting a short (10ms) delayLongPress, does NOT seem to affect the behavior. It seems like the long press is involved, but the value provided in delayLongPress is not...

[ivankdev]

Sorry, @osdnk it would be great if anybody could investigate this one, important for me too.

[avinashlng1080]

I was having the same issue and then by removing the useScreen() function from react-navigation, all the touches on Android went through. It might be helpful to note it.

[j-piasecki]

Hi! I tried it on Gesture Handler 2.4.2 and I believe it works correctly, using both GestureDetector and TapGestureHandler. It's possible that it's been already fixed in previous releases. Here's the code that I used to check it:

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';

import { GestureDetector, Gesture } from 'react-native-gesture-handler';

export default function Example() {
  const gesture = Gesture.Tap().onEnd(() => {
    console.log('tap');
  });

  return (
    <View style={styles.view}>
      <GestureDetector gesture={gesture}>
        <TouchableOpacity
          onPressIn={() => console.log('press in')}
          onPressOut={() => console.log('press out')}
          onPress={() => console.log('press')}>
          <View style={styles.box} />
        </TouchableOpacity>
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  view: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 150,
    height: 150,

    backgroundColor: 'mediumspringgreen',
    margin: 10,
    zIndex: 200,
  },
});