# OverlayReactionsAvatar

`OverlayReactionsAvatar` component is used to display the avatar of the users who have reacted to the message. This is displayed on the message overlay, which opens up when the user presses on the reaction above the message.

This is the default component provided to the prop [`OverlayReactionsAvatar`](/chat/docs/sdk/react-native/v5/core-components/overlay-provider#overlayreactionsavatar/) on the `OverlayProvider` component.

## Props

### `reaction`

Reaction which can be extracted from a message.

```tsx
{
  alignment: clientId && clientId === reaction.user?.id ? 'right' : 'left',
  image: reaction?.user?.image,
  name: reaction?.user?.name || reaction.user_id || '',
  type: reaction.type,
};
```

| Type   |
| ------ |
| Object |

### `size`

Dimension for avatar image.

<admonition type="tip">

You can also set the size for message avatar, using our [theming system](/chat/docs/sdk/react-native/v5/customization/theming/).

```tsx
const theme = {
  avatar: {
    BASE_AVATAR_SIZE: 30,
  },
};
```

</admonition>

| Type   | Default |
| ------ | ------- |
| Number | 32      |

---

This page was last updated at 2025-08-15T14:16:15.387Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/overlay-reactions-avatar/](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/overlay-reactions-avatar/).