import { useContext } from "react";
import { PaginatedMessageListContext } from "stream-chat-react-native";
const { loadingMore, loadMoreRecent, messages } = useContext(
PaginatedMessageListContext,
);PaginatedMessageListContext
PaginatedMessageListContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.
Best Practices
- Use
usePaginatedMessageListContextfor consistent access and typings. - Check
hasMorebefore triggering pagination. - Use
loadingMoreflags 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:
Alternatively, use the usePaginatedMessageListContext hook.
import { usePaginatedMessageListContext } from "stream-chat-react-native";
const { loadingMore, loadMoreRecent, messages } =
usePaginatedMessageListContext();Value
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 |
loadLatestMessages
Loads the latest messages in the channel, jumping to the most recent state.
| Type |
|---|
() => Promise<void> |
loadMore
Loads more messages before the top message. Called from the underlying FlatList onScroll when the user reaches the top and hasMore is true.
| Type |
|---|
(limit?: number) => Promise<void> |
loadMoreRecent
Loads more recent messages. Called from the underlying FlatList onScroll when the user reaches the relevant edge.
| Type |
|---|
(limit?: number) => Promise<void> |
messages
Messages currently loaded in the channel.
| Type |
|---|
ChannelState['messages'] |
setLoadingMore
Setter for loadingMore.
| Type |
|---|
(loadingMore: boolean) => void |
setLoadingMoreRecent
Setter for loadingMoreRecent.
| Type |
|---|
(loadingMoreRecent: boolean) => void |
viewabilityChangedCallback
A callback to be passed to onViewableItemsChanged in the underlying MessageList. Used internally to track which messages are visible.
| Type |
|---|
(config: ViewabilityChangedCallbackInput) => void |