stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/MessageList/MessageList.tsx

@@ -8,6 +8,8 @@ import {
   ViewToken,
 } from 'react-native';
 
+import type { Channel as StreamChannel } from 'stream-chat';
+
 import {
   isMessageWithStylesReadByAndDateSeparator,
   MessageType,
@@ -43,26 +45,15 @@ import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
+import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
   isDayOrMoment,
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { Channel as StreamChannel } from 'stream-chat';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   container: {
@@ -96,15 +87,9 @@ const styles = StyleSheet.create({
 });
 
 const keyExtractor = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  item: MessageType<At, Ch, Co, Ev, Me, Re, Us>,
+  item: MessageType<StreamChatGenerics>,
 ) =>
   item.id ||
   (item.created_at
@@ -118,19 +103,14 @@ const flatListViewabilityConfig = {
 };
 
 type MessageListPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<AttachmentPickerContextValue, 'closePicker' | 'selectedPicker' | 'setSelectedPicker'> &
   Pick<
-    ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    ChannelContextValue<StreamChatGenerics>,
     | 'channel'
     | 'disabled'
     | 'EmptyStateIndicator'
+    | 'hideStickyDateHeader'
     | 'loadChannelAtMessage'
     | 'loading'
     | 'LoadingIndicator'
@@ -141,23 +121,21 @@ type MessageListPropsWithContext<
     | 'setTargetedMessage'
     | 'StickyHeader'
     | 'targetedMessage'
-    | 'typingEventsEnabled'
-  > &
-  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
-  Pick<ImageGalleryContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'setImages'> &
-  Pick<
-    PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'loadMore' | 'loadMoreRecent'
   > &
+  Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
+  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
-    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessagesContextValue<StreamChatGenerics>,
+    | 'deletedMessagesVisibilityType'
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
     | 'initialScrollToFirstUnreadMessage'
     | 'InlineDateSeparator'
     | 'InlineUnreadIndicator'
+    | 'legacyImageViewerSwipeBehaviour'
     | 'Message'
     | 'ScrollToBottomButton'
     | 'MessageSystem'
@@ -165,7 +143,7 @@ type MessageListPropsWithContext<
     | 'TypingIndicator'
     | 'TypingIndicatorContainer'
   > &
-  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'loadMoreThread' | 'thread'> &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> &
   Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
@@ -181,7 +159,7 @@ type MessageListPropsWithContext<
      *  additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />
      * ```
      */
-    additionalFlatListProps?: Partial<FlatListProps<MessageType<At, Ch, Co, Ev, Me, Re, Us>>>;
+    additionalFlatListProps?: Partial<FlatListProps<MessageType<StreamChatGenerics>>>;
     /**
      * UI component for footer of message list. By default message list will use `InlineLoadingMoreIndicator`
      * as FooterComponent. If you want to implement your own inline loading indicator, you can access `loadingMore`
@@ -202,6 +180,7 @@ type MessageListPropsWithContext<
     HeaderComponent?: React.ComponentType;
     /** Whether or not the FlatList is inverted. Defaults to true */
     inverted?: boolean;
+    isListActive?: boolean;
     /** Turn off grouping of messages by user */
     noGroupByUser?: boolean;
     onListScroll?: ScrollViewProps['onScroll'];
@@ -210,7 +189,7 @@ type MessageListPropsWithContext<
      *
      * @param message A message object to open the thread upon.
      */
-    onThreadSelect?: (message: ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['thread']) => void;
+    onThreadSelect?: (message: ThreadContextValue<StreamChatGenerics>['thread']) => void;
     /**
      * Use `setFlatListRef` to get access to ref to inner FlatList.
      *
@@ -222,7 +201,7 @@ type MessageListPropsWithContext<
      *  }}
      * ```
      */
-    setFlatListRef?: (ref: FlatListType<MessageType<At, Ch, Co, Ev, Me, Re, Us>> | null) => void;
+    setFlatListRef?: (ref: FlatListType<MessageType<StreamChatGenerics>> | null) => void;
     /**
      * Boolean whether or not the Messages in the MessageList are part of a Thread
      **/
@@ -239,15 +218,9 @@ type MessageListPropsWithContext<
  * [TranslationContext](https://getstream.github.io/stream-chat-react-native/v3/#translationcontext)
  */
 const MessageListWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageListPropsWithContext<StreamChatGenerics>,
 ) => {
   const LoadingMoreIndicator = props.threadList
     ? InlineLoadingMoreThreadIndicator
@@ -258,16 +231,20 @@ const MessageListWithContext = <
     client,
     closePicker,
     DateHeader,
+    deletedMessagesVisibilityType,
     disabled,
     disableTypingIndicator,
     EmptyStateIndicator,
     FlatList,
     FooterComponent = LoadingMoreIndicator,
     HeaderComponent = InlineLoadingMoreRecentIndicator,
+    hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
     inverted = true,
+    isListActive = false,
+    legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -296,7 +273,6 @@ const MessageListWithContext = <
     tDateTimeParser,
     thread,
     threadList = false,
-    typingEventsEnabled,
     TypingIndicator,
     TypingIndicatorContainer,
   } = props;
@@ -313,7 +289,8 @@ const MessageListWithContext = <
     [myMessageTheme, theme],
   );
 
-  const messageList = useMessageList<At, Ch, Co, Ev, Me, Re, Us>({
+  const messageList = useMessageList<StreamChatGenerics>({
+    deletedMessagesVisibilityType,
     inverted,
     noGroupByUser,
     threadList,
@@ -325,7 +302,7 @@ const MessageListWithContext = <
    * We need topMessage and channelLastRead values to set the initial scroll position.
    * So these values only get used if `initialScrollToFirstUnreadMessage` prop is true.
    */
-  const topMessageBeforeUpdate = useRef<MessageType<At, Ch, Co, Ev, Me, Re, Us>>();
+  const topMessageBeforeUpdate = useRef<MessageType<StreamChatGenerics>>();
   const topMessageAfterUpdate = messageList[messageList.length - 1];
 
   const [autoscrollToTop, setAutoscrollToTop] = useState(false);
@@ -340,7 +317,7 @@ const MessageListWithContext = <
   const onStartReachedInPromise = useRef<Promise<void> | null>(null);
   const onEndReachedInPromise = useRef<Promise<void> | null>(null);
 
-  const flatListRef = useRef<FlatListType<MessageType<At, Ch, Co, Ev, Me, Re, Us>> | null>(null);
+  const flatListRef = useRef<FlatListType<MessageType<StreamChatGenerics>> | null>(null);
 
   const initialScrollSet = useRef<boolean>(false);
   const channelResyncScrollSet = useRef<boolean>(true);
@@ -349,8 +326,8 @@ const MessageListWithContext = <
   const [lastReceivedId, setLastReceivedId] = useState(getLastReceivedMessage(messageList)?.id);
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
-  const [stickyHeaderDate, setStickyHeaderDate] = useState<Date>(new Date());
-  const stickyHeaderDateRef = useRef(new Date());
+  const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
+  const stickyHeaderDateRef = useRef<Date | undefined>();
   /**
    * channel.lastRead throws error if the channel is not initialized.
    */
@@ -359,8 +336,8 @@ const MessageListWithContext = <
   const channelLastRead = useRef(getLastReadSafely());
 
   const isUnreadMessage = (
-    message: MessageType<At, Ch, Co, Ev, Me, Re, Us> | undefined,
-    lastRead?: ReturnType<StreamChannel<At, Ch, Co, Ev, Me, Re, Us>['lastRead']>,
+    message: MessageType<StreamChatGenerics> | undefined,
+    lastRead?: ReturnType<StreamChannel<StreamChatGenerics>['lastRead']>,
   ) => message && lastRead && message.created_at && lastRead < message.created_at;
 
   /**
@@ -389,14 +366,16 @@ const MessageListWithContext = <
   const updateStickyHeaderDateIfNeeded = (viewableItems: ViewToken[]) => {
     if (viewableItems.length) {
       const lastItem = viewableItems.pop() as {
-        item: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+        item: MessageType<StreamChatGenerics>;
       };
 
+      const isMessageTypeDeleted = lastItem.item.type === 'deleted';
+
       if (
         lastItem?.item?.created_at &&
-        !lastItem.item.deleted_at &&
+        !isMessageTypeDeleted &&
         typeof lastItem.item.created_at !== 'string' &&
-        lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current.toDateString()
+        lastItem.item.created_at.toDateString() !== stickyHeaderDateRef.current?.toDateString()
       ) {
         stickyHeaderDateRef.current = lastItem.item.created_at;
         setStickyHeaderDate(lastItem.item.created_at);
@@ -410,7 +389,7 @@ const MessageListWithContext = <
    */
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
-      if (viewableItems) {
+      if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
       setInitialScrollIfNeeded();
@@ -427,7 +406,26 @@ const MessageListWithContext = <
   }, [disabled]);
 
   useEffect(() => {
-    if (!loading && channel && channel.countUnread() <= scrollToFirstUnreadThreshold) {
+    /**
+     * 1. !initialScrollToFirstUnreadMessage && channel.countUnread() > 0
+     *
+     *    In this case MessageList won't scroll to first unread message when opened, so we can mark
+     *    the channel as read right after opening.
+     *
+     * 2. initialScrollToFirstUnreadMessage && channel.countUnread() <= scrollToFirstUnreadThreshold
+     *
+     *    In this case MessageList will be opened to first unread message.
+     *    But if there are not enough (scrollToFirstUnreadThreshold) unread messages, then MessageList
+     *    won't need to scroll up. So we can safely mark the channel as read right after opening.
+     */
+    const shouldMarkReadOnFirstLoad =
+      !loading &&
+      channel &&
+      ((!initialScrollToFirstUnreadMessage && channel.countUnread() > 0) ||
+        (initialScrollToFirstUnreadMessage &&
+          channel.countUnread() <= scrollToFirstUnreadThreshold));
+
+    if (shouldMarkReadOnFirstLoad) {
       markRead();
     }
   }, [loading]);
@@ -523,7 +521,7 @@ const MessageListWithContext = <
     item: message,
   }: {
     index: number;
-    item: MessageType<At, Ch, Co, Ev, Me, Re, Us>;
+    item: MessageType<StreamChatGenerics>;
   }) => {
     if (!channel || !channel.initialized) return null;
 
@@ -538,7 +536,9 @@ const MessageListWithContext = <
     if (message.type === 'system') {
       return (
         <>
-          <MessageSystem message={message} style={styles.messagePadding} />
+          <View testID={`message-list-item-${index}`}>
+            <MessageSystem message={message} style={styles.messagePadding} />
+          </View>
           {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
         </>
       );
@@ -548,43 +548,49 @@ const MessageListWithContext = <
     return wrapMessageInTheme ? (
       <>
         <ThemeProvider mergedStyle={modifiedTheme}>
+          <View testID={`message-list-item-${index}`}>
+            <Message
+              goToMessage={goToMessage}
+              groupStyles={
+                isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
+              }
+              isTargetedMessage={targetedMessage === message.id}
+              lastReceivedId={lastReceivedId === message.id ? lastReceivedId : undefined}
+              message={message}
+              onThreadSelect={onThreadSelect}
+              showUnreadUnderlay={showUnreadUnderlay}
+              style={styles.messagePadding}
+              threadList={threadList}
+            />
+          </View>
+        </ThemeProvider>
+        {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
+          <InlineDateSeparator date={message.dateSeparator} />
+        )}
+        {/* Adding indicator below the messages, since the list is inverted */}
+        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
+      </>
+    ) : (
+      <>
+        <View testID={`message-list-item-${index}`}>
           <Message
             goToMessage={goToMessage}
             groupStyles={
               isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
             }
-            lastReceivedId={lastReceivedId === message.id ? lastReceivedId : undefined}
+            isTargetedMessage={targetedMessage === message.id}
+            lastReceivedId={
+              lastReceivedId === message.id || message.quoted_message_id
+                ? lastReceivedId
+                : undefined
+            }
             message={message}
             onThreadSelect={onThreadSelect}
             showUnreadUnderlay={showUnreadUnderlay}
             style={styles.messagePadding}
-            targetedMessage={targetedMessage === message.id}
             threadList={threadList}
           />
-        </ThemeProvider>
-        {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
-          <InlineDateSeparator date={message.dateSeparator} />
-        )}
-        {/* Adding indicator below the messages, since the list is inverted */}
-        {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
-      </>
-    ) : (
-      <>
-        <Message
-          goToMessage={goToMessage}
-          groupStyles={
-            isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
-          }
-          lastReceivedId={
-            lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
-          }
-          message={message}
-          onThreadSelect={onThreadSelect}
-          showUnreadUnderlay={showUnreadUnderlay}
-          style={styles.messagePadding}
-          targetedMessage={targetedMessage === message.id}
-          threadList={threadList}
-        />
+        </View>
         {isMessageWithStylesReadByAndDateSeparator(message) && message.dateSeparator && (
           <InlineDateSeparator date={message.dateSeparator} />
         )}
@@ -785,45 +791,68 @@ const MessageListWithContext = <
     [messageListLengthAfterUpdate],
   );
 
-  const messagesWithImages = messageList.filter((message) => {
-    if (!message.deleted_at && message.attachments) {
-      return message.attachments.some(
-        (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
-      );
-    }
-    return false;
-  });
+  const messagesWithImages =
+    legacyImageViewerSwipeBehaviour &&
+    messageList.filter((message) => {
+      const isMessageTypeDeleted = message.type === 'deleted';
+      if (!isMessageTypeDeleted && message.attachments) {
+        return message.attachments.some(
+          (attachment) =>
+            attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            (attachment.image_url || attachment.thumb_url),
+        );
+      }
+      return false;
+    });
 
   /**
    * This is for the useEffect to run again in the case that a message
    * gets edited with more or the same number of images
    */
-  const imageString = messagesWithImages
-    .map((message) =>
-      message.attachments
-        ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
-        .join(),
-    )
-    .join();
-
-  const numberOfMessagesWithImages = messagesWithImages.length;
+  const imageString =
+    legacyImageViewerSwipeBehaviour &&
+    messagesWithImages &&
+    messagesWithImages
+      .map((message) =>
+        message.attachments
+          ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
+          .join(),
+      )
+      .join();
+
+  const numberOfMessagesWithImages =
+    legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
   const threadExists = !!thread;
+
   useEffect(() => {
-    if ((threadList && thread) || (!threadList && !thread)) {
-      setImages(messagesWithImages);
+    if (
+      legacyImageViewerSwipeBehaviour &&
+      isListActive &&
+      ((threadList && thread) || (!threadList && !thread))
+    ) {
+      setImages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
-  }, [imageString, numberOfMessagesWithImages, threadExists, threadList]);
+  }, [
+    imageString,
+    isListActive,
+    legacyImageViewerSwipeBehaviour,
+    numberOfMessagesWithImages,
+    threadExists,
+    threadList,
+  ]);
 
   const stickyHeaderFormatDate =
-    stickyHeaderDate.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tStickyHeaderDate = tDateTimeParser(stickyHeaderDate);
-  const stickyHeaderDateToRender = isDayOrMoment(tStickyHeaderDate)
-    ? tStickyHeaderDate.format(stickyHeaderFormatDate)
-    : new Date(tStickyHeaderDate).toDateString();
+    stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
+  const tStickyHeaderDate =
+    stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
+  const stickyHeaderDateToRender =
+    tStickyHeaderDate === null || hideStickyDateHeader
+      ? null
+      : isDayOrMoment(tStickyHeaderDate)
+      ? tStickyHeaderDate.format(stickyHeaderFormatDate)
+      : new Date(tStickyHeaderDate).toDateString();
 
   const dismissImagePicker = () => {
     if (!hasMoved && selectedPicker) {
@@ -834,7 +863,7 @@ const MessageListWithContext = <
   const onScrollBeginDrag = () => !hasMoved && selectedPicker && setHasMoved(true);
   const onScrollEndDrag = () => hasMoved && selectedPicker && setHasMoved(false);
 
-  const refCallback = (ref: FlatListType<MessageType<At, Ch, Co, Ev, Me, Re, Us>>) => {
+  const refCallback = (ref: FlatListType<MessageType<StreamChatGenerics>>) => {
     flatListRef.current = ref;
 
     if (setFlatListRef) {
@@ -858,7 +887,10 @@ const MessageListWithContext = <
   }
 
   return (
-    <View style={[styles.container, { backgroundColor: white_snow }, container]}>
+    <View
+      style={[styles.container, { backgroundColor: white_snow }, container]}
+      testID='message-flat-list-wrapper'
+    >
       <FlatList
         contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={messageList}
@@ -890,13 +922,14 @@ const MessageListWithContext = <
       {!loading && (
         <>
           <View style={styles.stickyHeader}>
-            {StickyHeader ? (
-              <StickyHeader dateString={stickyHeaderDateToRender} />
-            ) : messageListLengthAfterUpdate ? (
-              <DateHeader dateString={stickyHeaderDateToRender} />
-            ) : null}
+            {stickyHeaderDateToRender &&
+              (StickyHeader ? (
+                <StickyHeader dateString={stickyHeaderDateToRender} />
+              ) : messageListLengthAfterUpdate ? (
+                <DateHeader dateString={stickyHeaderDateToRender} />
+              ) : null)}
           </View>
-          {!disableTypingIndicator && TypingIndicator && typingEventsEnabled !== false && (
+          {!disableTypingIndicator && TypingIndicator && (
             <TypingIndicatorContainer>
               <TypingIndicator />
             </TypingIndicatorContainer>
@@ -914,32 +947,23 @@ const MessageListWithContext = <
 };
 
 export type MessageListProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<MessageListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageListPropsWithContext<StreamChatGenerics>>;
 
 export const MessageList = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageListProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageListProps<StreamChatGenerics>,
 ) => {
   const { closePicker, selectedPicker, setSelectedPicker } = useAttachmentPickerContext();
   const {
     channel,
     disabled,
     EmptyStateIndicator,
+    enableMessageGroupingByUser,
     error,
+    hideStickyDateHeader,
+    isChannelActive,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -950,37 +974,30 @@ export const MessageList = <
     setTargetedMessage,
     StickyHeader,
     targetedMessage,
-    threadList,
-    typingEventsEnabled,
-  } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { setImages } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useChannelContext<StreamChatGenerics>();
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { setImages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
+    deletedMessagesVisibilityType,
     disableTypingIndicator,
     FlatList,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
     ScrollToBottomButton,
     TypingIndicator,
     TypingIndicatorContainer,
-  } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessagesContext<StreamChatGenerics>();
+  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
-  const { loadMoreThread, thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
   const { t, tDateTimeParser } = useTranslationContext();
 
-  // This needs to happen here because there is already a threadList prop added to the MessageList
-  if (thread?.id && !threadList) {
-    throw new Error(
-      'Please add a threadList prop to your Channel component when rendering a thread list. Check our Channel documentation for more info: https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#threadlist',
-    );
-  }
-
   return (
     <MessageListWithContext
       {...{
@@ -988,14 +1005,19 @@ export const MessageList = <
         client,
         closePicker,
         DateHeader,
+        deletedMessagesVisibilityType,
         disabled,
         disableTypingIndicator,
         EmptyStateIndicator,
+        enableMessageGroupingByUser,
         error,
         FlatList,
+        hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
+        isListActive: isChannelActive,
+        legacyImageViewerSwipeBehaviour,
         loadChannelAtMessage,
         loading,
         LoadingIndicator,
@@ -1020,11 +1042,11 @@ export const MessageList = <
         targetedMessage,
         tDateTimeParser,
         thread,
-        typingEventsEnabled,
         TypingIndicator,
         TypingIndicatorContainer,
       }}
       {...props}
+      noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}
     />
   );
 };