# RemoteImageGroup

A component to display a group of RemoteImage components in a stack.

## Import

```tsx
import { RemoteImageGroup } from '@coinbase/cds-mobile/media/RemoteImageGroup'
```

## Examples

### Basic Usage

```tsx
<RemoteImageGroup>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>
```

### Max Items

```tsx
<RemoteImageGroup max={4} size={32}>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.btc.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>
```

### Different Shapes

```tsx
<RemoteImageGroup shape="circle" size="xxl">
  <RemoteImage shape="squircle" source={squareAssets.human1} />
  <RemoteImage source={assets.sushi.imageUrl} />
  <RemoteImage shape="squircle" source={squareAssets.human2} />
  <RemoteImage source={assets.ltc.imageUrl} />
</RemoteImageGroup>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
| `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
| `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |


