Message List for PubNub Chat Components for React Native

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:

ParameterTypeDefault valueDescription
fetchMessages?number0Set 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?booleanfalseOption 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/aOption 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.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.
Last updated on