stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/lib/commonjs/components/MessageList/MessageList.js

@@ -26,6 +26,7 @@ var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
+var _hooks = require("../../hooks");
 var _types = require("../../types/types");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["contentContainerStyle", "ItemSeparatorComponent", "style"];
@@ -75,8 +76,27 @@ var keyExtractor = function keyExtractor(item) {
 var flatListViewabilityConfig = {
   viewAreaCoveragePercentThreshold: 1
 };
+var hasReadLastMessage = function hasReadLastMessage(channel, userId) {
+  var _channel$state$latest, _channel$state$read$u;
+  var latestMessageIdInChannel = (_channel$state$latest = channel.state.latestMessages.slice(-1)[0]) == null ? void 0 : _channel$state$latest.id;
+  var lastReadMessageIdServer = (_channel$state$read$u = channel.state.read[userId]) == null ? void 0 : _channel$state$read$u.last_read_message_id;
+  return latestMessageIdInChannel === lastReadMessageIdServer;
+};
+var getPreviousLastMessage = function getPreviousLastMessage(messages, newMessage) {
+  if (!newMessage) return;
+  var previousLastMessage;
+  for (var i = messages.length - 1; i >= 0; i--) {
+    var msg = messages[i];
+    if (!(msg != null && msg.id)) break;
+    if (msg.id !== newMessage.id) {
+      previousLastMessage = msg;
+      break;
+    }
+  }
+  return previousLastMessage;
+};
 var MessageListWithContext = function MessageListWithContext(props) {
-  var _getLastReceivedMessa;
+  var _client$user3;
   var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
   var additionalFlatListProps = props.additionalFlatListProps,
     channel = props.channel,
@@ -120,6 +140,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     reloadChannel = props.reloadChannel,
     ScrollToBottomButton = props.ScrollToBottomButton,
     selectedPicker = props.selectedPicker,
+    setChannelUnreadState = props.setChannelUnreadState,
     setFlatListRef = props.setFlatListRef,
     setMessages = props.setMessages,
     setSelectedPicker = props.setSelectedPicker,
@@ -160,6 +181,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
       noGroupByUser: noGroupByUser,
       threadList: threadList
     }),
+    dateSeparatorsRef = _useMessageList.dateSeparatorsRef,
+    messageGroupStylesRef = _useMessageList.messageGroupStylesRef,
     processedMessageList = _useMessageList.processedMessageList,
     rawMessageList = _useMessageList.rawMessageList;
   var messageListLengthBeforeUpdate = (0, _react.useRef)(0);
@@ -172,6 +195,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     autoscrollToRecent = _useState4[0],
     setAutoscrollToRecent = _useState4[1];
+  var maintainVisibleContentPosition = (0, _react.useMemo)(function () {
+    return {
+      autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
+      minIndexForVisible: 1
+    };
+  }, [autoscrollToRecent]);
   var onStartReachedTracker = (0, _react.useRef)({});
   var onEndReachedTracker = (0, _react.useRef)({});
   var onStartReachedInPromise = (0, _react.useRef)(null);
@@ -185,22 +214,22 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasMoved = _useState6[0],
     setHasMoved = _useState6[1];
-  var _useState7 = (0, _react.useState)((_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id),
+  var lastReceivedId = (0, _react.useMemo)(function () {
+    var _getLastReceivedMessa;
+    return (_getLastReceivedMessa = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList)) == null ? void 0 : _getLastReceivedMessa.id;
+  }, [processedMessageList]);
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    lastReceivedId = _useState8[0],
-    setLastReceivedId = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
+    scrollToBottomButtonVisible = _useState8[0],
+    setScrollToBottomButtonVisible = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    scrollToBottomButtonVisible = _useState10[0],
-    setScrollToBottomButtonVisible = _useState10[1];
-  var _useState11 = (0, _react.useState)(),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    stickyHeaderDate = _useState12[0],
-    setStickyHeaderDate = _useState12[1];
+    stickyHeaderDate = _useState10[0],
+    setStickyHeaderDate = _useState10[1];
   var stickyHeaderDateRef = (0, _react.useRef)(undefined);
   var channelRef = (0, _react.useRef)(channel);
   channelRef.current = channel;
-  var updateStickyHeaderDateIfNeeded = function updateStickyHeaderDateIfNeeded(viewableItems) {
+  var updateStickyHeaderDateIfNeeded = (0, _hooks.useStableCallback)(function (viewableItems) {
     if (!viewableItems.length) {
       return;
     }
@@ -217,8 +246,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
         setStickyHeaderDate(lastItem.item.created_at);
       }
     }
-  };
-  var updateStickyUnreadIndicator = function updateStickyUnreadIndicator(viewableItems) {
+  });
+  var updateStickyUnreadIndicator = (0, _hooks.useStableCallback)(function (viewableItems) {
     if (!viewableItems.length) {
       setIsUnreadNotificationOpen(false);
       return;
@@ -229,10 +258,15 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
     var lastItem = viewableItems[viewableItems.length - 1];
     if (lastItem) {
-      var lastItemCreatedAt = lastItem.item.created_at;
+      var lastItemMessage = lastItem.item;
+      var lastItemCreatedAt = lastItemMessage.created_at;
       var unreadIndicatorDate = channelUnreadState == null ? void 0 : channelUnreadState.last_read.getTime();
       var lastItemDate = lastItemCreatedAt.getTime();
-      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItem.item.id) {
+      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItemMessage.id) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      if (viewableItems.length === 1 && channel.countUnread() === 0 && lastItemMessage.user.id === client.userID) {
         setIsUnreadNotificationOpen(false);
         return;
       }
@@ -242,7 +276,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         setIsUnreadNotificationOpen(false);
       }
     }
-  };
+  });
   var unstableOnViewableItemsChanged = function unstableOnViewableItemsChanged(_ref) {
     var viewableItems = _ref.viewableItems;
     if (!viewableItems) {
@@ -255,7 +289,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
   };
   var onViewableItemsChanged = (0, _react.useRef)(unstableOnViewableItemsChanged);
   onViewableItemsChanged.current = unstableOnViewableItemsChanged;
-  var stableOnViwableItemsChanged = (0, _react.useCallback)(function (_ref2) {
+  var stableOnViewableItemsChanged = (0, _react.useCallback)(function (_ref2) {
     var viewableItems = _ref2.viewableItems;
     onViewableItemsChanged.current({
       viewableItems: viewableItems
@@ -271,21 +305,56 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   }, [disabled]);
   (0, _react.useEffect)(function () {
-    var listener = channel.on('message.new', function (event) {
-      var _event$message, _event$message2;
-      var newMessageToCurrentChannel = event.cid === channel.cid;
-      var mainChannelUpdated = !((_event$message = event.message) != null && _event$message.parent_id) || ((_event$message2 = event.message) == null ? void 0 : _event$message2.show_in_channel);
-      if (newMessageToCurrentChannel && mainChannelUpdated && !scrollToBottomButtonVisible) {
-        markRead();
-      }
-    });
+    var shouldMarkRead = function shouldMarkRead() {
+      var _client$user, _client$user2;
+      return !(channelUnreadState != null && channelUnreadState.first_unread_message_id) && !scrollToBottomButtonVisible && ((_client$user = client.user) == null ? void 0 : _client$user.id) && !hasReadLastMessage(channel, (_client$user2 = client.user) == null ? void 0 : _client$user2.id);
+    };
+    var handleEvent = function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(event) {
+        var _event$message, _event$message2;
+        var mainChannelUpdated;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              mainChannelUpdated = !((_event$message = event.message) != null && _event$message.parent_id) || ((_event$message2 = event.message) == null ? void 0 : _event$message2.show_in_channel);
+              if (!(scrollToBottomButtonVisible || channelUnreadState != null && channelUnreadState.first_unread_message_id)) {
+                _context.next = 5;
+                break;
+              }
+              setChannelUnreadState(function (prev) {
+                var _prev$unread_messages, _prev$last_read;
+                var previousUnreadCount = (_prev$unread_messages = prev == null ? void 0 : prev.unread_messages) != null ? _prev$unread_messages : 0;
+                var previousLastMessage = getPreviousLastMessage(channel.state.messages, event.message);
+                return Object.assign({}, prev || {}, {
+                  last_read: (_prev$last_read = prev == null ? void 0 : prev.last_read) != null ? _prev$last_read : previousUnreadCount === 0 && previousLastMessage != null && previousLastMessage.created_at ? new Date(previousLastMessage.created_at) : new Date(0),
+                  unread_messages: previousUnreadCount + 1
+                });
+              });
+              _context.next = 8;
+              break;
+            case 5:
+              if (!(mainChannelUpdated && shouldMarkRead())) {
+                _context.next = 8;
+                break;
+              }
+              _context.next = 8;
+              return markRead();
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function handleEvent(_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    var listener = channel.on('message.new', handleEvent);
     return function () {
       listener == null || listener.unsubscribe();
     };
-  }, [channel, markRead, scrollToBottomButtonVisible]);
+  }, [channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, (_client$user3 = client.user) == null ? void 0 : _client$user3.id, markRead, scrollToBottomButtonVisible, setChannelUnreadState, threadList]);
   (0, _react.useEffect)(function () {
-    var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList);
-    setLastReceivedId(lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
     var scrollToBottomIfNeeded = function scrollToBottomIfNeeded() {
       var _topMessageBeforeUpda;
       if (!client || !channel || rawMessageList.length === 0) {
@@ -353,32 +422,32 @@ var MessageListWithContext = function MessageListWithContext(props) {
       }
     }
   }, [channel, rawMessageList, threadList]);
-  var goToMessage = function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(messageId) {
+  var goToMessage = (0, _hooks.useStableCallback)(function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(messageId) {
       var indexOfParentInMessageList;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
               return (message == null ? void 0 : message.id) === messageId;
             });
-            _context.prev = 1;
+            _context2.prev = 1;
             if (!(indexOfParentInMessageList === -1)) {
-              _context.next = 8;
+              _context2.next = 8;
               break;
             }
-            _context.next = 5;
+            _context2.next = 5;
             return loadChannelAroundMessage({
               messageId: messageId
             });
           case 5:
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 8:
             if (flatListRef.current) {
-              _context.next = 10;
+              _context2.next = 10;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 10:
             clearTimeout(failScrollTimeoutId.current);
             scrollToIndexFailedRetryCountRef.current = 0;
@@ -389,54 +458,54 @@ var MessageListWithContext = function MessageListWithContext(props) {
               index: indexOfParentInMessageList,
               viewPosition: 0.5
             });
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 16:
-            _context.next = 21;
+            _context2.next = 21;
             break;
           case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](1);
-            console.warn('Error while scrolling to message', _context.t0);
+            _context2.prev = 18;
+            _context2.t0 = _context2["catch"](1);
+            console.warn('Error while scrolling to message', _context2.t0);
           case 21:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[1, 18]]);
+      }, _callee2, null, [[1, 18]]);
     }));
-    return function goToMessage(_x) {
-      return _ref3.apply(this, arguments);
+    return function (_x2) {
+      return _ref4.apply(this, arguments);
     };
-  }();
+  }());
   (0, _react.useEffect)(function () {
     if (!targetedMessage) {
       return;
     }
-    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
       var indexOfParentInMessageList;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
               return (message == null ? void 0 : message.id) === targetedMessage;
             });
             if (!(indexOfParentInMessageList === -1)) {
-              _context2.next = 6;
+              _context3.next = 6;
               break;
             }
-            _context2.next = 4;
+            _context3.next = 4;
             return loadChannelAroundMessage({
               messageId: targetedMessage,
               setTargetedMessage: setTargetedMessage
             });
           case 4:
-            _context2.next = 13;
+            _context3.next = 13;
             break;
           case 6:
             if (flatListRef.current) {
-              _context2.next = 8;
+              _context3.next = 8;
               break;
             }
-            return _context2.abrupt("return");
+            return _context3.abrupt("return");
           case 8:
             clearTimeout(scrollToDebounceTimeoutRef.current);
             clearTimeout(failScrollTimeoutId.current);
@@ -449,16 +518,16 @@ var MessageListWithContext = function MessageListWithContext(props) {
             setTargetedMessage(undefined);
           case 13:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     })), WAIT_FOR_SCROLL_TIMEOUT);
   }, [targetedMessage]);
   var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android';
-  var renderItem = function renderItem(_ref5) {
-    var _message$user;
-    var index = _ref5.index,
-      message = _ref5.item;
+  var renderItem = (0, _react.useCallback)(function (_ref6) {
+    var _message$user, _messageGroupStylesRe;
+    var index = _ref6.index,
+      message = _ref6.item;
     if (!channel || channel.disconnected || !channel.initialized && !channel.offlineMode) {
       return null;
     }
@@ -469,12 +538,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
     var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (!!(channelUnreadState != null && channelUnreadState.first_unread_message_id) || !!(channelUnreadState != null && channelUnreadState.unread_messages));
     var showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
     var wrapMessageInTheme = client.userID === ((_message$user = message.user) == null ? void 0 : _message$user.id) && !!myMessageTheme;
-    var renderDateSeperator = (0, _useMessageList2.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && (0, _jsxRuntime.jsx)(InlineDateSeparator, {
-      date: message.dateSeparator
+    var renderDateSeperator = dateSeparatorsRef.current[message.id] && (0, _jsxRuntime.jsx)(InlineDateSeparator, {
+      date: dateSeparatorsRef.current[message.id]
     });
     var renderMessage = (0, _jsxRuntime.jsx)(Message, {
       goToMessage: goToMessage,
-      groupStyles: (0, _useMessageList2.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      groupStyles: (_messageGroupStylesRe = messageGroupStylesRef.current[message.id]) != null ? _messageGroupStylesRe : [],
       isTargetedMessage: highlightedMessageId === message.id,
       lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
       message: message,
@@ -502,92 +571,82 @@ var MessageListWithContext = function MessageListWithContext(props) {
         children: [renderDateSeperator, renderMessage]
       }), showUnreadUnderlay && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})]
     });
-  };
-  var maybeCallOnStartReached = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-      var callback, onError;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 2:
-            if (processedMessageList != null && processedMessageList.length) {
-              onStartReachedTracker.current[processedMessageList.length] = true;
-            }
-            callback = function callback() {
-              onStartReachedInPromise.current = null;
-              return Promise.resolve();
-            };
-            onError = function onError() {
-              setTimeout(function () {
-                onStartReachedTracker.current = {};
-              }, 2000);
-            };
-            if (!onEndReachedInPromise.current) {
-              _context3.next = 8;
-              break;
-            }
-            _context3.next = 8;
-            return onEndReachedInPromise.current;
-          case 8:
-            onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
-          case 9:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function maybeCallOnStartReached() {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  var maybeCallOnEndReached = function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-      var callback, onError;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
-              _context4.next = 2;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 2:
-            if (processedMessageList != null && processedMessageList.length) {
-              onEndReachedTracker.current[processedMessageList.length] = true;
-            }
-            callback = function callback() {
-              onEndReachedInPromise.current = null;
-              return Promise.resolve();
-            };
-            onError = function onError() {
-              setTimeout(function () {
-                onEndReachedTracker.current = {};
-              }, 2000);
-            };
-            if (!onStartReachedInPromise.current) {
-              _context4.next = 8;
-              break;
-            }
+  }, [InlineDateSeparator, InlineUnreadIndicator, Message, MessageSystem, channel, channelUnreadState == null ? void 0 : channelUnreadState.first_unread_message_id, channelUnreadState == null ? void 0 : channelUnreadState.last_read, channelUnreadState == null ? void 0 : channelUnreadState.last_read_message_id, channelUnreadState == null ? void 0 : channelUnreadState.unread_messages, client.userID, dateSeparatorsRef, goToMessage, highlightedMessageId, lastReceivedId, messageContainer, messageGroupStylesRef, modifiedTheme, myMessageTheme, onThreadSelect, screenPadding, shouldApplyAndroidWorkaround, shouldShowUnreadUnderlay, threadList]);
+  var maybeCallOnStartReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+    var callback, onError;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          if (!(processedMessageList != null && processedMessageList.length && onStartReachedTracker.current[processedMessageList.length])) {
+            _context4.next = 2;
+            break;
+          }
+          return _context4.abrupt("return");
+        case 2:
+          if (processedMessageList != null && processedMessageList.length) {
+            onStartReachedTracker.current[processedMessageList.length] = true;
+          }
+          callback = function callback() {
+            onStartReachedInPromise.current = null;
+            return Promise.resolve();
+          };
+          onError = function onError() {
+            setTimeout(function () {
+              onStartReachedTracker.current = {};
+            }, 2000);
+          };
+          if (!onEndReachedInPromise.current) {
             _context4.next = 8;
-            return onStartReachedInPromise.current;
-          case 8:
-            onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
-          case 9:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return function maybeCallOnEndReached() {
-      return _ref7.apply(this, arguments);
-    };
-  }();
-  var onUserScrollEvent = function onUserScrollEvent(event) {
+            break;
+          }
+          _context4.next = 8;
+          return onEndReachedInPromise.current;
+        case 8:
+          onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
+        case 9:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  var maybeCallOnEndReached = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    var callback, onError;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          if (!(processedMessageList != null && processedMessageList.length && onEndReachedTracker.current[processedMessageList.length])) {
+            _context5.next = 2;
+            break;
+          }
+          return _context5.abrupt("return");
+        case 2:
+          if (processedMessageList != null && processedMessageList.length) {
+            onEndReachedTracker.current[processedMessageList.length] = true;
+          }
+          callback = function callback() {
+            onEndReachedInPromise.current = null;
+            return Promise.resolve();
+          };
+          onError = function onError() {
+            setTimeout(function () {
+              onEndReachedTracker.current = {};
+            }, 2000);
+          };
+          if (!onStartReachedInPromise.current) {
+            _context5.next = 8;
+            break;
+          }
+          _context5.next = 8;
+          return onStartReachedInPromise.current;
+        case 8:
+          onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
+        case 9:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  var onUserScrollEvent = (0, _hooks.useStableCallback)(function (event) {
     var nativeEvent = event.nativeEvent;
     clearTimeout(onScrollEventTimeoutRef.current);
     var offset = nativeEvent.contentOffset.y;
@@ -604,8 +663,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (isScrollAtEnd) {
       maybeCallOnEndReached();
     }
-  };
-  var handleScroll = function handleScroll(event) {
+  });
+  var handleScroll = (0, _hooks.useStableCallback)(function (event) {
     var messageListHasMessages = processedMessageList.length > 0;
     var offset = event.nativeEvent.contentOffset.y;
     var isScrollAtBottom = offset <= 150;
@@ -615,43 +674,42 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (onListScroll) {
       onListScroll(event);
     }
-  };
-  var goToNewMessages = function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
-      var isNotLatestSet;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
-            if (!isNotLatestSet) {
-              _context5.next = 7;
-              break;
-            }
-            resetPaginationTrackersRef.current();
-            _context5.next = 5;
-            return reloadChannel();
-          case 5:
-            _context5.next = 8;
+  });
+  var goToNewMessages = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
+    var isNotLatestSet;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          isNotLatestSet = channel.state.messages !== channel.state.latestMessages;
+          if (!isNotLatestSet) {
+            _context6.next = 7;
             break;
-          case 7:
-            if (flatListRef.current) {
-              flatListRef.current.scrollToOffset({
-                animated: true,
-                offset: 0
-              });
-            }
-          case 8:
-            setScrollToBottomButtonVisible(false);
-          case 9:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5);
-    }));
-    return function goToNewMessages() {
-      return _ref8.apply(this, arguments);
-    };
-  }();
+          }
+          resetPaginationTrackersRef.current();
+          _context6.next = 5;
+          return reloadChannel();
+        case 5:
+          _context6.next = 8;
+          break;
+        case 7:
+          if (flatListRef.current) {
+            flatListRef.current.scrollToOffset({
+              animated: true,
+              offset: 0
+            });
+          }
+        case 8:
+          setScrollToBottomButtonVisible(false);
+          _context6.next = 11;
+          return markRead({
+            updateChannelUnreadState: false
+          });
+        case 11:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
   var scrollToIndexFailedRetryCountRef = (0, _react.useRef)(0);
   var failScrollTimeoutId = (0, _react.useRef)(undefined);
   var onScrollToIndexFailedRef = (0, _react.useRef)(function (info) {
@@ -702,45 +760,40 @@ var MessageListWithContext = function MessageListWithContext(props) {
       setMessages(messagesWithImages);
     }
   }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
-  var dismissImagePicker = function dismissImagePicker() {
+  var dismissImagePicker = (0, _hooks.useStableCallback)(function () {
     if (selectedPicker) {
       setSelectedPicker(undefined);
       closePicker();
     }
-  };
-  var onScrollBeginDrag = function onScrollBeginDrag(event) {
+  });
+  var onScrollBeginDrag = (0, _hooks.useStableCallback)(function (event) {
     !hasMoved && selectedPicker && setHasMoved(true);
     onUserScrollEvent(event);
-  };
-  var onScrollEndDrag = function onScrollEndDrag(event) {
+  });
+  var onScrollEndDrag = (0, _hooks.useStableCallback)(function (event) {
     hasMoved && selectedPicker && setHasMoved(false);
     onUserScrollEvent(event);
-  };
-  var refCallback = function refCallback(ref) {
+  });
+  var refCallback = (0, _hooks.useStableCallback)(function (ref) {
     flatListRef.current = ref;
     if (setFlatListRef) {
       setFlatListRef(ref);
     }
-  };
-  var onUnreadNotificationClose = function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6() {
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
-          case 0:
-            _context6.next = 2;
-            return markRead();
-          case 2:
-            setIsUnreadNotificationOpen(false);
-          case 3:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    }));
-    return function onUnreadNotificationClose() {
-      return _ref9.apply(this, arguments);
-    };
-  }();
+  });
+  var onUnreadNotificationClose = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7() {
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _context7.next = 2;
+          return markRead();
+        case 2:
+          setIsUnreadNotificationOpen(false);
+        case 3:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
   var debugRef = (0, _DebugContext.useDebugContext)();
   var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
   if (isDebugModeEnabled) {
@@ -781,6 +834,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
       rest = (0, _objectWithoutProperties2["default"])(additionalFlatListProps, _excluded);
     additionalFlatListPropsExcludingStyle = rest;
   }
+  var flatListStyle = (0, _react.useMemo)(function () {
+    return [styles.listContainer, listContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined];
+  }, [additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, listContainer, shouldApplyAndroidWorkaround]);
+  var flatListContentContainerStyle = (0, _react.useMemo)(function () {
+    return [styles.contentContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer];
+  }, [additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer]);
   if (!FlatList) {
     return null;
   }
@@ -808,7 +867,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         listType: "message"
       }) : null
     }) : (0, _jsxRuntime.jsx)(FlatList, Object.assign({
-      contentContainerStyle: [styles.contentContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.contentContainerStyle, contentContainer],
+      contentContainerStyle: flatListContentContainerStyle,
       data: processedMessageList,
       extraData: disabled,
       inverted: shouldApplyAndroidWorkaround ? false : inverted,
@@ -817,10 +876,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       keyExtractor: keyExtractor,
       ListFooterComponent: ListFooterComponent,
       ListHeaderComponent: ListHeaderComponent,
-      maintainVisibleContentPosition: {
-        autoscrollToTopThreshold: autoscrollToRecent ? 10 : undefined,
-        minIndexForVisible: 1
-      },
+      maintainVisibleContentPosition: maintainVisibleContentPosition,
       maxToRenderPerBatch: 30,
       onMomentumScrollEnd: onUserScrollEvent,
       onScroll: handleScroll,
@@ -828,12 +884,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
       onScrollEndDrag: onScrollEndDrag,
       onScrollToIndexFailed: onScrollToIndexFailedRef.current,
       onTouchEnd: dismissImagePicker,
-      onViewableItemsChanged: stableOnViwableItemsChanged,
+      onViewableItemsChanged: stableOnViewableItemsChanged,
       ref: refCallback,
       renderItem: renderItem,
       scrollEnabled: overlay === 'none',
       showsVerticalScrollIndicator: !shouldApplyAndroidWorkaround,
-      style: [styles.listContainer, listContainer, additionalFlatListProps == null ? void 0 : additionalFlatListProps.style, shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
+      style: flatListStyle,
       testID: "message-flat-list",
       viewabilityConfig: flatListViewabilityConfig
     }, additionalFlatListPropsExcludingStyle)), (0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -875,6 +931,7 @@ var MessageList = exports.MessageList = function MessageList(props) {
     NetworkDownIndicator = _useChannelContext.NetworkDownIndicator,
     reloadChannel = _useChannelContext.reloadChannel,
     scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
+    setChannelUnreadState = _useChannelContext.setChannelUnreadState,
     setTargetedMessage = _useChannelContext.setTargetedMessage,
     StickyHeader = _useChannelContext.StickyHeader,
     targetedMessage = _useChannelContext.targetedMessage,
@@ -943,6 +1000,7 @@ var MessageList = exports.MessageList = function MessageList(props) {
     ScrollToBottomButton: ScrollToBottomButton,
     scrollToFirstUnreadThreshold: scrollToFirstUnreadThreshold,
     selectedPicker: selectedPicker,
+    setChannelUnreadState: setChannelUnreadState,
     setMessages: setMessages,
     setSelectedPicker: setSelectedPicker,
     setTargetedMessage: setTargetedMessage,