React native panResponder onRelease event stealing touchable opacity onpress event

user_10805396 0
Viewed 376

It seems like react native panResponder onRelease event is stealing touchable opacity onpress event.

The onpressin and onpressout events of the touchable opacity still fire correctly, but the onpress event only fires when the onrelease event on the pan responder doesnt fire(this issue only happens on ios, it works perfectly on android). The documentation for touchable opacity says that onpress does not get called if a responder steals the touch, but i cant figure out how to make it stop stealing the touch for simple presses.

Heres a simplified version of my code:

const panResponder = useMemo(() => {
    return PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (evt, gestureState) => {
        dostuff()
      },
      onPanResponderMove: (evt, gestureState) => {
       dostuff()
      },
      onPanResponderRelease: (evt, gestureState) => {
        dostuff()
      },

      onShouldBlockNativeResponder: () => {
        return true;
      },

return (
    <View {...panResponder.panHandlers} style={[styles.view, style]}>
      <Button 
onPress={() => {
         //not logging
         console.log('Onpress firing")}

} onPressIn={() => {
        //getting logged
        console.log('Onpressin firing')
}} onPressOut={() => {
        //getting logged
        console.log('Onpressout firing')
}}
/>
    </View>
  );
react-native-ios react-native
1 Answers

It seems like on iOS onMoveShouldSetResponder gets called with a smaller margin than it does on Android, causing it to get called even when your finger moves a small amount. I managed to fix it by doing this.

      onMoveShouldSetPanResponder: (evt, {dx, dy}) => {
        if (dx > 0 || dy > 0) {
          return true;
        }

        return false;
      },
user_108053960
Related