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.

General Usage

import { Chat, Channel, OverlayProvider, MessageList } from 'stream-chat-react-native';

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <MessageList />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

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 | undefined

inverted

Sets the inverted prop on underlying FlatList.

TypeDefault
Boolean | undefinedtrue

isListActive

Determines whether the list is active. The value is derived from the isChannelActive in the ChannelContext.

TypeDefault
Boolean| undefinedfalse

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.

TypeDefault
Boolean | undefinedfalse

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| undefined

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 | undefined

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 | undefined

threadList

Boolean whether or not the Messages in the MessageList are part of a Thread.

TypeDefault
Boolean | undefinedfalse

UI Component Props

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.

TypeDefault
ComponentType | undefinedInlineLoadingMoreIndicator

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.

TypeDefault
ComponentType | undefinedInlineLoadingMoreRecentIndicator

ScrollToBottomButton

Component that renders the scroll to bottom button, to scroll to the latest message in the list when the scroll position is somewhere else.

TypeDefault
ComponentTypeScrollToBottomButton

TypingIndicator

Component to render typing indicator within enclosed MessageList component.

TypeDefault
ComponentTypeTypingIndicator

DateHeader

Component to render sticky date header within enclosed MessageList component.

TypeDefault
ComponentTypeDateHeader
© Getstream.io, Inc. All Rights Reserved.