# ChannelListMessenger

Component to render list of channels, within the [`ChannelList`](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel-list/) component.
This is the default component provided to the prop [`List`](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel-list/#list) on the `ChannelList` component.

## Props

### additionalFlatListProps

Additional props provided to the underlying [FlatList](https://reactnative.dev/docs/flatlist#props).

#### Example

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

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

>
> **Warning:** Don't use `additionalFlatListProps` to access the FlatList ref, use `setFlatListRef` instead.
>

| Type   |
| ------ |
| object |

### channels

Array of channels currently loaded within the `ChannelList` component.

| Type  |
| ----- |
| array |

### error

True if a call to [query channels API call](https://getstream.io/chat/docs/javascript/query-channels/) within `ChannelList` component results in error, either during first load or during pagination.

| Type                    |
| ----------------------- |
| Error object \| boolean |

### `loadingChannels`

True if `ChannelList` component is loading the first page of channels.

| Type    |
| ------- |
| boolean |

### loadingNextPage

True if `ChannelList` component is loading more channels as part of pagination. This will be set to true when user scrolls to bottom of the list and [`hasNextPage`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/channels-context/#hasnextpage) is true.

| Type    |
| ------- |
| boolean |

### loadMoreThreshold

Sets the [`onEndReachedThreshold`](https://reactnative.dev/docs/flatlist#onendreachedthreshold) of the underlying FlatList.

| Type   | Default |
| ------ | ------- |
| number | 2       |

### loadNextPage

Function to load next page for the `ChannelList` component.

| Type     |
| -------- |
| function |

### refreshing

True if `ChannelList` component is refreshing the list (using [`refreshList`](#refreshlist) function call). Refreshing state will be triggered either when user executes pull-to-refresh gesture or if network connection is being recovered.
This value is attached to [refreshing](https://reactnative.dev/docs/flatlist#refreshing) prop of underlying `FlatList` component of `ChannelList`.

| Type    |
| ------- |
| boolean |

### `refreshList`

Function to manually re-sync or refresh the channels in `ChannelList` component.

>
> **Note:** Calling `refreshList` will trigger a [RefreshControl](https://reactnative.dev/docs/refreshcontrol) on underlying FlatList component.
>

| Type     |
| -------- |
| function |

### `reloadList`

Function to manually reload the channels in `ChannelList` component.

>
> **Note:** Calling `reloadList` will wipe out the existing list of channels and show a loading indicator until new results are ready.
>

| Type     |
| -------- |
| function |

### setFlatListRef

Callback function to access the underlying [FlatList](https://reactnative.dev/docs/flatlist) ref.

#### Example

```tsx
const flatListRef = useRef();

<ChannelList setFlatListRef={(ref) => (flatListRef.current = ref)} />;
```

| Type     |
| -------- |
| function |

| Parameter | Description  |
| --------- | ------------ |
| ref       | FlatList ref |

### EmptyStateIndicator

Rendered when the channel list is empty and not loading via the [ListEmptyComponent](https://reactnative.dev/docs/flatlist#listemptycomponent) prop on the FlatList.

| Type      | Default                                                                                                                                          |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| component | [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx) |

### FooterLoadingIndicator

Rendered when [`loadingNextPage` from `ChannelsContext`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/channels-context/#loadingnextpage) is true via the [`ListFooterComponent`](https://reactnative.dev/docs/flatlist#listfootercomponent) prop on the FlatList.

| Type      | Default                                                                                                                                                                       |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [ChannelListFooterLoadingIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx) |

### ListHeaderComponent

Rendered when provided if the channel list is not empty via the [`ListHeaderComponent`](https://reactnative.dev/docs/flatlist#listheadercomponent) prop on the FlatList.

| Type      |
| --------- |
| component |

### LoadingErrorIndicator

Rendered when [`error` from `ChannelsContext`](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/channels-context/#error) is true, and the channel list is empty and not loading.

| Type      | Default                                                                                                                                              |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [LoadingErrorIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/LoadingErrorIndicator.tsx) |

### LoadingIndicator

Rendered when the channel list is empty and loading via the [ListEmptyComponent](https://reactnative.dev/docs/flatlist#listemptycomponent) prop on the FlatList.

| Type      | Default                                                                                                                                                           |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| component | [ChannelListLoadingIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelList/ChannelListLoadingIndicator.tsx) |

---

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