# PaginatedMessageListContext

`PaginatedMessageListContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## Best Practices

- Use `usePaginatedMessageListContext` for consistent access and typings.
- Check `hasMore`/`hasNoMoreRecentMessagesToLoad` before triggering pagination.
- Use `loadingMore` flags to prevent duplicate loads.
- Avoid manual message array mutations; rely on context updates.
- Keep pagination handlers lightweight to preserve scroll performance.

## Basic Usage

Consume `PaginatedMessageListContext` in any child of `Channel`:

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

const { loadingMore, loadMoreRecent, messages } = useContext(
  PaginatedMessageListContext,
);
```

Alternatively, use the `usePaginatedMessageListContext` hook.

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

const { loadingMore, loadMoreRecent, messages } =
  usePaginatedMessageListContext();
```

## Value

### hasNoMoreRecentMessagesToLoad

True if `Channel` has loaded all recent messages and there are no more to load.

| Type    |
| ------- |
| boolean |

### `hasMore`

False if `Channel` has loaded all history via pagination. Used to decide whether to load more when the user reaches the top of `MessageList`.

| Type    |
| ------- |
| boolean |

### `loadingMore`

True while `Channel` is querying older messages. Used to show/hide the inline loading indicator at the top of `MessageList`.

| Type    |
| ------- |
| boolean |

### loadingMoreRecent

True while `Channel` is querying newer messages. Used to show/hide the inline loading indicator at the bottom of `MessageList`.

| Type    |
| ------- |
| boolean |

### `loadMore`

Loads more messages before the top message. Called from the underlying `FlatList` `onScroll` when the user reaches the top and [`hasMore`](#hasmore) is true.

| Type     |
| -------- |
| function |

### loadMoreRecent

Loads more recent messages. Called from the underlying `FlatList` `onScroll` when the user reaches the relevant edge and [`hasMoreRecent`](#hasmorerecent) is true.

| Type     |
| -------- |
| function |

### messages

Messages currently loaded in the channel.

| Type  |
| ----- |
| array |

### setLoadingMore

Setter for [`loadingMore`](#loadingmore).

| Type                    |
| ----------------------- |
| `(loadingMore) => void` |

### setLoadingMoreRecent

Setter for [`loadingMoreRecent`](#loadingmorerecent).

| Type                          |
| ----------------------------- |
| `(loadingMoreRecent) => void` |


---

This page was last updated at 2026-04-17T17:33:45.102Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/paginated-message-list-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/paginated-message-list-context/).