PaginatedMessageListContext

PaginatedMessageListContext is provided by Channel component. If you are not familiar with React Context API, please read about it on React docs.

Basic Usage

PaginatedMessageListContext can be consumed by any of the child component of Channel component as following:

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

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

Alternatively, you can also use usePaginatedMessageListContext hook provided by library to consume PaginatedMessageListContext.

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

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

Value

hasMore

False if Channel has loaded all the messages in history, via pagination. Channel component uses this value to decide if more messages should be queried from server when user reaches top of the MessageList.

loadingMore

True if Channel is querying more messages in the past from server, as part of pagination logic. MessageList component uses this value to display or hide inline loading indicator at top of the list.

loadingMoreRecent

True if Channel is querying more recent messages from server, as part of pagination logic. MessageList component uses this value to display or hide inline loading indicator at bottom of the list.

loadMore

Function to load more messages before the top message in list. This function gets called from onScroll handler of underlying FlatList, when scroll reaches top of the list and hasMore is true.

loadMoreRecent

Function to load more messages before the top message in list. This function gets called from onScroll handler of underlying FlatList, when scroll reaches top of the list and hasMoreRecent is true.

messages

List of messages currently loading in channel.

setLoadingMore

Setter function for loadingMore

setLoadingMoreRecent

Setter function for loadingMoreRecent