Skip cloneElement for Fragment children in TouchableHighlight

React emits "Invalid prop `style` supplied to `React.Fragment`" when a
Fragment is passed as a child to TouchableHighlight, because the render
path unconditionally calls `cloneElement(child, {style})`. Fragments
ignore `style` at runtime anyway, so skip the clone and render the
Fragment through directly when `child.type === React.Fragment`.

Fixes #54933.

Author: qflen

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

@@ -376,12 +376,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,41 @@ describe('<TouchableHighlight>', () => {
           </rn-view>,
         );
       });
+
+      // Regression test for #54933: cloning a `React.Fragment` with a `style`
+      // prop triggers "Invalid prop `style` supplied to `React.Fragment`".
+      it('renders a Fragment child without console errors', () => {
+        const originalConsoleError = console.error;
+        const mockConsoleError = jest.fn();
+        // $FlowFixMe[cannot-write]
+        console.error = mockConsoleError;
+
+        try {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <TouchableHighlight>
+                <React.Fragment>
+                  <Text>First</Text>
+                  <Text>Second</Text>
+                </React.Fragment>
+              </TouchableHighlight>,
+            );
+          });
+
+          expect(root.getRenderedOutput().toJSX()).toEqual(
+            <rn-view>
+              <rn-paragraph>First</rn-paragraph>
+              <rn-paragraph>Second</rn-paragraph>
+            </rn-view>,
+          );
+          expect(mockConsoleError).not.toHaveBeenCalled();
+        } finally {
+          // $FlowFixMe[cannot-write]
+          console.error = originalConsoleError;
+        }
+      });
     });
   });