Throw on React.Fragment child in TouchableHighlight

Fixes #54933.

TouchableHighlight injects the underlay style onto its single child via
cloneElement. React.Fragment cannot accept that style, so React emits a
generic "Invalid prop `style` supplied to `React.Fragment`" warning and
the highlight effect is silently broken.

Throw an actionable error via invariant naming the component, the
constraint, and the fix (wrap in a View). Matches the class doc, which
already specifies that multiple children must be wrapped in a View.

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 invariant from 'invariant';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
@@ -304,6 +305,11 @@ class TouchableHighlightImpl extends React.Component<
 
   render(): React.Node {
     const child = React.Children.only<$FlowFixMe>(this.props.children);
+    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>.',
+    );
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.

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

@@ -395,6 +395,40 @@ 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. Surface that as an actionable error instead.
+      it('errors when given a React.Fragment as a child', () => {
+        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(mockConsoleError).toHaveBeenCalled();
+          const reportedError = mockConsoleError.mock.calls[0][0];
+          expect(reportedError.message).toContain(
+            'TouchableHighlight does not support React.Fragment as a child',
+          );
+        } finally {
+          // $FlowFixMe[cannot-write]
+          console.error = originalConsoleError;
+        }
+      });
     });
   });