Message List for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

Fetches historical messages using the scrolling pagination pattern, subscribes to the current channel to stay up to date with new messages, and displays the following in an interactive list:

• User names
• Avatars
• Time the message was sent
• Attachments (links, images)

Moreover, this component allows you to react to messages with emojis and to show those reactions immediately.

React Native version requirement

PubNub Chat Components for React Native require React Native in version >= v0.72.4 as a dependency. If you use a lower version, you can experience a known bug on Android devices that affects FlatList performance.

Component

Check the source code of the Message 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

Test the component as Sue Flores (default user):

1. Choose one of the Preview tabs and click Tap to Play for the Android and iOS emulators to have the sample component up and running.

2. Type in a message in the message input field and send it. You will see the message displayed above the message input field.

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

Parameters

You can configure the component using these parameters:

Parameter	Type	Default value	Description
fetchMessages?	number	0	Set this option to a non-zero value to enable fetching messages from the Message Persistence API. This feature uses the infinite scrolling pattern and takes a maximum value of 25.
enableReactions?	boolean	false	Option to enable rendering reactions that were added to messages. Make sure to also set up reactionsPicker when this option is enabled.
reactionsPicker?	ReactElement<EmojiPickerElementProps>	n/a	Option to pass in a component used for picking message reactions. For more details, refer to the Message Reactions section in the docs.
extraActionsRenderer?	(message: MessageEnvelope) => JSX.Element	n/a	Option to provide an extra actions renderer to add custom action buttons to each message.
messageRenderer?	(props: MessageRendererProps) => JSX.Element	n/a	Option to provide a custom message item renderer if themes and styles aren't enough.
bubbleRenderer?	(props: MessageRendererProps) => JSX.Element	n/a	Option to provide a custom message bubble renderer if themes and styles aren't enough.
fileRenderer?	(file: FileAttachment) => JSX.Element	n/a	Option to provide a custom file renderer to change how images and other files are shown.
filter?	(message: MessageEnvelope) => boolean	n/a	This 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>) => unknown	n/a	Callback run on a list scroll.
style?	MessageListStyle	n/a	Option to provide a custom StyleSheet for the component. It will be merged with the default styles.