stream-chat-react-native-core 6.0.2-beta.1 → 6.1.0-beta.1

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

@@ -33,7 +33,7 @@ var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT = 150;
+var WAIT_FOR_SCROLL_TIMEOUT = 0;
 var MAX_RETRIES_AFTER_SCROLL_FAILURE = 10;
 var styles = _reactNative.StyleSheet.create({
   container: {
@@ -42,7 +42,6 @@ var styles = _reactNative.StyleSheet.create({
     width: '100%'
   },
   contentContainer: {
-    flexGrow: 1,
     paddingBottom: 4
   },
   flex: {
@@ -77,6 +76,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var LoadingMoreRecentIndicator = props.threadList ? _InlineLoadingMoreRecentThreadIndicator.InlineLoadingMoreRecentThreadIndicator : _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator;
   var additionalFlatListProps = props.additionalFlatListProps,
     channel = props.channel,
+    channelUnreadState = props.channelUnreadState,
     client = props.client,
     closePicker = props.closePicker,
     DateHeader = props.DateHeader,
@@ -89,7 +89,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _props$HeaderComponen = props.HeaderComponent,
     HeaderComponent = _props$HeaderComponen === void 0 ? LoadingMoreRecentIndicator : _props$HeaderComponen,
     hideStickyDateHeader = props.hideStickyDateHeader,
-    initialScrollToFirstUnreadMessage = props.initialScrollToFirstUnreadMessage,
+    highlightedMessageId = props.highlightedMessageId,
     InlineDateSeparator = props.InlineDateSeparator,
     InlineUnreadIndicator = props.InlineUnreadIndicator,
     _props$inverted = props.inverted,
@@ -128,7 +128,12 @@ var MessageListWithContext = function MessageListWithContext(props) {
     _props$threadList = props.threadList,
     threadList = _props$threadList === void 0 ? false : _props$threadList,
     TypingIndicator = props.TypingIndicator,
-    TypingIndicatorContainer = props.TypingIndicatorContainer;
+    TypingIndicatorContainer = props.TypingIndicatorContainer,
+    UnreadMessagesNotification = props.UnreadMessagesNotification;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isUnreadNotificationOpen = _useState2[0],
+    setIsUnreadNotificationOpen = _useState2[1];
   var _useTheme = (0, _ThemeContext.useTheme)(),
     theme = _useTheme.theme;
   var white_snow = theme.colors.white_snow,
@@ -159,22 +164,17 @@ var MessageListWithContext = function MessageListWithContext(props) {
   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),
-    autoscrollToRecent = _useState2[0],
-    setAutoscrollToRecent = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    autoscrollToRecent = _useState4[0],
+    setAutoscrollToRecent = _useState4[1];
   var onStartReachedTracker = (0, _react.useRef)({});
   var onEndReachedTracker = (0, _react.useRef)({});
   var onStartReachedInPromise = (0, _react.useRef)(null);
   var onEndReachedInPromise = (0, _react.useRef)(null);
   var flatListRef = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(!initialScrollToFirstUnreadMessage),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    isInitialScrollDone = _useState4[0],
-    setInitialScrollDone = _useState4[1];
   var channelResyncScrollSet = (0, _react.useRef)(true);
   var scrollToDebounceTimeoutRef = (0, _react.useRef)();
-  var initialScrollSettingTimeoutRef = (0, _react.useRef)();
   var onScrollEventTimeoutRef = (0, _react.useRef)();
   var messageIdLastScrolledToRef = (0, _react.useRef)();
   var _useState5 = (0, _react.useState)(false),
@@ -197,9 +197,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var channelRef = (0, _react.useRef)(channel);
   channelRef.current = channel;
   var updateStickyHeaderDateIfNeeded = function updateStickyHeaderDateIfNeeded(viewableItems) {
-    if (viewableItems.length) {
+    if (!viewableItems.length) return;
+    var lastItem = viewableItems[viewableItems.length - 1];
+    if (lastItem) {
       var _lastItem$item, _stickyHeaderDateRef$;
-      var lastItem = viewableItems.pop();
+      if (!channel.state.messagePagination.hasPrev && processedMessageList[processedMessageList.length - 1].id === lastItem.item.id) {
+        setStickyHeaderDate(undefined);
+        return;
+      }
       var isMessageTypeDeleted = lastItem.item.type === 'deleted';
       if (lastItem != null && (_lastItem$item = lastItem.item) != null && _lastItem$item.created_at && !isMessageTypeDeleted && typeof lastItem.item.created_at !== 'string' && lastItem.item.created_at.toDateString() !== ((_stickyHeaderDateRef$ = stickyHeaderDateRef.current) == null ? void 0 : _stickyHeaderDateRef$.toDateString())) {
         stickyHeaderDateRef.current = lastItem.item.created_at;
@@ -207,15 +212,41 @@ var MessageListWithContext = function MessageListWithContext(props) {
       }
     }
   };
-  var onViewableItemsChanged = (0, _react.useRef)(function (_ref) {
+  var updateStickyUnreadIndicator = function updateStickyUnreadIndicator(viewableItems) {
+    if (!viewableItems.length) {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    if (selectedPicker === 'images') {
+      setIsUnreadNotificationOpen(false);
+      return;
+    }
+    var lastItem = viewableItems[viewableItems.length - 1];
+    if (lastItem) {
+      var lastItemCreatedAt = lastItem.item.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) {
+        setIsUnreadNotificationOpen(false);
+        return;
+      }
+      if (unreadIndicatorDate && lastItemDate > unreadIndicatorDate) {
+        setIsUnreadNotificationOpen(true);
+      } else {
+        setIsUnreadNotificationOpen(false);
+      }
+    }
+  };
+  var onViewableItemsChanged = function onViewableItemsChanged(_ref) {
     var viewableItems = _ref.viewableItems;
-    if (_reactNative.Platform.OS === 'android' && viewableItems != null && viewableItems.length && (viewableItems == null ? void 0 : viewableItems.length) >= messageListLengthBeforeUpdate.current) {
-      channel.markRead();
+    if (!viewableItems) {
+      return;
     }
-    if (viewableItems && !hideStickyDateHeader) {
+    if (!hideStickyDateHeader) {
       updateStickyHeaderDateIfNeeded(viewableItems);
     }
-  });
+    updateStickyUnreadIndicator(viewableItems);
+  };
   var resetPaginationTrackersRef = (0, _react.useRef)(function () {
     onStartReachedTracker.current = {};
     onEndReachedTracker.current = {};
@@ -226,23 +257,18 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   }, [disabled]);
   (0, _react.useEffect)(function () {
-    var getShouldMarkReadAutomatically = function getShouldMarkReadAutomatically() {
-      if (loading || !channel) {
-        return false;
-      } else if (channel.countUnread() > 0) {
-        if (!initialScrollToFirstUnreadMessage) {
-          return true;
-        } else {
-          if (scrollToBottomButtonVisible) return false;
-          return isInitialScrollDone;
-        }
+    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();
       }
-      return false;
+    });
+    return function () {
+      listener == null ? void 0 : listener.unsubscribe();
     };
-    if (getShouldMarkReadAutomatically()) {
-      markRead();
-    }
-  }, [loading, scrollToBottomButtonVisible, isInitialScrollDone]);
+  }, [channel, markRead, scrollToBottomButtonVisible]);
   (0, _react.useEffect)(function () {
     var lastReceivedMessage = (0, _getLastReceivedMessage.getLastReceivedMessage)(processedMessageList);
     setLastReceivedId(lastReceivedMessage == null ? void 0 : lastReceivedMessage.id);
@@ -261,7 +287,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
           (_flatListRef$current = flatListRef.current) == null ? void 0 : _flatListRef$current.scrollToOffset({
             offset: 0
           });
-        }, 50);
+        }, WAIT_FOR_SCROLL_TIMEOUT);
         setTimeout(function () {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
@@ -272,8 +298,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
     };
     if (threadList) {
       scrollToBottomIfNeeded();
-    } else {
-      setScrollToBottomButtonVisible(false);
     }
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
@@ -309,51 +333,121 @@ var MessageListWithContext = function MessageListWithContext(props) {
             animated: true,
             offset: 0
           });
-        }, 150);
+        }, WAIT_FOR_SCROLL_TIMEOUT);
       }
     }
   }, [rawMessageList, threadList]);
+  var goToMessage = function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(messageId) {
+      var indexOfParentInMessageList;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
+              return (message == null ? void 0 : message.id) === messageId;
+            });
+            _context.prev = 1;
+            if (!(indexOfParentInMessageList === -1)) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 5;
+            return loadChannelAroundMessage({
+              messageId: messageId
+            });
+          case 5:
+            return _context.abrupt("return");
+          case 8:
+            if (flatListRef.current) {
+              _context.next = 10;
+              break;
+            }
+            return _context.abrupt("return");
+          case 10:
+            clearTimeout(failScrollTimeoutId.current);
+            scrollToIndexFailedRetryCountRef.current = 0;
+            messageIdLastScrolledToRef.current = messageId;
+            setTargetedMessage(messageId);
+            flatListRef.current.scrollToIndex({
+              animated: true,
+              index: indexOfParentInMessageList,
+              viewPosition: 0.5
+            });
+            return _context.abrupt("return");
+          case 16:
+            _context.next = 21;
+            break;
+          case 18:
+            _context.prev = 18;
+            _context.t0 = _context["catch"](1);
+            console.warn('Error while scrolling to message', _context.t0);
+          case 21:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 18]]);
+    }));
+    return function goToMessage(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  (0, _react.useEffect)(function () {
+    if (!targetedMessage) return;
+    scrollToDebounceTimeoutRef.current = setTimeout((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+      var indexOfParentInMessageList;
+      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) === targetedMessage;
+            });
+            if (!(indexOfParentInMessageList === -1)) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 4;
+            return loadChannelAroundMessage({
+              messageId: targetedMessage,
+              setTargetedMessage: setTargetedMessage
+            });
+          case 4:
+            _context2.next = 13;
+            break;
+          case 6:
+            if (flatListRef.current) {
+              _context2.next = 8;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 8:
+            clearTimeout(scrollToDebounceTimeoutRef.current);
+            clearTimeout(failScrollTimeoutId.current);
+            scrollToIndexFailedRetryCountRef.current = 0;
+            flatListRef.current.scrollToIndex({
+              animated: true,
+              index: indexOfParentInMessageList,
+              viewPosition: 0.5
+            });
+            setTargetedMessage(undefined);
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    })), WAIT_FOR_SCROLL_TIMEOUT);
+  }, [targetedMessage]);
   var shouldApplyAndroidWorkaround = inverted && _reactNative.Platform.OS === 'android';
-  var renderItem = function renderItem(_ref2) {
+  var renderItem = function renderItem(_ref4) {
     var _message$user;
-    var index = _ref2.index,
-      message = _ref2.item;
+    var index = _ref4.index,
+      message = _ref4.item;
     if (!channel || channel.disconnected || !channel.initialized && !channel.offlineMode) return null;
-    var unreadCount = channel.countUnread();
-    var lastRead = channel.lastRead();
-    function isMessageUnread(messageArrayIndex) {
-      var isLatestMessageSetShown = !!channel.state.messageSets.find(function (set) {
-        return set.isCurrent && set.isLatest;
-      });
-      if (!isLatestMessageSetShown) {
-        var msg = processedMessageList == null ? void 0 : processedMessageList[messageArrayIndex];
-        if (channel.state.latestMessages.length !== 0 && unreadCount > channel.state.latestMessages.length) {
-          return messageArrayIndex <= unreadCount - channel.state.latestMessages.length - 1;
-        } else if (lastRead && msg != null && msg.created_at) {
-          return lastRead < msg.created_at;
-        }
-        return false;
-      } else {
-        return messageArrayIndex <= unreadCount - 1;
-      }
-    }
-    var isCurrentMessageUnread = isMessageUnread(index);
-    var showUnreadUnderlay = !!shouldShowUnreadUnderlay && !channel.muteStatus().muted && isCurrentMessageUnread && scrollToBottomButtonVisible;
-    var insertInlineUnreadIndicator = showUnreadUnderlay && !isMessageUnread(index + 1);
-    if (message.type === 'system') {
-      return (0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
-        children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
-          testID: "message-list-item-".concat(index),
-          children: (0, _jsxRuntime.jsx)(MessageSystem, {
-            message: message,
-            style: [{
-              paddingHorizontal: screenPadding
-            }, messageContainer]
-          })
-        }), insertInlineUnreadIndicator && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})]
-      });
-    }
+    var createdAtTimestamp = message.created_at && new Date(message.created_at).getTime();
+    var lastReadTimestamp = channelUnreadState == null ? void 0 : channelUnreadState.last_read.getTime();
+    var isNewestMessage = index === 0;
+    var isLastReadMessage = (channelUnreadState == null ? void 0 : channelUnreadState.last_read_message_id) === message.id || !(channelUnreadState != null && channelUnreadState.unread_messages) && createdAtTimestamp === lastReadTimestamp;
+    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
@@ -361,7 +455,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     var renderMessage = (0, _jsxRuntime.jsx)(Message, {
       goToMessage: goToMessage,
       groupStyles: (0, _useMessageList2.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
-      isTargetedMessage: targetedMessage === message.id,
+      isTargetedMessage: highlightedMessageId === message.id,
       lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
@@ -369,35 +463,37 @@ var MessageListWithContext = function MessageListWithContext(props) {
       style: [messageContainer],
       threadList: threadList
     });
-    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [wrapMessageInTheme ? (0, _jsxRuntime.jsx)(_ThemeContext.ThemeProvider, {
+    return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
+      testID: "message-list-item-".concat(index),
+      children: [message.type === 'system' ? (0, _jsxRuntime.jsx)(MessageSystem, {
+        message: message,
+        style: [{
+          paddingHorizontal: screenPadding
+        }, messageContainer]
+      }) : wrapMessageInTheme ? (0, _jsxRuntime.jsx)(_ThemeContext.ThemeProvider, {
         mergedStyle: modifiedTheme,
         children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
           testID: "message-list-item-".concat(index),
-          children: [shouldApplyAndroidWorkaround && renderDateSeperator, renderMessage]
+          children: [renderDateSeperator, renderMessage]
         })
       }) : (0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: [shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
         testID: "message-list-item-".concat(index),
-        children: [shouldApplyAndroidWorkaround && renderDateSeperator, renderMessage]
-      }), !shouldApplyAndroidWorkaround && renderDateSeperator, (0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [shouldApplyAndroidWorkaround ? styles.invertAndroid : undefined],
-        children: insertInlineUnreadIndicator && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})
-      })]
+        children: [renderDateSeperator, renderMessage]
+      }), showUnreadUnderlay && (0, _jsxRuntime.jsx)(InlineUnreadIndicator, {})]
     });
   };
   var maybeCallOnStartReached = function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
+    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
       var callback, onError;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      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])) {
-              _context.next = 2;
+              _context3.next = 2;
               break;
             }
-            return _context.abrupt("return");
+            return _context3.abrupt("return");
           case 2:
             if (processedMessageList != null && processedMessageList.length) {
               onStartReachedTracker.current[processedMessageList.length] = true;
@@ -412,34 +508,34 @@ var MessageListWithContext = function MessageListWithContext(props) {
               }, 2000);
             };
             if (!onEndReachedInPromise.current) {
-              _context.next = 8;
+              _context3.next = 8;
               break;
             }
-            _context.next = 8;
+            _context3.next = 8;
             return onEndReachedInPromise.current;
           case 8:
             onStartReachedInPromise.current = (threadList && !!threadInstance && loadMoreRecentThread ? loadMoreRecentThread({}) : loadMoreRecent()).then(callback)["catch"](onError);
           case 9:
           case "end":
-            return _context.stop();
+            return _context3.stop();
         }
-      }, _callee);
+      }, _callee3);
     }));
     return function maybeCallOnStartReached() {
-      return _ref3.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var maybeCallOnEndReached = function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
       var callback, onError;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      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])) {
-              _context2.next = 2;
+              _context4.next = 2;
               break;
             }
-            return _context2.abrupt("return");
+            return _context4.abrupt("return");
           case 2:
             if (processedMessageList != null && processedMessageList.length) {
               onEndReachedTracker.current[processedMessageList.length] = true;
@@ -454,21 +550,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
               }, 2000);
             };
             if (!onStartReachedInPromise.current) {
-              _context2.next = 8;
+              _context4.next = 8;
               break;
             }
-            _context2.next = 8;
+            _context4.next = 8;
             return onStartReachedInPromise.current;
           case 8:
             onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
           case 9:
           case "end":
-            return _context2.stop();
+            return _context4.stop();
         }
-      }, _callee2);
+      }, _callee4);
     }));
     return function maybeCallOnEndReached() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var onUserScrollEvent = function onUserScrollEvent(event) {
@@ -490,72 +586,61 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
   };
   var handleScroll = function handleScroll(event) {
-    var offset = event.nativeEvent.contentOffset.y;
     var messageListHasMessages = processedMessageList.length > 0;
+    var offset = event.nativeEvent.contentOffset.y;
     var isScrollAtBottom = offset <= 150;
     var notLatestSet = channel.state.messages !== channel.state.latestMessages;
     var showScrollToBottomButton = messageListHasMessages && (!threadList && notLatestSet || !isScrollAtBottom);
     setScrollToBottomButtonVisible(showScrollToBottomButton);
-    var shouldMarkRead = !threadList && !notLatestSet && offset <= 0 && channel.countUnread() > 0;
-    if (shouldMarkRead) {
-      markRead();
-    }
-    setInitialScrollDone(false);
     if (onListScroll) {
       onListScroll(event);
     }
   };
   var goToNewMessages = function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+    var _ref7 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
       var isNotLatestSet;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      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) {
-              _context3.next = 7;
+              _context5.next = 7;
               break;
             }
             resetPaginationTrackersRef.current();
-            _context3.next = 5;
+            _context5.next = 5;
             return reloadChannel();
           case 5:
-            _context3.next = 8;
+            _context5.next = 8;
             break;
           case 7:
             if (flatListRef.current) {
               flatListRef.current.scrollToOffset({
+                animated: true,
                 offset: 0
               });
             }
           case 8:
             setScrollToBottomButtonVisible(false);
-            if (!threadList) {
-              markRead();
-            }
-          case 10:
+          case 9:
           case "end":
-            return _context3.stop();
+            return _context5.stop();
         }
-      }, _callee3);
+      }, _callee5);
     }));
     return function goToNewMessages() {
-      return _ref5.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   var scrollToIndexFailedRetryCountRef = (0, _react.useRef)(0);
   var failScrollTimeoutId = (0, _react.useRef)();
   var onScrollToIndexFailedRef = (0, _react.useRef)(function (info) {
     if (!flatListRef.current) return;
-    flatListRef.current.scrollToOffset({
-      animated: false,
-      offset: info.averageItemLength * info.index
-    });
     failScrollTimeoutId.current = setTimeout(function () {
       try {
         var _flatListRef$current3;
         (_flatListRef$current3 = flatListRef.current) == null ? void 0 : _flatListRef$current3.scrollToIndex({
-          animated: false,
+          animated: true,
           index: info.index,
           viewPosition: 0.5
         });
@@ -571,80 +656,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
         scrollToIndexFailedRetryCountRef.current += 1;
         onScrollToIndexFailedRef.current(info);
       }
-    }, WAIT_FOR_SCROLL_TO_OFFSET_TIMEOUT);
+    }, WAIT_FOR_SCROLL_TIMEOUT);
   });
-  var goToMessage = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4(messageId) {
-      var indexOfParentInMessageList;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            indexOfParentInMessageList = processedMessageList.findIndex(function (message) {
-              return (message == null ? void 0 : message.id) === messageId;
-            });
-            if (!(indexOfParentInMessageList !== -1 && flatListRef.current)) {
-              _context4.next = 8;
-              break;
-            }
-            clearTimeout(failScrollTimeoutId.current);
-            scrollToIndexFailedRetryCountRef.current = 0;
-            messageIdLastScrolledToRef.current = messageId;
-            setTargetedMessage(messageId);
-            flatListRef.current.scrollToIndex({
-              animated: true,
-              index: indexOfParentInMessageList,
-              viewPosition: 0.5
-            });
-            return _context4.abrupt("return");
-          case 8:
-            _context4.next = 10;
-            return loadChannelAroundMessage({
-              messageId: messageId
-            });
-          case 10:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4);
-    }));
-    return function goToMessage(_x) {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  (0, _react.useEffect)(function () {
-    scrollToDebounceTimeoutRef.current = setTimeout(function () {
-      if (initialScrollToFirstUnreadMessage) {
-        clearTimeout(initialScrollSettingTimeoutRef.current);
-        initialScrollSettingTimeoutRef.current = setTimeout(function () {
-          setInitialScrollDone(true);
-        }, 2000);
-      }
-      var messageIdToScroll;
-      if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
-        messageIdToScroll = targetedMessage;
-      }
-      if (!messageIdToScroll) return;
-      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);
-        messageIdLastScrolledToRef.current = messageIdToScroll;
-        scrollToIndexFailedRetryCountRef.current = 0;
-        flatListRef.current.scrollToIndex({
-          animated: false,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5
-        });
-      }
-      if (indexOfParentInMessageList === -1) {
-        loadChannelAroundMessage({
-          messageId: messageIdToScroll
-        });
-      }
-    }, 50);
-  }, [targetedMessage, initialScrollToFirstUnreadMessage]);
   var messagesWithImages = legacyImageViewerSwipeBehaviour && processedMessageList.filter(function (message) {
     var isMessageTypeDeleted = message.type === 'deleted';
     if (!isMessageTypeDeleted && message.attachments) {
@@ -687,6 +700,25 @@ var MessageListWithContext = function MessageListWithContext(props) {
       setFlatListRef(ref);
     }
   };
+  var onUnreadNotificationClose = function () {
+    var _ref8 = (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 _ref8.apply(this, arguments);
+    };
+  }();
   var debugRef = (0, _DebugContext.useDebugContext)();
   var isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
   if (isDebugModeEnabled) {
@@ -768,7 +800,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       onScrollEndDrag: onScrollEndDrag,
       onScrollToIndexFailed: onScrollToIndexFailedRef.current,
       onTouchEnd: dismissImagePicker,
-      onViewableItemsChanged: onViewableItemsChanged.current,
+      onViewableItemsChanged: onViewableItemsChanged,
       ref: refCallback,
       renderItem: renderItem,
       scrollEnabled: overlay === 'none',
@@ -788,7 +820,9 @@ var MessageListWithContext = function MessageListWithContext(props) {
       onPress: goToNewMessages,
       showNotification: scrollToBottomButtonVisible,
       unreadCount: threadList ? 0 : channel == null ? void 0 : channel.countUnread()
-    }), (0, _jsxRuntime.jsx)(NetworkDownIndicator, {})]
+    }), (0, _jsxRuntime.jsx)(NetworkDownIndicator, {}), isUnreadNotificationOpen && !threadList ? (0, _jsxRuntime.jsx)(UnreadMessagesNotification, {
+      onCloseHandler: onUnreadNotificationClose
+    }) : null]
   });
 };
 var MessageList = function MessageList(props) {
@@ -798,11 +832,13 @@ var MessageList = function MessageList(props) {
     setSelectedPicker = _useAttachmentPickerC.setSelectedPicker;
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
     channel = _useChannelContext.channel,
+    channelUnreadState = _useChannelContext.channelUnreadState,
     disabled = _useChannelContext.disabled,
     EmptyStateIndicator = _useChannelContext.EmptyStateIndicator,
     enableMessageGroupingByUser = _useChannelContext.enableMessageGroupingByUser,
     error = _useChannelContext.error,
     hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
+    highlightedMessageId = _useChannelContext.highlightedMessageId,
     isChannelActive = _useChannelContext.isChannelActive,
     loadChannelAroundMessage = _useChannelContext.loadChannelAroundMessage,
     loading = _useChannelContext.loading,
@@ -823,7 +859,6 @@ var MessageList = function MessageList(props) {
     DateHeader = _useMessagesContext.DateHeader,
     disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
     FlatList = _useMessagesContext.FlatList,
-    initialScrollToFirstUnreadMessage = _useMessagesContext.initialScrollToFirstUnreadMessage,
     InlineDateSeparator = _useMessagesContext.InlineDateSeparator,
     InlineUnreadIndicator = _useMessagesContext.InlineUnreadIndicator,
     legacyImageViewerSwipeBehaviour = _useMessagesContext.legacyImageViewerSwipeBehaviour,
@@ -833,7 +868,8 @@ var MessageList = function MessageList(props) {
     ScrollToBottomButton = _useMessagesContext.ScrollToBottomButton,
     shouldShowUnreadUnderlay = _useMessagesContext.shouldShowUnreadUnderlay,
     TypingIndicator = _useMessagesContext.TypingIndicator,
-    TypingIndicatorContainer = _useMessagesContext.TypingIndicatorContainer;
+    TypingIndicatorContainer = _useMessagesContext.TypingIndicatorContainer,
+    UnreadMessagesNotification = _useMessagesContext.UnreadMessagesNotification;
   var _usePaginatedMessageL = (0, _PaginatedMessageListContext.usePaginatedMessageListContext)(),
     loadMore = _usePaginatedMessageL.loadMore,
     loadMoreRecent = _usePaginatedMessageL.loadMoreRecent;
@@ -846,6 +882,7 @@ var MessageList = function MessageList(props) {
     threadInstance = _useThreadContext.threadInstance;
   return (0, _jsxRuntime.jsx)(MessageListWithContext, Object.assign({
     channel: channel,
+    channelUnreadState: channelUnreadState,
     client: client,
     closePicker: closePicker,
     DateHeader: DateHeader,
@@ -856,7 +893,7 @@ var MessageList = function MessageList(props) {
     error: error,
     FlatList: FlatList,
     hideStickyDateHeader: hideStickyDateHeader,
-    initialScrollToFirstUnreadMessage: initialScrollToFirstUnreadMessage,
+    highlightedMessageId: highlightedMessageId,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
     isListActive: isChannelActive,
@@ -888,7 +925,8 @@ var MessageList = function MessageList(props) {
     threadInstance: threadInstance,
     threadList: threadList,
     TypingIndicator: TypingIndicator,
-    TypingIndicatorContainer: TypingIndicatorContainer
+    TypingIndicatorContainer: TypingIndicatorContainer,
+    UnreadMessagesNotification: UnreadMessagesNotification
   }, props, {
     noGroupByUser: !enableMessageGroupingByUser || props.noGroupByUser
   }));