For AI agents: this page in Markdown: https://www.pubnub.com/docs/chat/components/react-native/ui-components/message-list.md. Documentation index: https://www.pubnub.com/llms-full.txt.

Message List for PubNub Chat Components for React Native

USED BY THE OLD IA, PLEASE DISREGARD

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.


USED BY THE OLD IA, PLEASE DISREGARD

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:

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

Was this page useful?

Last updated on