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

package/lib/module/components/MessageList/MessageList.js

@@ -11,7 +11,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _useMessageList = require("./hooks/useMessageList");
+var _useMessageList2 = require("./hooks/useMessageList");
+var _useShouldScrollToRecentOnNewOwnMessage = require("./hooks/useShouldScrollToRecentOnNewOwnMessage");
 var _InlineLoadingMoreIndicator = require("./InlineLoadingMoreIndicator");
 var _InlineLoadingMoreRecentIndicator = require("./InlineLoadingMoreRecentIndicator");
 var _InlineLoadingMoreThreadIndicator = require("./InlineLoadingMoreThreadIndicator");
@@ -74,7 +75,7 @@ var InvertedCellRendererComponent = function InvertedCellRendererComponent(props
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 98,
       columnNumber: 3
     }
   }));
@@ -152,24 +153,31 @@ var MessageListWithContext = function MessageListWithContext(props) {
     listContainer = _theme$messageList.listContainer,
     messageContainer = _theme$messageList.messageContainer,
     screenPadding = theme.screenPadding;
+  var myMessageThemeString = (0, _react.useMemo)(function () {
+    return JSON.stringify(myMessageTheme);
+  }, [myMessageTheme]);
   var modifiedTheme = (0, _react.useMemo)(function () {
     return (0, _ThemeContext.mergeThemes)({
       style: myMessageTheme,
       theme: theme
     });
-  }, [myMessageTheme, theme]);
-  var messageList = (0, _useMessageList.useMessageList)({
-    noGroupByUser: noGroupByUser,
-    threadList: threadList
-  });
+  }, [myMessageThemeString, theme]);
+  var _useMessageList = (0, _useMessageList2.useMessageList)({
+      noGroupByUser: noGroupByUser,
+      threadList: threadList
+    }),
+    processedMessageList = _useMessageList.processedMessageList,
+    rawMessageList = _useMessageList.rawMessageList;
   var messageListLengthBeforeUpdate = (0, _react.useRef)(0);
-  var messageListLengthAfterUpdate = messageList.length;
+  var messageListLengthAfterUpdate = processedMessageList.length;
   var topMessageBeforeUpdate = (0, _react.useRef)();
-  var topMessageAfterUpdate = messageList[messageList.length - 1];
+  var latestNonCurrentMessageBeforeUpdateRef = (0, _react.useRef)();
+  var topMessageAfterUpdate = rawMessageList[0];
+  var shouldScrollToRecentOnNewOwnMessageRef = (0, _useShouldScrollToRecentOnNewOwnMessage.useShouldScrollToRecentOnNewOwnMessage)(rawMessageList, client.userID);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    autoscrollToTop = _useState2[0],
-    setAutoscrollToTop = _useState2[1];
+    autoscrollToRecent = _useState2[0],
+    setAutoscrollToRecent = _useState2[1];
   var onStartReachedTracker = (0, _react.useRef)({});
   var onEndReachedTracker = (0, _react.useRef)({});
   var onStartReachedInPromise = (0, _react.useRef)(null);
@@ -182,14 +190,13 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var channelResyncScrollSet = (0, _react.useRef)(true);
   var scrollToDebounceTimeoutRef = (0, _react.useRef)();
   var initialScrollSettingTimeoutRef = (0, _react.useRef)();
-  var tempDisablePaginationTrackersTimeoutRef = (0, _react.useRef)();
-  var messageIdToScrollToRef = (0, _react.useRef)();
+  var onScrollEventTimeoutRef = (0, _react.useRef)();
   var messageIdLastScrolledToRef = (0, _react.useRef)();
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasMoved = _useState6[0],
     setHasMoved = _useState6[1];
-  var _useState7 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(messageList)) == null ? void 0 : _getLastReceivedMessa.id),
+  var _useState7 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     lastReceivedId = _useState8[0],
     setLastReceivedId = _useState8[1];
@@ -228,15 +235,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
     onStartReachedTracker.current = {};
     onEndReachedTracker.current = {};
   });
-  var tempDisablePaginationTrackersRef = (0, _react.useRef)(function (messageListLength) {
-    clearTimeout(tempDisablePaginationTrackersTimeoutRef.current);
-    onStartReachedTracker.current[messageListLength] = true;
-    onEndReachedTracker.current[messageListLength] = true;
-    tempDisablePaginationTrackersTimeoutRef.current = setTimeout(function () {
-      onStartReachedTracker.current[messageListLength] = false;
-      onEndReachedTracker.current[messageListLength] = false;
-    }, 1000);
-  });
   (0, _react.useEffect)(function () {
     setScrollToBottomButtonVisible(false);
   }, [disabled]);
@@ -259,17 +257,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
   (0, _react.useEffect)(function () {
-    var _lastReceivedMessage$;
-    var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(messageList);
-    var hasNewMessage = lastReceivedId !== (lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
-    var isMyMessage = (lastReceivedMessage == null ? void 0 : (_lastReceivedMessage$ = lastReceivedMessage.user) == null ? void 0 : _lastReceivedMessage$.id) === client.userID;
+    var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList);
     setLastReceivedId(lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
     var scrollToBottomIfNeeded = function scrollToBottomIfNeeded() {
       var _topMessageBeforeUpda;
-      if (!client || !channel || messageList.length === 0) {
+      if (!client || !channel || rawMessageList.length === 0) {
         return;
       }
-      if (hasNewMessage && isMyMessage || messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current || (_topMessageBeforeUpda = topMessageBeforeUpdate.current) != null && _topMessageBeforeUpda.created_at && topMessageAfterUpdate != null && topMessageAfterUpdate.created_at && topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at) {
+      if ((_topMessageBeforeUpda = topMessageBeforeUpdate.current) != null && _topMessageBeforeUpda.created_at && topMessageAfterUpdate != null && topMessageAfterUpdate.created_at && topMessageBeforeUpdate.current.created_at < topMessageAfterUpdate.created_at) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
         resetPaginationTrackersRef.current();
@@ -297,23 +292,61 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
-  }, [hasNoMoreRecentMessagesToLoad, messageListLengthAfterUpdate, topMessageAfterUpdate == null ? void 0 : topMessageAfterUpdate.id]);
+  }, [threadList, hasNoMoreRecentMessagesToLoad, messageListLengthAfterUpdate, topMessageAfterUpdate == null ? void 0 : topMessageAfterUpdate.id]);
   (0, _react.useEffect)(function () {
-    setAutoscrollToTop(hasNoMoreRecentMessagesToLoad);
-  }, [messageList, hasNoMoreRecentMessagesToLoad]);
+    if (!rawMessageList.length) return;
+    var 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;
+    }
+    var latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
+    latestNonCurrentMessageBeforeUpdateRef.current = undefined;
+    var latestCurrentMessageAfterUpdate = rawMessageList[rawMessageList.length - 1];
+    if (!latestCurrentMessageAfterUpdate) {
+      setAutoscrollToRecent(true);
+      return;
+    }
+    var didMergeMessageSetsWithNoUpdates = (latestNonCurrentMessageBeforeUpdate == null ? void 0 : latestNonCurrentMessageBeforeUpdate.id) === latestCurrentMessageAfterUpdate.id;
+    setAutoscrollToRecent(!didMergeMessageSetsWithNoUpdates);
+    if (!didMergeMessageSetsWithNoUpdates) {
+      var shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
+      if (shouldScrollToRecentOnNewOwnMessage) {
+        setTimeout(function () {
+          var _flatListRef$current2;
+          (_flatListRef$current2 = flatListRef.current) == null ? void 0 : _flatListRef$current2.scrollToOffset({
+            animated: true,
+            offset: 0
+          });
+        }, 150);
+      }
+    }
+  }, [rawMessageList, threadList]);
   var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android';
   var renderItem = function renderItem(_ref2) {
     var _message$user;
     var index = _ref2.index,
       message = _ref2.item;
     if (!channel || channel.disconnected || !channel.initialized && !channel.offlineMode) return null;
+    var unreadCount = channel.countUnread();
     var lastRead = channel.lastRead();
     function isMessageUnread(messageArrayIndex) {
-      var msg = messageList == null ? void 0 : messageList[messageArrayIndex];
-      if (lastRead && msg != null && msg.created_at) {
-        return lastRead < msg.created_at;
+      var isLatestMessageSetShown = !!channel.state.messageSets.find(function (set) {
+        return set.isCurrent && set.isLatest;
+      });
+      var msg = processedMessageList == null ? void 0 : 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;
     }
     var isCurrentMessageUnread = isMessageUnread(index);
     var showUnreadUnderlay = !channel.muteStatus().muted && isCurrentMessageUnread && scrollToBottomButtonVisible;
@@ -324,7 +357,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 584,
+          lineNumber: 628,
           columnNumber: 11
         }
       }, _react["default"].createElement(MessageSystem, {
@@ -335,48 +368,33 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 585,
+          lineNumber: 629,
           columnNumber: 13
         }
       })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 590,
+          lineNumber: 634,
           columnNumber: 43
         }
       }));
     }
     var wrapMessageInTheme = client.userID === ((_message$user = message.user) == null ? void 0 : _message$user.id) && !!myMessageTheme;
-    return wrapMessageInTheme ? _react["default"].createElement(_react["default"].Fragment, null, shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
+    var renderDateSeperator = (0, _useMessageList2.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
       date: message.dateSeparator,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 600,
-        columnNumber: 36
-      }
-    }), _react["default"].createElement(_ThemeContext.ThemeProvider, {
-      mergedStyle: modifiedTheme,
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 601,
-        columnNumber: 9
-      }
-    }, _react["default"].createElement(_reactNative.View, {
-      testID: "message-list-item-" + index,
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 602,
-        columnNumber: 11
+        lineNumber: 641,
+        columnNumber: 32
       }
-    }, _react["default"].createElement(Message, {
+    });
+    var renderMessage = _react["default"].createElement(Message, {
       goToMessage: goToMessage,
-      groupStyles: (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      groupStyles: (0, _useMessageList2.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
       isTargetedMessage: targetedMessage === message.id,
-      lastReceivedId: lastReceivedId === message.id ? lastReceivedId : undefined,
+      lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
       showUnreadUnderlay: showUnreadUnderlay,
@@ -387,71 +405,46 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 603,
-        columnNumber: 13
-      }
-    }))), !shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
-      date: message.dateSeparator,
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 620,
-        columnNumber: 36
-      }
-    }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 622,
-        columnNumber: 41
+        lineNumber: 643,
+        columnNumber: 7
       }
-    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
-      testID: "message-list-item-" + index,
+    });
+    return wrapMessageInTheme ? _react["default"].createElement(_react["default"].Fragment, null, shouldApplyAndroidWorkaround && renderDateSeperator, _react["default"].createElement(_ThemeContext.ThemeProvider, {
+      mergedStyle: modifiedTheme,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 626,
+        lineNumber: 660,
         columnNumber: 9
       }
-    }, shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
-      date: message.dateSeparator,
+    }, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 629,
-        columnNumber: 38
+        lineNumber: 661,
+        columnNumber: 11
       }
-    }), _react["default"].createElement(Message, {
-      goToMessage: goToMessage,
-      groupStyles: (0, _useMessageList.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,
+    }, renderMessage)), !shouldApplyAndroidWorkaround && renderDateSeperator, insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 630,
-        columnNumber: 11
+        lineNumber: 665,
+        columnNumber: 41
       }
-    })), !shouldApplyAndroidWorkaround && (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
-      date: message.dateSeparator,
+    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 650,
-        columnNumber: 36
+        lineNumber: 669,
+        columnNumber: 9
       }
-    }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
+    }, shouldApplyAndroidWorkaround && renderDateSeperator, renderMessage), !shouldApplyAndroidWorkaround && renderDateSeperator, insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 652,
+        lineNumber: 675,
         columnNumber: 41
       }
     }));
@@ -462,14 +455,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!(messageList != null && messageList.length && onStartReachedTracker.current[messageList.length])) {
+            if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
               _context.next = 2;
               break;
             }
             return _context.abrupt("return");
           case 2:
-            if (messageList != null && messageList.length) {
-              onStartReachedTracker.current[messageList.length] = true;
+            if (processedMessageList != null && processedMessageList.length) {
+              onStartReachedTracker.current[processedMessageList.length] = true;
             }
             callback = function callback() {
               onStartReachedInPromise.current = null;
@@ -508,14 +501,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if (!(messageList != null && messageList.length && onEndReachedTracker.current[messageList.length])) {
+            if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
               _context2.next = 2;
               break;
             }
             return _context2.abrupt("return");
           case 2:
-            if (messageList != null && messageList.length) {
-              onEndReachedTracker.current[messageList.length] = true;
+            if (processedMessageList != null && processedMessageList.length) {
+              onEndReachedTracker.current[processedMessageList.length] = true;
             }
             callback = function callback() {
               onEndReachedInPromise.current = null;
@@ -548,13 +541,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
       return _ref4.apply(this, arguments);
     };
   }();
-  var onScrollEvent = function onScrollEvent(event) {
+  var onUserScrollEvent = function onUserScrollEvent(event) {
+    var nativeEvent = event.nativeEvent;
+    clearTimeout(onScrollEventTimeoutRef.current);
+    var offset = nativeEvent.contentOffset.y;
+    var visibleLength = nativeEvent.layoutMeasurement.height;
+    var contentLength = nativeEvent.contentSize.height;
     if (!channel || !channelResyncScrollSet.current) {
       return;
     }
-    var offset = event.nativeEvent.contentOffset.y;
-    var visibleLength = event.nativeEvent.layoutMeasurement.height;
-    var contentLength = event.nativeEvent.contentSize.height;
     var isScrollAtStart = offset < 100;
     var isScrollAtEnd = contentLength - visibleLength - offset < 100;
     if (isScrollAtStart) {
@@ -563,47 +558,59 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
+  };
+  var handleScroll = function handleScroll(event) {
+    var offset = event.nativeEvent.contentOffset.y;
     var isScrollAtBottom = offset <= 150;
-    var showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
-    var shouldMarkRead = !threadList && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
+    var notLatestSet = channel.state.messages !== channel.state.latestMessages;
+    var showScrollToBottomButton = !threadList && notLatestSet || !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
+    setScrollToBottomButtonVisible(showScrollToBottomButton);
+    var shouldMarkRead = !threadList && !notLatestSet && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
     if (shouldMarkRead) {
       markRead();
     }
-    setScrollToBottomButtonVisible(showScrollToBottomButton);
-  };
-  var handleScroll = function handleScroll(event) {
-    onScrollEvent(event);
+    setInitialScrollDone(false);
     if (onListScroll) {
       onListScroll(event);
     }
   };
   var goToNewMessages = function () {
     var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+      var isNotLatestSet;
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
+            isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+            if (!(isNotLatestSet && hasNoMoreRecentMessagesToLoad)) {
+              _context3.next = 5;
+              break;
+            }
+            loadChannelAroundMessage({});
+            _context3.next = 12;
+            break;
+          case 5:
             if (hasNoMoreRecentMessagesToLoad) {
-              _context3.next = 6;
+              _context3.next = 11;
               break;
             }
             resetPaginationTrackersRef.current();
-            _context3.next = 4;
+            _context3.next = 9;
             return reloadChannel();
-          case 4:
-            _context3.next = 7;
+          case 9:
+            _context3.next = 12;
             break;
-          case 6:
+          case 11:
             if (flatListRef.current) {
               flatListRef.current.scrollToOffset({
                 offset: 0
               });
             }
-          case 7:
+          case 12:
             setScrollToBottomButtonVisible(false);
             if (!threadList) {
               markRead();
             }
-          case 9:
+          case 14:
           case "end":
             return _context3.stop();
         }
@@ -616,23 +623,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var scrollToIndexFailedRetryCountRef = (0, _react.useRef)(0);
   var failScrollTimeoutId = (0, _react.useRef)();
   var onScrollToIndexFailedRef = (0, _react.useRef)(function (info) {
-    var _flatListRef$current$, _flatListRef$current$2;
     if (!flatListRef.current) return;
-    var dataLength = (_flatListRef$current$ = flatListRef.current.props) == null ? void 0 : (_flatListRef$current$2 = _flatListRef$current$.data) == null ? void 0 : _flatListRef$current$2.length;
-    if (dataLength) {
-      tempDisablePaginationTrackersRef.current(dataLength);
-    }
     flatListRef.current.scrollToOffset({
       animated: false,
       offset: info.averageItemLength * info.index
     });
     failScrollTimeoutId.current = setTimeout(function () {
       try {
-        var _flatListRef$current2;
-        if (dataLength) {
-          tempDisablePaginationTrackersRef.current(dataLength);
-        }
-        (_flatListRef$current2 = flatListRef.current) == null ? void 0 : _flatListRef$current2.scrollToIndex({
+        var _flatListRef$current3;
+        (_flatListRef$current3 = flatListRef.current) == null ? void 0 : _flatListRef$current3.scrollToIndex({
           animated: false,
           index: info.index,
           viewPosition: 0.5
@@ -643,7 +642,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
         scrollToIndexFailedRetryCountRef.current = 0;
       } catch (e) {
         if (!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;
         }
@@ -652,61 +650,56 @@ var MessageListWithContext = function MessageListWithContext(props) {
       }
     }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT);
   });
-  var goToMessage = (0, _react.useCallback)(function (messageId) {
-    var indexOfParentInMessageList = messageList.findIndex(function (message) {
+  var goToMessage = function goToMessage(messageId) {
+    var indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
       return (message == null ? void 0 : message.id) === messageId;
     });
     if (indexOfParentInMessageList !== -1 && flatListRef.current) {
       clearTimeout(failScrollTimeoutId.current);
       scrollToIndexFailedRetryCountRef.current = 0;
-      tempDisablePaginationTrackersRef.current(messageList.length);
+      messageIdLastScrolledToRef.current = messageId;
+      setTargetedMessage(messageId);
       flatListRef.current.scrollToIndex({
         animated: true,
         index: indexOfParentInMessageList,
         viewPosition: 0.5
       });
-      messageIdLastScrolledToRef.current = messageId;
-      setTargetedMessage(messageId);
       return;
     }
-    messageIdToScrollToRef.current = messageId;
     loadChannelAroundMessage({
       messageId: messageId
     });
-    resetPaginationTrackersRef.current();
-  }, [messageList]);
+  };
   (0, _react.useEffect)(function () {
     scrollToDebounceTimeoutRef.current = setTimeout(function () {
       if (initialScrollToFirstUnreadMessage) {
         clearTimeout(initialScrollSettingTimeoutRef.current);
         initialScrollSettingTimeoutRef.current = setTimeout(function () {
           setInitialScrollDone(true);
-        }, 500);
+        }, 2000);
       }
-      var messageIdToScroll = messageIdToScrollToRef.current;
+      var messageIdToScroll;
       if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
         messageIdToScroll = targetedMessage;
       }
       if (!messageIdToScroll) return;
-      var indexOfParentInMessageList = messageList.findIndex(function (message) {
+      var indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
         return (message == null ? void 0 : message.id) === messageIdToScroll;
       });
       if (indexOfParentInMessageList !== -1 && flatListRef.current) {
         clearTimeout(scrollToDebounceTimeoutRef.current);
         clearTimeout(failScrollTimeoutId.current);
-        tempDisablePaginationTrackersRef.current(messageList.length);
+        messageIdLastScrolledToRef.current = messageIdToScroll;
         scrollToIndexFailedRetryCountRef.current = 0;
         flatListRef.current.scrollToIndex({
           animated: false,
           index: indexOfParentInMessageList,
           viewPosition: 0.5
         });
-        messageIdToScrollToRef.current = undefined;
-        messageIdLastScrolledToRef.current = messageIdToScroll;
       }
-    }, 150);
-  }, [targetedMessage, initialScrollToFirstUnreadMessage, messageList]);
-  var messagesWithImages = legacyImageViewerSwipeBehaviour && messageList.filter(function (message) {
+    }, 50);
+  }, [targetedMessage, initialScrollToFirstUnreadMessage]);
+  var messagesWithImages = legacyImageViewerSwipeBehaviour && processedMessageList.filter(function (message) {
     var isMessageTypeDeleted = message.type === 'deleted';
     if (!isMessageTypeDeleted && message.attachments) {
       return message.attachments.some(function (attachment) {
@@ -743,11 +736,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
   };
   var onScrollBeginDrag = function onScrollBeginDrag(event) {
     !hasMoved && selectedPicker && setHasMoved(true);
-    onScrollEvent(event);
+    onUserScrollEvent(event);
   };
   var onScrollEndDrag = function onScrollEndDrag(event) {
     hasMoved && selectedPicker && setHasMoved(false);
-    onScrollEvent(event);
+    onUserScrollEvent(event);
   };
   var refCallback = function refCallback(ref) {
     flatListRef.current = ref;
@@ -761,7 +754,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (debugRef.current.setEventType) debugRef.current.setEventType('send');
     if (debugRef.current.setSendEventParams) debugRef.current.setSendEventParams({
       action: thread ? 'ThreadList' : 'Messages',
-      data: messageList
+      data: processedMessageList
     });
   }
   var renderListEmptyComponent = (0, _react.useCallback)(function () {
@@ -771,7 +764,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1063,
+        lineNumber: 1069,
         columnNumber: 7
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
@@ -779,7 +772,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1067,
+        lineNumber: 1073,
         columnNumber: 9
       }
     }));
@@ -790,14 +783,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1075,
+        lineNumber: 1081,
         columnNumber: 7
       }
     }, _react["default"].createElement(FooterComponent, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1076,
+        lineNumber: 1082,
         columnNumber: 9
       }
     }));
@@ -808,14 +801,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1084,
+        lineNumber: 1090,
         columnNumber: 7
       }
     }, _react["default"].createElement(HeaderComponent, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1085,
+        lineNumber: 1091,
         columnNumber: 9
       }
     }));
@@ -827,7 +820,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1095,
+        lineNumber: 1101,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -835,7 +828,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1096,
+        lineNumber: 1102,
         columnNumber: 9
       }
     }));
@@ -847,7 +840,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1103,
+        lineNumber: 1109,
         columnNumber: 30
       }
     });
@@ -856,7 +849,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1104,
+        lineNumber: 1110,
         columnNumber: 46
       }
     });
@@ -877,13 +870,13 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1120,
+      lineNumber: 1126,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
     CellRendererComponent: shouldApplyAndroidWorkaround ? InvertedCellRendererComponent : undefined,
     contentContainerStyle: [styles.contentContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer],
-    data: messageList,
+    data: processedMessageList,
     extraData: disabled || !hasNoMoreRecentMessagesToLoad,
     inverted: shouldApplyAndroidWorkaround ? false : inverted,
     keyboardShouldPersistTaps: "handled",
@@ -892,10 +885,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
     ListFooterComponent: ListFooterComponent,
     ListHeaderComponent: ListHeaderComponent,
     maintainVisibleContentPosition: {
-      autoscrollToTopThreshold: autoscrollToTop ? 10 : undefined,
+      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
       minIndexForVisible: 1
     },
     maxToRenderPerBatch: 30,
+    onMomentumScrollEnd: onUserScrollEvent,
     onScroll: handleScroll,
     onScrollBeginDrag: onScrollBeginDrag,
     onScrollEndDrag: onScrollEndDrag,
@@ -913,7 +907,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1124,
+      lineNumber: 1130,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -921,28 +915,28 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1169,
+      lineNumber: 1181,
       columnNumber: 11
     }
   }, _react["default"].createElement(StickyHeaderComponent, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1170,
+      lineNumber: 1182,
       columnNumber: 13
     }
   })), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1173,
+      lineNumber: 1185,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1174,
+      lineNumber: 1186,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -952,14 +946,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1177,
+      lineNumber: 1189,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1184,
+      lineNumber: 1196,
       columnNumber: 7
     }
   }));
@@ -1066,7 +1060,7 @@ var MessageList = function MessageList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1242,
+      lineNumber: 1254,
       columnNumber: 5
     }
   }));