How to prevent parent click event in react native?

Question

onParentClick = () => {
  console.log('Parent is triggered');
}

onChildClick = (event) => {
  event.stopPropagation();
  console.log('Child is triggered');
}

<TouchableWithoutFeedback onPress={()=> this.onParentClick()}>
  <View>
    <Text>How to prevent parent click event</Text>
    <TouchableOpacity onPress={(event)=> this.onChildClick(event)}>
      <Text> Click Me </Text>
    </TouchableOpacity>
  </View>
</TouchableWithoutFeedback>
<!-- edit description:- there was this end curly brace missing in above,
 however the snippet will not run because the language js will not 
support it and language html will not be able to format it correctly or run it.
(need to run the snippet on the react native environment like code-pen)  -->

Expected: On click of "Click Me", onChildClick() must be called

Issue: On click of "Click Me", onParentClick() is called.

How to prevent parents click event on click of "Click Me"?

Result which I get on click of parent is "Parent is triggered" and it works perfect.

But on click on child the result I get is "Parent is triggered".

I guess onChildClick() is not being triggered.

Answer 1

Old question, but I faced the same issue and in my case, the problem was:

import {TouchableOpacity} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';

This weird import happened due to automatic suggestion by eslint. Somehow these libraries don't play nicely together, so I changed the above to:

import {TouchableOpacity, TouchableWithoutFeedback} from 'react-native';

Answer 2

With event.stopPropagation you can stop event from propagating up to the parents: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

First argument passed onClick is the event itself:

function onChildClick(e) {
    e.stopPropagation();
    console.log('The link was clicked.');
}

Answer 3

You can simply set the parents pointerEvents property to 'box-none'. By doing so, the parent will not respond to touch events but its child views will get clicked.

  <TouchableWithoutFeedback
      pointerEvents={'box-none'}
  >
      <TouchableWithoutFeedback
          onPress={()=>{
              //onPress here will work
          }}
      />
  </TouchableWithoutFeedback>

Answer 4

You need to "swallow" the click event somewhere. It could be in your outer TouchableWithoutFeedback (ie: change onPress={()=> this.onParentClick()} to onPress={(e) => e.preventDefault()} or you could wrap your TouchableOpacity in another touch handler, like below.

<TouchableWithoutFeedback onPress={()=> this.onParentClick()}>
  <View>
    <Text>How to prevent parent click event</Text>
    <TouchableWithoutFeedback onPress={(e) => e.preventDefault()}
      <TouchableOpacity onPress={(event)=> this.onChildClick(event)>
        <Text> Click Me </Text>
      </TouchableOpacity>
    </TouchableWithoutFeedback>
  </View>
</TouchableWithoutFeedback>