I have a TouchableOpacity that does not execute the onPress event when I click on a child ponent inside of it. The onpress event is a simple console.log();

<TouchableOpacity style={{flex: 1}} onPress={this.onPress.bind(this)}>
    {this.state.customComponent}
</TouchableOpacity>

If I click on an empty space inside of TouchableOpacity it will execute the onPress. If I click directly on the child ponent it will not execute.

Edit: I figured out the problem, it was because the TouchableOpacity had its child ponent render a TouchableHighlight unfortunately you you can't have a TouchableHighlight as a child

I have a TouchableOpacity that does not execute the onPress event when I click on a child ponent inside of it. The onpress event is a simple console.log();

<TouchableOpacity style={{flex: 1}} onPress={this.onPress.bind(this)}>
    {this.state.customComponent}
</TouchableOpacity>

If I click on an empty space inside of TouchableOpacity it will execute the onPress. If I click directly on the child ponent it will not execute.

Edit: I figured out the problem, it was because the TouchableOpacity had its child ponent render a TouchableHighlight unfortunately you you can't have a TouchableHighlight as a child

• javascript
• react-native

• 1 I remend setting up an example at rnplay so that we can witness for ourselves and tweak the code in helpful ways. – Chris Geirman Commented Feb 18, 2016 at 0:16
• I'm experiencing this same exact problem, I have other touchable opacities within my app and they work perfectly well except one. – Steven Muganwa Commented Oct 22, 2019 at 5:49

2 Answers 2

I had this problem today. The solution was an easy fix: I imported the TouchableOpacity from "react-native-gesture-handler", it should be imported from "react-native".

I know this is a few years late but I hope it helps someone. I had a similar issue and found that one of the parent views(Not immediate parent) was actually covering a large part of the Touchable opacity, I solved my issue by increasing the height of the above mentioned parent. It was difficult to find because its overflow was not hidden. Changing the parent elements overflow to hidden might help with finding out what's actually blocking the touchable opacity.