React Native TouchableOpacity not working on children

Question

I have a TouchableOpacity that does not execute the onPress event when I click on a child component 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 component it will not execute.

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

Answer 1

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.

Answer 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" .