# ScrollToBottomButton

Renders the floating button that scrolls `MessageList` to the latest message.

## Best Practices

- Only render the button when `showNotification` is true to avoid layout noise.
- Keep the button lightweight and unobtrusive for better UX.
- Use `unreadCount` to provide meaningful context, but clamp large values.
- Ensure `onPress` scrolls to the latest message rather than just bottom offset.
- Customize via `WithComponents` instead of modifying internal components.

## General Usage

Replace the default UI via `WithComponents`.

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

<WithComponents
  overrides={{ ScrollToBottomButton: CustomScrollToBottomButton }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;
```

## Props

| Prop               | Description                               | Type       |
| ------------------ | ----------------------------------------- | ---------- |
| `onPress`          | Press handler.                            | `function` |
| `showNotification` | When `false`, the button is not rendered. | `boolean`  |
| `unreadCount`      | Unread count for the current channel.     | `number`   |


---

This page was last updated at 2026-08-13T00:26:19.021Z.

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