<OverlayProvider>
<Chat client={client}>
<Channel channel={channel}>
<MessageList />
</Channel>
</Chat>
</OverlayProvider>
MessageList
MessageList
component uses FlatList
to render list of messages within a channel (provided as a prop to parent Channel
component).
This component must be rendered within Channel
component. It uses message.type
property, to render corresponding view for message.
Additionally it also renders following building blocks for message list:
DateHeader
- which is a sticky header at top of the list and updates as you scroll up within list.InlineDateSeparator
- which act as separators for messages from different datesScrollToBottomButton
- which when pressed, scrolls the list to most recent message.
Basic Usage
Props
additionalFlatListProps
Set any additional props on underlying FlatList.
const flatListProps = { bounces: true };
<MessageList additionalFlatListProps={flatListProps} />;
Don’t use additionalFlatListProps
to access the FlatList ref, use setFlatListRef
instead.
Type |
---|
object |
inverted
Sets the inverted
prop on underlying FlatList
Type | Default |
---|---|
boolean | true |
noGroupByUser
When true, consecutive messages from same user won’t be grouped together. Avatar for user of message is only shown for last message of the group.
Type | Default |
---|---|
boolean | false |
onListScroll
Callback function which gets called when list scrolls. This function receives scroll event from underlying FlatList as a parameter.
The event has the following shape (all values are numbers):
{
nativeEvent: {
contentInset: {bottom, left, right, top},
contentOffset: {x, y},
contentSize: {height, width},
layoutMeasurement: {height, width},
zoomScale
}
}
Type |
---|
function |
onThreadSelect
Function which gets called when user presses on "Thread Reply"
action from message actions or MessageReplies
component which displays the number of thread replies on the message.
You should put navigation logic to switch to Thread Screen within this function.
Type |
---|
function |
setFlatListRef
Use this callback function to gain access to the underlying FlatList ref.
Example
const flRef = useRef();
<MessageList setFlatListRef={ref => (flRef.current = ref)} />;
Type |
---|
function |
FooterComponent
Component to render footer for MessageList component. Since we use inverted FlatList, this component will be rendered at top of the list. In absence of this prop, an inline loading indicator will be rendered when channel is loading more results.
Type | Default |
---|---|
component | InlineLoadingMoreIndicator |
HeaderComponent
Component to render header for MessageList component. Since we use inverted FlatList, this component will be rendered at bottom of the list. In absence of this prop, an inline loading indicator will be rendered when channel is loading more results.
Type | Default |
---|---|
component | InlineLoadingMoreRecentIndicator |