search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.05k stars 973 forks source link

How to stop propagate touch event to parent responder #776

Closed chuanhd closed 4 years ago

chuanhd commented 5 years ago

Hello everybody,

I have a scrollview that is wrapped by a TapGestureHandler to create a new view when user tap on scrollview at touch position. When user tap a sub view on scrollview I will render a RectButton on Scrollview to allow user delete this view from scrollview.

Current behavior Both RectButton and TapGestureHandler handle touch event when user tap on RectButton

Expected behavior TapGestureHandler should not handle touch event when user tap RectButton.

So I would like to know how to make RectButton stop sending touch event to TapGestureResponder. Thanks in advance.

My environment: react-native-gesture-handler: 1.4.1 react-native: 0.60.5

vpuonti commented 4 years ago

Hi,

As stated here, only one gesture handler is in active state at a time. Are you checking that the event is in Active state? 

<TapGestureHandler
  onHandlerStateChange={e => 
    if(e.nativeEvent.state === State.ACTIVE){
      // handle tap
    }
>
chuanhd commented 4 years ago

Thank for your reply.

To resolve this issue, I have to use other TapGestureHandler and check touch location inside view's rect instead of using built-in RectButton. I just think a touchable child view (in my case is RectButton) should consume touch event and stop propagating touch event to parent by default.

kesha-antonov commented 1 year ago

I wrapped GestureDetector with BaseButton and it worked, events stop propagate

{/* ADDED TO STOP PROPAGATION */}
<BaseButton>
  <GestureDetector gesture={panGesture}>
    <View style={lineContainerStyle}>