# UserAvatar

`UserAvatar` extends the base [`Avatar`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar/) component to render user-specific avatars. It automatically generates initials from the user's name, assigns a deterministic background color based on the user ID hash, and optionally displays an [`OnlineIndicator`](/chat/docs/sdk/react-native/ui-components/base-ui/online-indicator/).

If the user has an `image` property, their profile picture is rendered. Otherwise, the component displays their name initials as a placeholder. For smaller sizes (`xs`, `sm`), only one initial is shown; for larger sizes, two initials are used.

When no name is available, a `PeopleIcon` is rendered as the fallback.

## Usage

```tsx
import { UserAvatar } from "stream-chat-react-native";

<UserAvatar
  user={{ id: "john", name: "John Doe", image: "https://example.com/john.png" }}
  size="xl"
  showOnlineIndicator
/>;
```

Without an image (renders initials):

```tsx
<UserAvatar user={{ id: "jane", name: "Jane Smith" }} size="lg" />
```

## Props

| Prop                  | Description                                                                                                                                                                                                                                                                                                     | Type                                                      |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| `user` (required)     | The user object containing identity information used to render the avatar. Key fields used: `id` (deterministic background color), `name` (initials for placeholder), `image` (avatar image URL).                                                                                                               | `UserResponse`                                            |
| `size` (required)     | The size of the avatar. Passed down to the underlying [`Avatar`](/chat/docs/sdk/react-native/ui-components/base-ui/avatar/) component.                                                                                                                                                                          | `'2xl'` \| `'xl'` \| `'lg'` \| `'md'` \| `'sm'` \| `'xs'` |
| `showOnlineIndicator` | Whether to display the online presence indicator in the top-right corner of the avatar. When enabled, renders an [`OnlineIndicator`](/chat/docs/sdk/react-native/ui-components/base-ui/online-indicator/) component. The indicator size is automatically derived from the avatar size. Defaults to `undefined`. | `boolean`                                                 |
| `showBorder`          | Whether to show a border around the avatar. Defaults to `!!user.image` (true when the user has a profile image).                                                                                                                                                                                                | `boolean`                                                 |
| `style`               | Additional style applied to the outer wrapper `View`.                                                                                                                                                                                                                                                           | `StyleProp<ViewStyle>`                                    |


---

This page was last updated at 2026-04-20T08:51:07.019Z.

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