CODEWITHSUNDEEP
react-native
Alec Smart
Alec Smart

Reputation: 95890

React Native Touch events issue

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.

Upvotes: 5

Views: 1736

Answers (2)

Sanket Shah
Sanket Shah

Reputation: 3091

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 .

Upvotes: 1

Veter
Veter

Reputation: 532

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();
}}

Upvotes: 0

Related Questions