# MessageList

`MessageList` component uses [`FlatList`](https://reactnative.dev/docs/flatlist) to render list of messages within a channel (provided as a prop to parent `Channel` component).
This component must be rendered within `Channel` component. It uses `message.type` property, to render corresponding view for message.

## 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 any additional props on underlying [FlatList](https://reactnative.dev/docs/flatlist#props).

```jsx
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`

Determines whether the list is active. The value is derived from the `isChannelActive` in the [`ChannelContext`](/chat/docs/sdk/react-native/v6/contexts/channel-context/).

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

### `noGroupByUser`

When true, consecutive messages from same user won't be grouped together. Avatar for user of message is only shown for last message of the group.

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

### `onListScroll`

Callback function which gets called when list scrolls. This function receives scroll event from underlying FlatList as a parameter.

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`

Function which gets called when user presses on `"Thread Reply"` action from message actions or `MessageReplies` component which displays the number of thread replies on the message.
You should put navigation logic to switch to Thread Screen within this function.

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

### `setFlatListRef`

Use this callback function to gain access to the underlying FlatList ref.

#### Example

```jsx
const flRef = useRef();

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

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

### `threadList`

Boolean whether or not the Messages in the MessageList are part of a Thread.

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

## UI Component Props

### `FooterComponent`

Component to render footer for MessageList component. Since we use inverted FlatList, this component will be rendered at top of the list.
In absence of this prop, an inline loading indicator will be rendered when channel is loading more results.

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

### `HeaderComponent`

Component to render header for MessageList component. Since we use inverted FlatList, this component will be rendered at bottom of the list.
In absence of this prop, an inline loading indicator will be rendered when channel is loading more results.

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

### `ScrollToBottomButton`

Component that renders the scroll to bottom button, to scroll to the latest message in the list when the scroll position is somewhere else.

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

### `TypingIndicator`

Component to render typing indicator within enclosed `MessageList` component.

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

### `DateHeader`

Component to render sticky date header within enclosed `MessageList` component.

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


---

This page was last updated at 2026-05-13T13:38:46.592Z.

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