# MessageList

`MessageList` uses [`FlatList`](https://reactnative.dev/docs/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

```tsx {8}
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](https://reactnative.dev/docs/flatlist#props).

```tsx
const flatListProps = { bounces: true };

<MessageList additionalFlatListProps={flatListProps} />;
```

<admonition type="warning">

Don't use `additionalFlatListProps` to access the FlatList ref, use [`setFlatListRef`](#setflatlistref) instead.

</admonition>

| Type                    |
| ----------------------- |
| `Object` \| `undefined` |

### `inverted`

Sets the `inverted` prop on underlying [FlatList](https://reactnative.dev/docs/flatlist#inverted).

| Type                     | Default |
| ------------------------ | ------- |
| `Boolean` \| `undefined` | `true`  |

### `isListActive`

Whether the list is active. Derived from `isChannelActive` in [`ChannelContext`](/chat/docs/sdk/react-native/v8/contexts/channel-context/).

| Type                    | Default |
| ----------------------- | ------- |
| `Boolean`\| `undefined` | `false` |

### `noGroupByUser`

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

| Type                     | Default |
| ------------------------ | ------- |
| `Boolean` \| `undefined` | `false` |

### `onListScroll`

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

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

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

| Type                     |
| ------------------------ |
| `Function`\| `undefined` |

### `onThreadSelect`

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

| Type                      |
| ------------------------- |
| `Function` \| `undefined` |

### `setFlatListRef`

Access the underlying FlatList ref.

#### Example

```tsx
const flRef = useRef();

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

| Type                      |
| ------------------------- |
| `Function` \| `undefined` |

### `threadList`

Whether messages are part of a thread.

| Type                     | Default |
| ------------------------ | ------- |
| `Boolean` \| `undefined` | `false` |

### `isLiveStreaming`

<admonition type="note">

This component is available since version `8.6.2` of the SDK.

</admonition>

Enables internal `MessageList` optimizations for live-streaming.

| Type                     | Default |
| ------------------------ | ------- |
| `Boolean` \| `undefined` | `false` |

## 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.

| Type                         | Default                                                                                                                                                              |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType \| `undefined` | [`InlineLoadingMoreIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/InlineLoadingMoreIndicator.tsx) |

### `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`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/InlineLoadingMoreRecentIndicator.tsx) |

### `ScrollToBottomButton`

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

| Type          | Default                                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`ScrollToBottomButton`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageList/ScrollToBottomButton.tsx) |

### `TypingIndicator`

Renders the typing indicator inside `MessageList`.

| Type          | Default                                                                                                                                           |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`TypingIndicator`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/MessageList/TypingIndicator.tsx) |

### `DateHeader`

Renders the sticky date header inside `MessageList`.

| Type          | Default                                                                                                                              |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | [`DateHeader`](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/MessageList/DateHeader.tsx) |


---

This page was last updated at 2026-04-17T17:33:44.622Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/message-list/](https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/message-list/).