Message List for PubNub Chat Components for React Native

Fetches historical messages using the scrolling pagination pattern and subscribes to the current channel to stay up to date with new messages.

It also displays data in an interactive list, including user names, avatars, the time when a message was sent, and attachments (links, images) and allows to react to messages with emojis and to show those reactions immediately.


Check the preview of a sample Message List component and its source code.

To test it, send a message as Sue Flores through the Message Input component and you will see it added to the bottom of this list.

Message List


You can configure the component using these parameters:

ParameterTypeDefault valueDescription
fetchMessages?number0Set this option to a non-zero value to enable fetching messages from the History API. This feature uses the infinite scrolling pattern and takes a maximum value of 25.
welcomeMessages?false | MessageEnvelope | MessageEnvelope[]n/aOption to provide custom welcome messages to replace the default ones. Set to "false" to disable it.
extraActionsRenderer?(message: MessageEnvelope) => JSX.Elementn/aOption to provide an extra actions renderer to add custom action buttons to each message.
messageRenderer?(props: MessageRendererProps) => JSX.Elementn/aOption to provide a custom message item renderer if themes and styles aren't enough.
bubbleRenderer?(props: MessageRendererProps) => JSX.Elementn/aOption to provide a custom message bubble renderer if themes and styles aren't enough.
fileRenderer?(file: FileAttachment) => JSX.Elementn/aOption to provide a custom file renderer to change how images and other files are shown.
filter?(message: MessageEnvelope) => booleann/aThis option only works when you use either messageRenderer or bubbleRenderer. It allows you to apply one of the custom renderers only to the messages selected by the filter.
onScroll?(event: NativeSyntheticEvent<NativeScrollEvent>) => unknownn/aCallback run on a list scroll.
style?MessageListStylen/aOption to provide a custom StyleSheet for the component. It will be merged with the default styles.