TouchableWithoutFeedback does not fire onPress like other Touchable Components

🐛 Bug Report

Same as closed bug #18611 TouchableWithoutFeedback does not call the onPress handler unless it’s direct child is a View Component. This is counter to the fact that other touchable components will allow custom components as their child.

To Reproduce

1. Create a FlatList
2. Create a ListItem that utilizes a TouchableWithoutFeedback component with an onPress handler
3. Add a non-View child Component, any custom component that renders content.
4. Test by tapping ListItem and find that no onPress event is fired.

Expected Behavior

I would think that the expected behavior would be that the onPress event would be fired no matter what child component the TouchableWithoutFeedback component

Code Example

https://github.com/haddow777/tech_stack

Specifically look at the file ./src/components/ListItem.js. That is where the TouchableWithoutFeedback component is used. In it’s current state, the event does not fire. If I encapsulate the current children in a View component tag, the event will fire. I changed the TouchableWithoutFeedback with a TouchableOpacity component without the View component child, and the onPress fires. It seems they should both work the same.

Environment

React Native Environment Info:
    System:
      OS: Windows 10
      CPU: (4) x64 Intel(R) Core(TM) i5-4300U CPU @ 1.90GHz
      Memory: 1.27 GB / 7.91 GB
    Binaries:
      Yarn: 1.13.0 - C:\Users\SURFACE\AppData\Roaming\npm\yarn.CMD
      npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

Android Emulator api 27

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

[canpoyrazoglu]

I’m on 0.59.8 and I can confirm that this issue is present. My TouchableWithoutFeedback does not fire inside my FlatList cells, whereas TouchableOpacity does.

[mgcrea]

Using latest react-native (0.59.5), I can’t make a TouchableWithoutFeedback or TouchableNativeFeedback work inside a FlatList, the ripple is there (with native feedback) but onPress is never called, even with a basic <View />.

No issues with Opacity/Highlight touchable components.

eg:

    <FlatList
      data={data}
      renderItem={({item, separators}) => (
        <TouchableNativeFeedback
          onPress={() => onPress(item.key)}
        >
          <View style={{flex: 1}}>
            <Text>FooBar</Text>
          </View>
        </TouchableNativeFeedback>
      )}
    />