Info:
This is documentation for Stream Chat React Native SDK v5, which is no longer actively maintained. For up-to-date documentation, see the latest version (v9).

MessageSimple

Component to render a message within the MessageList. This component has been well optimized to save un-necessary re-renderings. This is the default component provided to the prop MessageSimple on the Channel component.

Props

alignment

Sets if the message should be aligned to right or left side of list.

Type Default
enum('right', 'left') 'right'

enableMessageGroupingByUser

Note: This prop is available only in SDK version >= v3.9.0

If false, consecutive messages from same user won't be grouped together.

Type Default
boolean true

groupStyles

Position of message in the group. A message group is a group of consecutive messages from the same user. groupStyles can be used to style the message as per their position in message group.

For example, user avatar (to which message belongs to) is only showed for last (bottom) message in group.

Type
array of enum('top', 'bottom', 'middle', 'single')

hasReactions

True if the message has at least 1 reaction.

Type
boolean

message

Message object.

Type
Message type

UI Component Props

MessageAvatar

Component to render avatar of sender for message, within MessageList. This component is only rendered for messages from other users.

Type Default
ComponentType MessageAvatar

MessageContent

Component to render content of message including status, attachments, reactions etc., within MessageList.

Type Default
ComponentType MessageContent

ReactionList

Component to render list of reactions at top of message bubble.

Type Default
ComponentType ReactionList
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v5: <Your Question>