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
- 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
Check the source code of the Message List component and its preview on the right.
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):
Choose one of the Preview tabs and click
Tap to Playfor the Android and iOS emulators to have the sample component up and running.
Type in a message in the message input field and send it. You will see the message displayed above the message input field.
Modify the source code of the component to your liking and see the changes live on the preview. For example, you can change the
darkor 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:
|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 |
|boolean||Option to enable rendering reactions that were added to messages. Make sure to also set up |
|ReactElement||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.|
|(message: MessageEnvelope) => JSX.Element||n/a||Option to provide an extra actions renderer to add custom action buttons to each message.|
|(props: MessageRendererProps) => JSX.Element||n/a||Option to provide a custom message item renderer if themes and styles aren't enough.|
|(props: MessageRendererProps) => JSX.Element||n/a||Option to provide a custom message bubble renderer if themes and styles aren't enough.|
|(file: FileAttachment) => JSX.Element||n/a||Option to provide a custom file renderer to change how images and other files are shown.|
|(message: MessageEnvelope) => boolean||n/a||This option only works when you use either |
|(event: NativeSyntheticEvent<NativeScrollEvent>) => unknown||n/a||Callback run on a list scroll.|
|MessageListStyle||n/a||Option to provide a custom StyleSheet for the component. It will be merged with the default styles.|