React Native Touch events issue

user_426996 0
Viewed 450

I facing an issue with the touch events. I have added two rootview in a single project. The second rootview uses a new reactinstanceManager and it is nested inside the first rootview. The issue is seen when I click on a touchable of the second rootview it triggers an event for that touchable and also for some random touchable in the first react rootview. I tried debugging this and found out while inspecting the layout on flipper that some of the viewgroup components have the same id in rootview1 and rootview2 not sure if this is the issue.

Any help will be appreciated.

react-native
2 Answers

Just add the prop onStartShouldSetResponder={event => true} to the <View> you want to prevent bubbling up And use e.stopPropagation() to the inner view at the point where you want the propagation to stop. For example

<TouchableOpacity onPress={this.doSomething1}>
  <View
   onStartShouldSetResponder={(event) => true}
   onTouchEnd={(e) => {
     e.stopPropagation();
   }}
  >
      <TouchableOpacity onPress={this.doSomething2}>
        <Image ... />
      </TouchableOpacity>
  </View>
</TouchableOpacity>

You should take a look at the Gesture Responder's methods: https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle .

user_164200180

Add this to your Touchables

onTouchEnd={(e) => {
   e.stopPropagation()
}}

or/and try adding e.stopPropagation(); at start of onPress function like:

onPress={(e) => {
  e.stopPropagation();
}}
user_96187490
Related