stream-chat-react-native-core 5.23.0-beta.1 → 5.23.0-beta.3

package/src/components/MessageList/MessageList.tsx

@@ -9,11 +9,15 @@ import {
   ViewToken,
 } from 'react-native';
 
+import type { FormatMessageResponse } from 'stream-chat';
+
 import {
   isMessageWithStylesReadByAndDateSeparator,
   MessageType,
   useMessageList,
 } from './hooks/useMessageList';
+import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
+
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreThreadIndicator } from './InlineLoadingMoreThreadIndicator';
@@ -293,26 +297,40 @@ const MessageListWithContext = <
     screenPadding,
   } = theme;
 
+  const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
+
   const modifiedTheme = useMemo(
     () => mergeThemes({ style: myMessageTheme, theme }),
-    [myMessageTheme, theme],
+    [myMessageThemeString, theme],
   );
 
-  const messageList = useMessageList<StreamChatGenerics>({
+  /**
+   * NOTE: rawMessageList changes only when messages array state changes
+   * processedMessageList changes on any state change
+   */
+  const { processedMessageList, rawMessageList } = useMessageList<StreamChatGenerics>({
     noGroupByUser,
     threadList,
   });
   const messageListLengthBeforeUpdate = useRef(0);
-  const messageListLengthAfterUpdate = messageList.length;
+  const messageListLengthAfterUpdate = processedMessageList.length;
 
   /**
    * 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<StreamChatGenerics>>();
-  const topMessageAfterUpdate = messageList[messageList.length - 1];
+  const topMessageBeforeUpdate = useRef<FormatMessageResponse<StreamChatGenerics>>();
+  const latestNonCurrentMessageBeforeUpdateRef =
+    useRef<FormatMessageResponse<StreamChatGenerics>>();
+  const topMessageAfterUpdate: FormatMessageResponse<StreamChatGenerics> | undefined =
+    rawMessageList[0];
+
+  const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
+    rawMessageList,
+    client.userID,
+  );
 
-  const [autoscrollToTop, setAutoscrollToTop] = useState(false);
+  const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);
 
   /**
    * We want to call onEndReached and onStartReached only once, per content length.
@@ -347,20 +365,17 @@ const MessageListWithContext = <
   /**
    * The timeout id used to temporarily load the initial scroll set flag
    */
-  const tempDisablePaginationTrackersTimeoutRef = useRef<NodeJS.Timeout>();
+  const onScrollEventTimeoutRef = useRef<NodeJS.Timeout>();
 
-  /**
-   * If a messageId was requested to scroll to but was unloaded,
-   * this flag keeps track of it to scroll to it after loading the message
-   */
-  const messageIdToScrollToRef = useRef<string>();
   /**
    * Last messageID that was scrolled to after loading a new message list,
    * this flag keeps track of it so that we dont scroll to it again on target message set
    */
   const messageIdLastScrolledToRef = useRef<string>();
   const [hasMoved, setHasMoved] = useState(false);
-  const [lastReceivedId, setLastReceivedId] = useState(getLastReceivedMessage(messageList)?.id);
+  const [lastReceivedId, setLastReceivedId] = useState(
+    getLastReceivedMessage(processedMessageList)?.id,
+  );
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
@@ -426,22 +441,6 @@ const MessageListWithContext = <
     onEndReachedTracker.current = {};
   });
 
-  /**
-   * Disables the pagination trackers for a second
-   * This is used to prevent the onEndReached and onStartReached from firing
-   * when we scroll to the bottom or top of the list automatically without user interaction
-   * Ex: for targeted message scroll
-   */
-  const tempDisablePaginationTrackersRef = useRef((messageListLength: number) => {
-    clearTimeout(tempDisablePaginationTrackersTimeoutRef.current);
-    onStartReachedTracker.current[messageListLength] = true;
-    onEndReachedTracker.current[messageListLength] = true;
-    tempDisablePaginationTrackersTimeoutRef.current = setTimeout(() => {
-      onStartReachedTracker.current[messageListLength] = false;
-      onEndReachedTracker.current[messageListLength] = false;
-    }, 1000);
-  });
-
   useEffect(() => {
     setScrollToBottomButtonVisible(false);
   }, [disabled]);
@@ -482,29 +481,21 @@ const MessageListWithContext = <
   }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
 
   useEffect(() => {
-    const lastReceivedMessage = getLastReceivedMessage(messageList);
-
-    const hasNewMessage = lastReceivedId !== lastReceivedMessage?.id;
-    const isMyMessage = lastReceivedMessage?.user?.id === client.userID;
-
+    const lastReceivedMessage = getLastReceivedMessage(processedMessageList);
     setLastReceivedId(lastReceivedMessage?.id);
 
     /**
      * Scroll down when
-     * 1. you send a new message to channel
-     * 2. new message list is small than the one before update - channel has resynced
-     * 3. created_at timestamp of top message before update is lesser than created_at timestamp of top message after update - channel has resynced
+     * created_at timestamp of top message before update is lesser than created_at timestamp of top message after update - channel has resynced
      */
     const scrollToBottomIfNeeded = () => {
-      if (!client || !channel || messageList.length === 0) {
+      if (!client || !channel || rawMessageList.length === 0) {
         return;
       }
       if (
-        (hasNewMessage && isMyMessage) ||
-        messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current ||
-        (topMessageBeforeUpdate.current?.created_at &&
-          topMessageAfterUpdate?.created_at &&
-          topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at)
+        topMessageBeforeUpdate.current?.created_at &&
+        topMessageAfterUpdate?.created_at &&
+        topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at
       ) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
@@ -545,12 +536,52 @@ const MessageListWithContext = <
 
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
-  }, [hasNoMoreRecentMessagesToLoad, messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
+  }, [
+    threadList,
+    hasNoMoreRecentMessagesToLoad,
+    messageListLengthAfterUpdate,
+    topMessageAfterUpdate?.id,
+  ]);
 
   useEffect(() => {
-    setAutoscrollToTop(hasNoMoreRecentMessagesToLoad);
-  }, [messageList, hasNoMoreRecentMessagesToLoad]);
+    if (!rawMessageList.length) return;
+    const notLatestSet = !threadList && channel.state.messages !== channel.state.latestMessages;
+    if (notLatestSet) {
+      latestNonCurrentMessageBeforeUpdateRef.current =
+        channel.state.latestMessages[channel.state.latestMessages.length - 1];
+      setAutoscrollToRecent(false);
+      setScrollToBottomButtonVisible(true);
+      return;
+    }
+    const latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
+    latestNonCurrentMessageBeforeUpdateRef.current = undefined;
+    const latestCurrentMessageAfterUpdate = rawMessageList[rawMessageList.length - 1];
+    if (!latestCurrentMessageAfterUpdate) {
+      setAutoscrollToRecent(true);
+      return;
+    }
+    const didMergeMessageSetsWithNoUpdates =
+      latestNonCurrentMessageBeforeUpdate?.id === latestCurrentMessageAfterUpdate.id;
+    // if didMergeMessageSetsWithNoUpdates=false, we got new messages
+    // so we should scroll to bottom if we are near the bottom already
+    setAutoscrollToRecent(!didMergeMessageSetsWithNoUpdates);
+
+    if (!didMergeMessageSetsWithNoUpdates) {
+      const shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
+      // we should scroll to bottom where ever we are now
+      // as we have sent a new own message
+      if (shouldScrollToRecentOnNewOwnMessage) {
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({
+            animated: true,
+            offset: 0,
+          });
+        }, 150); // flatlist might take a bit to update, so a small delay is needed
+      }
+    }
+  }, [rawMessageList, threadList]);
 
+  // TODO: do not apply on RN 0.73 and above
   const shouldApplyAndroidWorkaround = inverted && Platform.OS === 'android';
 
   const renderItem = ({
@@ -563,14 +594,27 @@ const MessageListWithContext = <
     if (!channel || channel.disconnected || (!channel.initialized && !channel.offlineMode))
       return null;
 
+    const unreadCount = channel.countUnread();
     const lastRead = channel.lastRead();
 
     function isMessageUnread(messageArrayIndex: number): boolean {
-      const msg = messageList?.[messageArrayIndex];
-      if (lastRead && msg?.created_at) {
-        return lastRead < msg.created_at;
+      const isLatestMessageSetShown = !!channel.state.messageSets.find(
+        (set) => set.isCurrent && set.isLatest,
+      );
+      const msg = processedMessageList?.[messageArrayIndex];
+      if (!isLatestMessageSetShown) {
+        if (
+          channel.state.latestMessages.length !== 0 &&
+          unreadCount > channel.state.latestMessages.length
+        ) {
+          return messageArrayIndex <= unreadCount - channel.state.latestMessages.length - 1;
+        } else if (lastRead && msg.created_at) {
+          return lastRead < msg.created_at;
+        }
+        return false;
+      } else {
+        return messageArrayIndex <= unreadCount - 1;
       }
-      return false;
     }
 
     const isCurrentMessageUnread = isMessageUnread(index);
@@ -593,61 +637,40 @@ const MessageListWithContext = <
     }
 
     const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+    const renderDateSeperator = isMessageWithStylesReadByAndDateSeparator(message) &&
+      message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />;
+    const renderMessage = (
+      <Message
+        goToMessage={goToMessage}
+        groupStyles={isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []}
+        isTargetedMessage={targetedMessage === message.id}
+        lastReceivedId={
+          lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined
+        }
+        message={message}
+        onThreadSelect={onThreadSelect}
+        showUnreadUnderlay={showUnreadUnderlay}
+        style={[{ paddingHorizontal: screenPadding }, messageContainer]}
+        threadList={threadList}
+      />
+    );
     return wrapMessageInTheme ? (
       <>
-        {shouldApplyAndroidWorkaround &&
-          isMessageWithStylesReadByAndDateSeparator(message) &&
-          message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />}
+        {shouldApplyAndroidWorkaround && renderDateSeperator}
         <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={[{ paddingHorizontal: screenPadding }, messageContainer]}
-              threadList={threadList}
-            />
-          </View>
+          <View testID={`message-list-item-${index}`}>{renderMessage}</View>
         </ThemeProvider>
-        {!shouldApplyAndroidWorkaround &&
-          isMessageWithStylesReadByAndDateSeparator(message) &&
-          message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />}
+        {!shouldApplyAndroidWorkaround && renderDateSeperator}
         {/* Adding indicator below the messages, since the list is inverted */}
         {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
       </>
     ) : (
       <>
         <View testID={`message-list-item-${index}`}>
-          {shouldApplyAndroidWorkaround &&
-            isMessageWithStylesReadByAndDateSeparator(message) &&
-            message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />}
-          <Message
-            goToMessage={goToMessage}
-            groupStyles={
-              isMessageWithStylesReadByAndDateSeparator(message) ? message.groupStyles : []
-            }
-            isTargetedMessage={targetedMessage === message.id}
-            lastReceivedId={
-              lastReceivedId === message.id || message.quoted_message_id
-                ? lastReceivedId
-                : undefined
-            }
-            message={message}
-            onThreadSelect={onThreadSelect}
-            showUnreadUnderlay={showUnreadUnderlay}
-            style={[{ paddingHorizontal: screenPadding }, messageContainer]}
-            threadList={threadList}
-          />
+          {shouldApplyAndroidWorkaround && renderDateSeperator}
+          {renderMessage}
         </View>
-        {!shouldApplyAndroidWorkaround &&
-          isMessageWithStylesReadByAndDateSeparator(message) &&
-          message.dateSeparator && <InlineDateSeparator date={message.dateSeparator} />}
+        {!shouldApplyAndroidWorkaround && renderDateSeperator}
         {/* Adding indicator below the messages, since the list is inverted */}
         {insertInlineUnreadIndicator && <InlineUnreadIndicator />}
       </>
@@ -679,12 +702,15 @@ const MessageListWithContext = <
    */
   const maybeCallOnStartReached = async (limit?: number) => {
     // If onStartReached has already been called for given data length, then ignore.
-    if (messageList?.length && onStartReachedTracker.current[messageList.length]) {
+    if (
+      processedMessageList?.length &&
+      onStartReachedTracker.current[processedMessageList.length]
+    ) {
       return;
     }
 
-    if (messageList?.length) {
-      onStartReachedTracker.current[messageList.length] = true;
+    if (processedMessageList?.length) {
+      onStartReachedTracker.current[processedMessageList.length] = true;
     }
 
     const callback = () => {
@@ -716,12 +742,12 @@ const MessageListWithContext = <
    */
   const maybeCallOnEndReached = async () => {
     // If onEndReached has already been called for given messageList length, then ignore.
-    if (messageList?.length && onEndReachedTracker.current[messageList.length]) {
+    if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
       return;
     }
 
-    if (messageList?.length) {
-      onEndReachedTracker.current[messageList.length] = true;
+    if (processedMessageList?.length) {
+      onEndReachedTracker.current[processedMessageList.length] = true;
     }
 
     const callback = () => {
@@ -749,21 +775,16 @@ const MessageListWithContext = <
     }
   };
 
-  /**
-   * Method used only inside the List to do these things
-   * 1. Mark channel as read if scroll is at the bottom
-   * 2. Call maybeCallOnStartReached if scroll is at the top
-   * 3. Call maybeCallOnEndReached if scroll is at the bottom
-   * 4. Show scrollToBottom button if scroll is at the bottom and messages are not the latest
-   */
-  const onScrollEvent: ScrollViewProps['onScroll'] = (event) => {
+  const onUserScrollEvent: NonNullable<ScrollViewProps['onScroll']> = (event) => {
+    const nativeEvent = event.nativeEvent;
+    clearTimeout(onScrollEventTimeoutRef.current);
+    const offset = nativeEvent.contentOffset.y;
+    const visibleLength = nativeEvent.layoutMeasurement.height;
+    const contentLength = nativeEvent.contentSize.height;
     if (!channel || !channelResyncScrollSet.current) {
       return;
     }
 
-    const offset = event.nativeEvent.contentOffset.y;
-    const visibleLength = event.nativeEvent.layoutMeasurement.height;
-    const contentLength = event.nativeEvent.contentSize.height;
     // Check if scroll has reached either start of end of list.
     const isScrollAtStart = offset < 100;
     const isScrollAtEnd = contentLength - visibleLength - offset < 100;
@@ -775,32 +796,38 @@ const MessageListWithContext = <
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
+  };
 
+  const handleScroll: ScrollViewProps['onScroll'] = (event) => {
+    const offset = event.nativeEvent.contentOffset.y;
     // Show scrollToBottom button once scroll position goes beyond 150.
     const isScrollAtBottom = offset <= 150;
 
+    const notLatestSet = channel.state.messages !== channel.state.latestMessages;
+
+    const showScrollToBottomButton =
+      (!threadList && notLatestSet) || !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
+
     /**
-     * Following if condition covers following cases:
      * 1. If I scroll up -> show scrollToBottom button.
      * 2. If I scroll to bottom of screen
      *    |-> hide scrollToBottom button.
      *    |-> if channel is unread, call markRead().
      */
-
-    const showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
+    setScrollToBottomButtonVisible(showScrollToBottomButton);
 
     const shouldMarkRead =
-      !threadList && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
+      !threadList &&
+      !notLatestSet &&
+      offset <= 0 &&
+      hasNoMoreRecentMessagesToLoad &&
+      channel.countUnread() > 0;
 
     if (shouldMarkRead) {
       markRead();
     }
 
-    setScrollToBottomButtonVisible(showScrollToBottomButton);
-  };
-
-  const handleScroll: ScrollViewProps['onScroll'] = (event) => {
-    onScrollEvent(event);
+    setInitialScrollDone(false);
 
     if (onListScroll) {
       onListScroll(event);
@@ -808,7 +835,10 @@ const MessageListWithContext = <
   };
 
   const goToNewMessages = async () => {
-    if (!hasNoMoreRecentMessagesToLoad) {
+    const isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+    if (isNotLatestSet && hasNoMoreRecentMessagesToLoad) {
+      loadChannelAroundMessage({});
+    } else if (!hasNoMoreRecentMessagesToLoad) {
       resetPaginationTrackersRef.current();
       await reloadChannel();
     } else if (flatListRef.current) {
@@ -830,10 +860,6 @@ const MessageListWithContext = <
   >((info) => {
     // We got a failure as we tried to scroll to an item that was outside the render length
     if (!flatListRef.current) return;
-    const dataLength = flatListRef.current.props?.data?.length;
-    if (dataLength) {
-      tempDisablePaginationTrackersRef.current(dataLength);
-    }
     // we don't know the actual size of all items but we can see the average, so scroll to the closest offset
     flatListRef.current.scrollToOffset({
       animated: false,
@@ -843,17 +869,14 @@ const MessageListWithContext = <
     // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
     failScrollTimeoutId.current = setTimeout(() => {
       try {
-        if (dataLength) {
-          tempDisablePaginationTrackersRef.current(dataLength);
-        }
         flatListRef.current?.scrollToIndex({
           animated: false,
           index: info.index,
           viewPosition: 0.5, // try to place message in the center of the screen
         });
-        // in case the target message was cleared out
-        // the state being set again will trigger the highlight again
         if (messageIdLastScrolledToRef.current) {
+          // in case the target message was cleared out
+          // the state being set again will trigger the highlight again
           setTargetedMessage(messageIdLastScrolledToRef.current);
         }
         scrollToIndexFailedRetryCountRef.current = 0;
@@ -862,10 +885,6 @@ const MessageListWithContext = <
           !onScrollToIndexFailedRef.current ||
           scrollToIndexFailedRetryCountRef.current > MAX_RETRIES_AFTER_SCROLL_FAILURE
         ) {
-          console.log(
-            `Scrolling to index failed after ${MAX_RETRIES_AFTER_SCROLL_FAILURE} retries`,
-            e,
-          );
           scrollToIndexFailedRetryCountRef.current = 0;
           return;
         }
@@ -882,34 +901,27 @@ const MessageListWithContext = <
     // this onScrollToIndexFailed will be called again
   });
 
-  const goToMessage = useCallback(
-    (messageId: string) => {
-      const indexOfParentInMessageList = messageList.findIndex(
-        (message) => message?.id === messageId,
-      );
-      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
-        clearTimeout(failScrollTimeoutId.current);
-        scrollToIndexFailedRetryCountRef.current = 0;
-        // we are scrolling automatically to the message instead of user initiating it,
-        // so we don't need to load more older messages
-        tempDisablePaginationTrackersRef.current(messageList.length);
-        // now scroll to it
-        flatListRef.current.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        // keep track of this messageId, so that we dont scroll to again in useEffect for targeted message change
-        messageIdLastScrolledToRef.current = messageId;
-        setTargetedMessage(messageId);
-        return;
-      }
-      messageIdToScrollToRef.current = messageId; // keep track of the id to scroll afterwards
-      loadChannelAroundMessage({ messageId }); // now try to load the message and whats around it
-      resetPaginationTrackersRef.current();
-    },
-    [messageList],
-  );
+  const goToMessage = (messageId: string) => {
+    const indexOfParentInMessageList = processedMessageList.findIndex(
+      (message) => message?.id === messageId,
+    );
+    if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+      clearTimeout(failScrollTimeoutId.current);
+      scrollToIndexFailedRetryCountRef.current = 0;
+      // keep track of this messageId, so that we dont scroll to again in useEffect for targeted message change
+      messageIdLastScrolledToRef.current = messageId;
+      setTargetedMessage(messageId);
+      // now scroll to it with animated=true (in useEffect animated=false is used)
+      flatListRef.current.scrollToIndex({
+        animated: true,
+        index: indexOfParentInMessageList,
+        viewPosition: 0.5, // try to place message in the center of the screen
+      });
+      return;
+    }
+    // the message we want was not loaded yet, so lets load it
+    loadChannelAroundMessage({ messageId });
+  };
 
   /**
    * Check if a messageId needs to be scrolled to after list loads, and scroll to it
@@ -922,26 +934,24 @@ const MessageListWithContext = <
         initialScrollSettingTimeoutRef.current = setTimeout(() => {
           // small timeout to ensure that handleScroll is called after scrollToIndex to set this flag
           setInitialScrollDone(true);
-        }, 500);
+        }, 2000);
       }
-      // goToMessage method might have requested to scroll to a message
-      let messageIdToScroll: string | undefined = messageIdToScrollToRef.current;
+      let messageIdToScroll: string | undefined;
       if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
         // if some messageId was targeted but not scrolledTo yet
         // we have scroll to there after loading completes
         messageIdToScroll = targetedMessage;
       }
       if (!messageIdToScroll) return;
-      const indexOfParentInMessageList = messageList.findIndex(
+      const indexOfParentInMessageList = processedMessageList.findIndex(
         (message) => message?.id === messageIdToScroll,
       );
       if (indexOfParentInMessageList !== -1 && flatListRef.current) {
         // By a fresh scroll we should clear the retries for the previous failed scroll
         clearTimeout(scrollToDebounceTimeoutRef.current);
         clearTimeout(failScrollTimeoutId.current);
-        // we are scrolling automatically to the message instead of user initiating it,
-        // so we don't need to load more older messages
-        tempDisablePaginationTrackersRef.current(messageList.length);
+        // keep track of this messageId, so that we dont scroll to again for targeted message change
+        messageIdLastScrolledToRef.current = messageIdToScroll;
         // reset the retry count
         scrollToIndexFailedRetryCountRef.current = 0;
         // now scroll to it
@@ -950,17 +960,13 @@ const MessageListWithContext = <
           index: indexOfParentInMessageList,
           viewPosition: 0.5, // try to place message in the center of the screen
         });
-        // reset the messageId tracker to not scroll to that again
-        messageIdToScrollToRef.current = undefined;
-        // keep track of this messageId, so that we dont scroll to again for targeted message change
-        messageIdLastScrolledToRef.current = messageIdToScroll;
       }
-    }, 150);
-  }, [targetedMessage, initialScrollToFirstUnreadMessage, messageList]);
+    }, 50);
+  }, [targetedMessage, initialScrollToFirstUnreadMessage]);
 
   const messagesWithImages =
     legacyImageViewerSwipeBehaviour &&
-    messageList.filter((message) => {
+    processedMessageList.filter((message) => {
       const isMessageTypeDeleted = message.type === 'deleted';
       if (!isMessageTypeDeleted && message.attachments) {
         return message.attachments.some(
@@ -1030,11 +1036,11 @@ const MessageListWithContext = <
   };
   const onScrollBeginDrag: ScrollViewProps['onScrollBeginDrag'] = (event) => {
     !hasMoved && selectedPicker && setHasMoved(true);
-    onScrollEvent(event);
+    onUserScrollEvent(event);
   };
   const onScrollEndDrag: ScrollViewProps['onScrollEndDrag'] = (event) => {
     hasMoved && selectedPicker && setHasMoved(false);
-    onScrollEvent(event);
+    onUserScrollEvent(event);
   };
 
   const refCallback = (ref: FlatListType<MessageType<StreamChatGenerics>>) => {
@@ -1054,7 +1060,7 @@ const MessageListWithContext = <
     if (debugRef.current.setSendEventParams)
       debugRef.current.setSendEventParams({
         action: thread ? 'ThreadList' : 'Messages',
-        data: messageList,
+        data: processedMessageList,
       });
   }
 
@@ -1130,20 +1136,26 @@ const MessageListWithContext = <
           additionalFlatListProps?.contentContainerStyle,
           contentContainer,
         ]}
-        data={messageList}
         /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
+        data={processedMessageList}
         extraData={disabled || !hasNoMoreRecentMessagesToLoad}
         inverted={shouldApplyAndroidWorkaround ? false : inverted}
         keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
         ListEmptyComponent={renderListEmptyComponent}
         ListFooterComponent={ListFooterComponent}
+        /**
+          if autoscrollToTopThreshold is 10, we scroll to recent if before new list update it was already at the bottom (10 offset or below)
+          minIndexForVisible = 1 means that beyond item at index 1 will not change position on list updates
+          minIndexForVisible is not used when autoscrollToTopThreshold = 10
+        */
         ListHeaderComponent={ListHeaderComponent}
         maintainVisibleContentPosition={{
-          autoscrollToTopThreshold: autoscrollToTop ? 10 : undefined,
+          autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
           minIndexForVisible: 1,
         }}
         maxToRenderPerBatch={30}
+        onMomentumScrollEnd={onUserScrollEvent}
         onScroll={handleScroll}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={onScrollEndDrag}

package/src/components/MessageList/__tests__/useMessageList.test.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { renderHook } from '@testing-library/react-hooks';
-import type { DefaultStreamChatGenerics } from 'src/types/types';
+
 import type { DefaultGenerics, StreamChat } from 'stream-chat';
 
 import { useCreatePaginatedMessageListContext } from '../../../components/Channel/hooks/useCreatePaginatedMessageListContext';
@@ -15,6 +15,7 @@ import {
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { useMessageList } from '../hooks/useMessageList';
 
 const clientUser = generateUser();
@@ -60,6 +61,8 @@ describe('useMessageList', () => {
       { wrapper: Providers },
     );
     const reversedMessages = messages.reverse();
-    expect(result.current.map(({ id }) => id)).toEqual(reversedMessages.map(({ id }) => id));
+    expect(result.current.processedMessageList.map(({ id }) => id)).toEqual(
+      reversedMessages.map(({ id }) => id),
+    );
   });
 });