Skip cloneElement for Fragment children in TouchableHighlight (#56539)

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`

Pull Request resolved: #56539

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

Reviewed By: GijsWeterings

Differential Revision: D104224036

Pulled By: javache

fbshipit-source-id: 17289926bc62cda84decaf7154183ff355a03d21

Author: qflen

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -19,6 +19,7 @@ import Pressability, {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
+import warnOnce from '../../Utilities/warnOnce';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
@@ -305,6 +306,13 @@ class TouchableHighlightImpl extends React.Component<
 
   render(): React.Node {
     const child = React.Children.only<$FlowFixMe>(this.props.children);
+    if (__DEV__ && child.type === React.Fragment) {
+      warnOnce(
+        'TouchableHighlight-fragment',
+        'TouchableHighlight does not support React.Fragment as a child. ' +
+          'Wrap the children in a single host element such as <View>.',
+      );
+    }
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.
@@ -377,12 +385,14 @@ class TouchableHighlightImpl extends React.Component<
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>
-        {cloneElement(child, {
-          style: StyleSheet.compose(
-            child.props.style,
-            this.state.extraStyles?.child,
-          ),
-        })}
+        {child.type === React.Fragment
+          ? child
+          : cloneElement(child, {
+              style: StyleSheet.compose(
+                child.props.style,
+                this.state.extraStyles?.child,
+              ),
+            })}
         {__DEV__ ? (
           <PressabilityDebugView color="green" hitSlop={this.props.hitSlop} />
         ) : null}

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableHighlight-itest.js

@@ -395,6 +395,48 @@ describe('<TouchableHighlight>', () => {
           </rn-view>,
         );
       });
+
+      // Regression test for #54933: a `React.Fragment` cannot accept the
+      // underlay style applied via `cloneElement`, so the highlight effect
+      // is silently broken. Render the Fragment unchanged and surface an
+      // actionable dev warning pointing the user at wrapping in <View>.
+      it('logs a dev warning when given a React.Fragment as a child', () => {
+        const originalConsoleWarn = console.warn;
+        const mockConsoleWarn = jest.fn();
+        // $FlowExpectedError[cannot-write]
+        console.warn = mockConsoleWarn;
+
+        try {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <TouchableHighlight>
+                <React.Fragment>
+                  <Text>First</Text>
+                  <Text>Second</Text>
+                </React.Fragment>
+              </TouchableHighlight>,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['accessible']}).toJSX(),
+          ).toEqual(
+            <rn-view accessible="true">
+              <rn-paragraph key="0">First</rn-paragraph>
+              <rn-paragraph key="1">Second</rn-paragraph>
+            </rn-view>,
+          );
+          expect(mockConsoleWarn).toHaveBeenCalledTimes(1);
+          expect(mockConsoleWarn.mock.calls[0][0]).toContain(
+            'TouchableHighlight does not support React.Fragment as a child',
+          );
+        } finally {
+          // $FlowExpectedError[cannot-write]
+          console.warn = originalConsoleWarn;
+        }
+      });
     });
   });