TouchableWithoutFeedback only fires onLayout and onPress if child is a View

[rmacqueen]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 8.9.4
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Steps to Reproduce

This is a follow up to #10180 which was prematurely closed.

The TouchableWithoutFeedback component will not fire its onLayout or onPress functions unless the immediate child of the component is a View. Using any other custom component as the child, even if said component is itself implemented with a View at the top level, will prevent TouchableWithoutFeedback from functioning properly.

This won't work:

const MyCustomComponent = () => {
    <View>
        <Text>Hello world</Text>
    </View>
}

<TouchableWithoutFeedback onLayout={...} onPress={...}>
  <MyCustomComponent />
</TouchableWithoutFeedback>

but this will work:

<TouchableWithoutFeedback onLayout={...} onPress={...}>
    <View>
        <Text>Hello world</Text>
    </View>
</TouchableWithoutFeedback>

Expected behaviour is that both those above examples should work - that is, the onLayout and onPress callbacks should get invoked at their appropriate times.

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[rmacqueen]

@react-native-bot Yes, the issue contains all relevant information

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54?

Thank you for your contributions.

[rmacqueen]

@react-native-bot Yes I am able to reproduce on the latest release, v0.54

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[rmacqueen]

@hramos @react-native-bot I have edited the issue to include information that meets the template requirements. Please re-open

[fiznool]

#1352 gives a good account of the problem displayed here. Not sure if this is really fixable?

The reason for this is that TouchableWithoutFeedback will set responder props on that component, but ThirdButton is just a composite component with no backing UIView, so I want to pass those on to the View

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.