# Notification

`Notification` renders a single snackbar card: icon, message, optional action buttons, optional close button. It is invoked by [`NotificationList`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-list/), which passes the active notification and a dismiss callback. You only render `Notification` directly when overriding `NotificationList` with a custom snackbar host.

The component handles accessibility automatically: live-region set to `assertive` for errors and `polite` for other severities, role set to `alert` for errors and `summary` otherwise, dismiss button labelled via the `a11y/Dismiss notification` translation key.

## Usage

```tsx
import {
  Notification,
  useNotificationListController,
} from "stream-chat-react-native";

const MySnackbar = () => {
  const { dismissNotification, notification } = useNotificationListController();
  if (!notification) return null;

  return (
    <Notification
      notification={notification}
      onDismiss={dismissNotification}
      showClose={!notification.duration}
    />
  );
};
```

Render this host inside an existing notification target, for example inside `Channel`, `Thread`, `ChannelList`, or your own `NotificationTargetProvider`.

## Props

| Prop                      | Description                                                                                                                                                                                 | Type                                                  |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| `notification` (required) | The notification to render. Comes from `stream-chat`'s `Notification` type: `id`, `message`, `severity`, `actions`, `metadata`, `tags`, `origin`, etc.                                      | `Notification`                                        |
| `entryDirection`          | Direction the surrounding host animated the card in from. Available for custom transitions inside the card.                                                                                 | `'bottom'` \| `'left'` \| `'right'` \| `'top'`        |
| `Icon`                    | Override for the icon component. Defaults to the [`NotificationIcon`](/chat/docs/sdk/react-native/ui-components/in-app-notifications/notification-icon/) provided through `WithComponents`. | `React.ComponentType<{ notification: Notification }>` |
| `onDismiss`               | Called when the user taps the close button. Falls back to `removeNotification(notification.id)` if omitted.                                                                                 | `() => void`                                          |
| `showClose`               | Whether to render the close button. The close button is always shown for persistent notifications (`duration: 0`) regardless of this prop.                                                  | `boolean`                                             |
| `transitionState`         | The host's current transition state. Reserved for future use.                                                                                                                               | `'enter'` \| `'exit'`                                 |

## Translation

The built-in `Notification` renders `notification.message` through internal type-specific translators for known notification `type` values. For example, `'api:attachment:upload:failed'` resolves to `Error uploading attachment` or `Attachment upload failed due to {{reason}}` depending on `notification.metadata.reason`. Custom notifications without a recognized `type` fall back to `t(notification.message)`.

## Customization

For non-trivial visual changes, override `Notification` via `ComponentsContext` rather than wrapping it. See the [Snackbar cookbook](/chat/docs/sdk/react-native/guides/snackbar/#level-3-override-the-notification-component) for a working override that preserves accessibility semantics.


---

This page was last updated at 2026-05-14T07:09:01.189Z.

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