React native onPress with TouchableWithoutFeedback is not working

TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough.

So instead of

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <MyCustomComponent />
</TouchableWithoutFeedback>

use:

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <View>
    <MyCustomComponent />
  </View>
</TouchableWithoutFeedback>

See the github issue for more info

For those who struggle with this issue in react-native 0.64, and wrapping it in just a View doesn't work, try this:

  <TouchableWithoutFeedback onPress={onPress}>
    <View pointerEvents="none">
      <Text>Text</Text>
    </View>
  </TouchableWithoutFeedback>

Can be used with <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>

You should wrap your content in component like this:

<TouchableWithoutFeedback>
 <View>
  <Your components...>
 </View>
</TouchableWithoutFeedback>

Related