React Native Touch events issue

Question

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.

Answer 1

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 .