Channel List for PubNub Chat Components for React Native

Renders an interactive list of channels.

It can represent all channels of the application, only channels joined by the current user, all channels available to be joined, or whatever else is passed into it. A common pattern in chat applications is to render two instances of the component - one visible all the time to show joined channels, and another one hidden inside a modal with channels available to join. Make sure to handle the onChannelSwitched event to switch the current channel passed to the Chat provider.


Check the source code of the Channel List component and its preview on the right.

Configurable parameters

The component source code contains additional parameters that are commented out. These parameters are optional and you can use them to configure the component layout to your liking. Refer to the Parameters section for details on their usage.

Try it out

Modify the source code of the component to your liking and see the changes live on the preview. For example, you can change the theme to dark or uncomment one of the configurable parameters to see how you can modify the component's default behavior.


You can configure the component using these parameters:

ParameterTypeDefault valueDescription
channelsChannelEntity[] | string[]n/aOption to pass a list of channels, including metadata, to render on the list.
sort?(a: ChannelEntity, b: ChannelEntity) => -1 | 0 | 1n/aChannels are sorted alphabetically by default, you can override that by providing a sorter function.
extraActionsRenderer?(channel: ChannelEntity) => JSX.Elementn/aOption to provide an extra actions renderer to add custom action buttons to each channel.
channelRenderer?(channel: ChannelEntity) => JSX.Elementn/aOption to provide a custom channel renderer to override default themes and styles.
onChannelSwitched?(channel: ChannelEntity) => unknownn/aCallback run when a user clicked one of the channels. Can be used to switch the current channel.
onChannelLongPressed?(channel: ChannelEntity) => unknownn/aCallback run when a user long pressed one of the channels. Can be used for extra actions menu.
style?ChannelListStylen/aOption to provide a custom StyleSheet for the component. It will be merged with the default styles.
Last updated on