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

Prop	Description	Type
`additionalFlatListProps`	Set additional props on the underlying FlatList. Do not use this to access the FlatList ref; use `setFlatListRef` instead.	`object \| undefined`
`inverted`	Sets the `inverted` prop on underlying FlatList. Defaults to `true`.	`boolean \| undefined`
`isListActive`	Whether the list is active. Derived from `isChannelActive` in `ChannelContext`. Defaults to `false`.	`boolean \| undefined`
`noGroupByUser`	When true, consecutive messages from the same user are not grouped. The avatar shows only on the last message in the group. Defaults to `false`.	`boolean \| undefined`
`onListScroll`	Called when the list scrolls. Receives the underlying FlatList scroll event.	`function \| undefined`
`onThreadSelect`	Called when the user selects a thread reply action or taps `MessageReplies`. Use it to navigate to the thread screen.	`function \| undefined`
`setFlatListRef`	Access the underlying FlatList ref.	`function \| undefined`
`threadList`	Whether messages are part of a thread. Defaults to `false`.	`boolean \| undefined`
`isLiveStreaming`	Enables internal `MessageList` optimizations for live-streaming. Available since version 8.6.2 of the SDK. Defaults to `false`.	`boolean \| undefined`

The UI components used by MessageList are read from ComponentsContext and can be customized via WithComponents. Wrap MessageList (or any ancestor) with WithComponents and pass the components you want to override.

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

<WithComponents
  overrides={{
    ScrollToBottomButton: CustomScrollToBottom,
    DateHeader: CustomDateHeader,
  }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

The following components can be overridden:

`FooterComponent`

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

Type	Default
ComponentType \| `undefined`	`InlineLoadingMoreIndicator`

`HeaderComponent`

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

Type	Default
ComponentType \| `undefined`	`InlineLoadingMoreRecentIndicator`

`ScrollToBottomButton`

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

Type	Default
ComponentType	`ScrollToBottomButton`

`TypingIndicator`

Renders the typing indicator inside MessageList.

Type	Default
ComponentType	`TypingIndicator`

`DateHeader`

Renders the sticky date header inside MessageList.

Type	Default
ComponentType	`DateHeader`

Examples

Setting additional FlatList props

const flatListProps = { bounces: true };

<MessageList additionalFlatListProps={flatListProps} />;

Accessing the FlatList ref

const flRef = useRef();

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

ChannelContext

ScrollToBottomButton

On this page:

Best Practices
General Usage
Props
UI Component Overrides
Examples
- Setting additional FlatList props
- Accessing the FlatList ref