fix(card): avoid cloning Fragment children

src/components/Card/Card.tsx

@@ -214,7 +214,7 @@ const Card = ({
   const content = (
     <View style={[styles.innerContainer, contentStyle]} testID={testID}>
       {React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
+        React.isValidElement(child) && child.type !== React.Fragment
           ? React.cloneElement(child as React.ReactElement<any>, {
               index,
               total,

src/components/Card/CardActions.tsx

@@ -44,7 +44,10 @@ const CardActions = ({ theme, style, children, ...rest }: Props) => {
   return (
     <View {...rest} style={containerStyle}>
       {React.Children.map(children, (child, index) => {
-        if (!React.isValidElement<CardActionChildProps>(child)) {
+        if (
+          !React.isValidElement<CardActionChildProps>(child) ||
+          child.type === React.Fragment
+        ) {
           return child;
         }
 

src/components/__tests__/Card/Card.test.tsx

@@ -91,6 +91,26 @@ describe('Card', () => {
     expect(screen.getByTestId('card')).toHaveStyle(styles.contentStyle);
   });
 
+  it('renders Fragment children without passing invalid props', async () => {
+    const fragment = (
+      <>
+        <Text>First item</Text>
+        <Text>Second item</Text>
+      </>
+    );
+    await render(<Card>{fragment}</Card>);
+
+    // eslint-disable-next-line no-restricted-syntax -- The native test renderer does not surface React's invalid Fragment prop warning.
+    const fragmentProps = screen.getByTestId('card').props.children[0].props;
+
+    expect(screen.getByText('First item')).toBeOnTheScreen();
+    expect(screen.getByText('Second item')).toBeOnTheScreen();
+    expect(fragmentProps).not.toHaveProperty('index');
+    expect(fragmentProps).not.toHaveProperty('total');
+    expect(fragmentProps).not.toHaveProperty('siblings');
+    expect(fragmentProps).not.toHaveProperty('borderRadiusStyles');
+  });
+
   it('does not render a disabled accessibility state', async () => {
     await render(<Card>{null}</Card>);
 
@@ -160,6 +180,30 @@ describe('CardActions', () => {
       borderRadius: 32,
     });
   });
+
+  it('renders Fragment children without passing invalid props', async () => {
+    const fragment = (
+      <>
+        <Button>Cancel</Button>
+        <Button>Confirm</Button>
+      </>
+    );
+    await render(
+      <Card>
+        <Card.Actions testID="card-actions">{fragment}</Card.Actions>
+      </Card>
+    );
+
+    const fragmentProps =
+      // eslint-disable-next-line no-restricted-syntax -- The native test renderer does not surface React's invalid Fragment prop warning.
+      screen.getByTestId('card-actions').props.children[0].props;
+
+    expect(screen.getByText('Cancel')).toBeOnTheScreen();
+    expect(screen.getByText('Confirm')).toBeOnTheScreen();
+    expect(fragmentProps).not.toHaveProperty('compact');
+    expect(fragmentProps).not.toHaveProperty('mode');
+    expect(fragmentProps).not.toHaveProperty('style');
+  });
 });
 
 describe('getCardColors - background color', () => {