Card component injects invalid props into React.Fragment children

[adolfogc]

Current behaviour

The Card component clones its children and injects additional props (index, total, siblings, borderRadiusStyles). This leads to runtime errors when a child is a React.Fragment, which only accepts key and children props. Other components that do not expect these props may also be affected.

Expected behaviour

The Card component should render React.Fragment children without throwing runtime errors by avoiding invalid prop injection.

How to reproduce?

Pass a React.Fragment as a child of Card.

What have you tried so far?

Relevant source line: https://github.com/callstack/react-native-paper/blob/main/src/components/Card/Card.tsx#L278

Potential fix:

  import { Fragment } from 'react';
  
  // ...

  const content = (
    <View style={[styles.innerContainer, contentStyle]} testID={testID}>
      {React.Children.map(children, (child, index) => {
        if (!React.isValidElement(child)) {
          return child;
        }
        if (child.type === Fragment) {
          return child;
        }

        return React.cloneElement(child as React.ReactElement<any>, {
          index,
          total,
          siblings,
          borderRadiusStyles,
        });
      })}
    </View>
  );

[adam-kuhn]

+1
I've been experiencing something similar but for me the error is:

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