PaginatedMessageListContext

PaginatedMessageListContext is provided by Channel. If you are not familiar with the React Context API, see the React docs.

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:

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

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

Alternatively, use the usePaginatedMessageListContext hook.

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.

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.

loadingMore

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

loadingMoreRecent

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

loadMore

Loads more messages before the top message. Called from the underlying FlatList onScroll when the user reaches the top and hasMore is true.

loadMoreRecent

Loads more recent messages. Called from the underlying FlatList onScroll when the user reaches the relevant edge and hasMoreRecent is true.

messages

Messages currently loaded in the channel.

setLoadingMore

Setter for loadingMore.

setLoadingMoreRecent

Setter for loadingMoreRecent.