How to stop touch event propagation in React-Native - react-native

Question

I have a scrollview with a grid of images when I long press on an image I’d like to stop propagating the mouse events to the scrollview and just monitor the movements. With the intent to re-initialize propagation on press out. Anyone know how?

Answer 1

This might be new since the previous answers, but I find you can just gobble the event using another "touchable":
<TouchableOpacity onPress={this.onPressOuter}>
<TouchableOpacity activeOpacity={1}>
<Text>Content</Text>
</TouchableOpacity>
</TouchableOpacity>
In this example, touching the text does not trigger onPressOuter

Answer 2

Add to View to catch the event propagated and stop it
onStartShouldSetResponder={(event) => true}
onTouchEnd={(e) => { e.stopPropagation(); }}
<TouchableOpacity onPress={this.doSomething1}>
<View
onStartShouldSetResponder={(event) => true}
onTouchEnd={(e) => {
e.stopPropagation();
}}
>
<TouchableOpacity onPress={this.doSomething2}>
<Image ... />
</TouchableOpacity>
</View>
</TouchableOpacity>

Answer 3

I solved this issue by wrap my press event with class method that set inner variable to true, then did the original logic, and after it finished, set again the inner variable to false. Then, you can wrap your container component event handler to check if inner variable set to true or false.
for example:
<TouchableOpacity onPress={this.doSomething1}>
<TouchableOpacity onPress={this.doSomething2}>
<Image ... />
</TouchableOpacity>
</TouchableOpacity>
doSomething1() {
this.preventDefault = true;
doSomeLogic();
this.preventDefault = false;
}
doSomething2() {
if(!this.preventDefault) {
}
}

Answer 4

This would be the simplest answer:
use this on the inner view at the point where you want the propagation to stop
onTouchEnd={(e) => {
e.stopPropagation()
}}

Answer 5

You should take a look at the Gesture Responder's methods: https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle . Actually even simpler way will be to take a look at the PanResponder https://facebook.github.io/react-native/docs/panresponder.html - first see the UIExplorer example to see it in operation: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ResponderExample.js . I am not sure though if this will handle the long-press case of yours?

Answer 6

In my case, the onPress of the outer touchable was invoked first, even though I pressed the inner touchable.
What I did, was to use the onPressIn and onPressOut in the inner touchable to determine whether the user pressed the inner or outer touchable - by setting a flag in the component class, on onPressIn and clearing it on onPressOut, and then checking for that flag in the onPress handler of the outer touchable, bailing out if it's set.

Answer 7

After well over a day in looking for answers, this worked for me.
import {TouchableOpacity} from 'react-native-gesture-handler';
<TouchableOpacity onPress={outside}>
//outside code here
<TouchableOpacity
onPress={inside}
disallowInterruption={true}>
//inner code here
</TouchableOpacity>
</TouchableOpacity>
Setting disallowInterruption to true will prevent bubbling of the event in React Native.
Original Source: https://github.com/software-mansion/react-native-gesture-handler/issues/784