MessageList

MessageList uses FlatList to render channel messages. It must be rendered inside Channel and uses message.type to pick the appropriate message view.

Best Practices

• Keep MessageList inside Channel so context and pagination work correctly.
• Avoid heavy custom render logic per row; memoize where possible.
• Use setFlatListRef instead of additionalFlatListProps for refs.
• Toggle isLiveStreaming for high-traffic channels to improve performance.
• Be mindful of grouping/avatars if you disable noGroupByUser.

General Usage

import {
  Chat,
  Channel,
  OverlayProvider,
  MessageList,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <MessageList />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

Props

additionalFlatListProps

Set additional props on the underlying FlatList.

const flatListProps = { bounces: true };

<MessageList additionalFlatListProps={flatListProps} />;

inverted

Sets the inverted prop on underlying FlatList.

isListActive

Whether the list is active. Derived from isChannelActive in ChannelContext.

noGroupByUser

When true, consecutive messages from the same user are not grouped. The avatar shows only on the last message in the group.

onListScroll

Called when the list scrolls. Receives the underlying FlatList scroll event.

The event has the following shape (all values are numbers):

{
  nativeEvent: {
    contentInset: {bottom, left, right, top},
    contentOffset: {x, y},
    contentSize: {height, width},
    layoutMeasurement: {height, width},
    zoomScale
  }
}

onThreadSelect

Called when the user selects a thread reply action or taps MessageReplies. Use it to navigate to the thread screen.

setFlatListRef

Access the underlying FlatList ref.

Example

const flRef = useRef();

<MessageList setFlatListRef={(ref) => (flRef.current = ref)} />;

threadList

Whether messages are part of a thread.

isLiveStreaming

Enables internal MessageList optimizations for live-streaming.

UI Component Props

FooterComponent

Footer component. Because the list is inverted, this renders at the top. Defaults to an inline loading indicator while loading more.

HeaderComponent

Header component. Because the list is inverted, this renders at the bottom. Defaults to an inline loading indicator while loading more recent messages.

ScrollToBottomButton

Renders the scroll-to-bottom button when the list isn't at the latest message.

TypingIndicator

Renders the typing indicator inside MessageList.

DateHeader

Renders the sticky date header inside MessageList.