Skip cloneElement for Fragment children in TouchableHighlight

[qflen]

Summary

Fixes #54933.

Passing a React.Fragment as the child of TouchableHighlight currently produces this warning:

Warning: Invalid prop style supplied to React.Fragment.
React.Fragment can only have key and children props.

This happens because TouchableHighlight unconditionally calls cloneElement(child, {style}) on its single child, including when that child is a Fragment.

This PR skips that clone when child.type === React.Fragment and renders the Fragment as-is.

That avoids passing an invalid style prop to React.Fragment while preserving the existing render path for Fragment children.

Changelog:

[General] [Fixed] - Suppress React.Fragment style warning when used as a child of TouchableHighlight

Test Plan

• Added a Fantom regression test in TouchableHighlight-itest.js that renders <TouchableHighlight><Fragment>...</Fragment></TouchableHighlight>
• Verified the expected rendered output
• Verified console.error is not called
• yarn flow focus-check packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js
• yarn lint on the changed files
• yarn prettier --list-different on the changed files

[meta-cla]

Hi @qflen!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[github-actions]

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

• Please include a clear changelog message.
• This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

[javache]

This will break the highlight though. Would it better to generate a more actionable error here (eg TouchableHighlight doesn't support fragments)?

[qflen]

Hm, I will check.

[qflen]

@javache Right, the previous version silenced the warning while leaving the highlight broken.

Update logs a clear console.error in __DEV__ when the child is a React.Fragment.

The message names the component, the constraint, and the fix (wrap in a <View>), mirroring the existing class doc and the dev error pattern used elsewhere in RN (ScrollView, TextInputState). The Fragment is still rendered unchanged so apps that have been silently rendering it since 0.79 do not crash on upgrade.

An alternative would be to switch to a hard invariant throw if a stricter contract is preferred, like:

invariant(
  child.type !== React.Fragment,
  'TouchableHighlight does not support React.Fragment as a child. ' +
    'Wrap the children in a single host element such as <View>.',
);