React-native: TouchableWithoutFeedback does not fire onPress like other Touchable Components

[haddow777]

🐛 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

[CatapultJesse]

Repro Snack: https://snack.expo.io/@jkcooper/rn23740-touchablewithoutfeedback-wrapping-custom-component

Seems to affect both iOS and android

[radeno]

@haddow777 you are right. Other touchable components wraps child content to another <View> and pass all touchable props into it.
TouchableWithoutFeedback just clone child. And if child doesn't pass all RN props into nested View it doesn't work.

[CatapultJesse]

Should there be a View inside a TouchableWithoutFeedback element? Im not sure what effect that would have on existing usages

[amerllica]

Dear @haddow777 and @radeno
Thanks, both of you help me a lot, other Touchable component works properly but the TouchableWithoutFeedback without View inside it doesn't dispatch pressing in the iOS.

[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>
      )}
    />

[michalchudziak]

Hello there 👋 by using the repro / the list of steps to reproduce, we can't actually see the reported bug on RN 0.59.5 so we'll close this issue. It may have something to do with your local setup, please double check that you are using the correct version of Android Studio / XCode / Android NDK / Yarn / etc.

[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.