stream-chat-react-native-core 4.11.0-beta.1 → 5.0.0-offline-support.0

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

@@ -50,7 +50,7 @@ var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -111,6 +111,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       FlatList = props.FlatList,
       _props$FooterComponen = props.FooterComponent,
       FooterComponent = _props$FooterComponen === void 0 ? LoadingMoreIndicator : _props$FooterComponen,
+      hasNoMoreRecentMessagesToLoad = props.hasNoMoreRecentMessagesToLoad,
       _props$HeaderComponen = props.HeaderComponent,
       HeaderComponent = _props$HeaderComponen === void 0 ? _InlineLoadingMoreRecentIndicator.InlineLoadingMoreRecentIndicator : _props$HeaderComponen,
       hideStickyDateHeader = props.hideStickyDateHeader,
@@ -122,7 +123,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       _props$isListActive = props.isListActive,
       isListActive = _props$isListActive === void 0 ? false : _props$isListActive,
       legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
-      loadChannelAtMessage = props.loadChannelAtMessage,
+      loadChannelAroundMessage = props.loadChannelAroundMessage,
       loading = props.loading,
       LoadingIndicator = props.LoadingIndicator,
       loadMore = props.loadMore,
@@ -189,8 +190,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var onStartReachedInPromise = (0, _react.useRef)(null);
   var onEndReachedInPromise = (0, _react.useRef)(null);
   var flatListRef = (0, _react.useRef)(null);
-  var initialScrollSet = (0, _react.useRef)(false);
+  var initialScrollSet = (0, _react.useRef)(!initialScrollToFirstUnreadMessage);
   var channelResyncScrollSet = (0, _react.useRef)(true);
+  var scrollToDebounceTimeoutRef = (0, _react.useRef)();
+  var messageIdToScrollToRef = (0, _react.useRef)();
+  var messageIdLastScrolledToRef = (0, _react.useRef)();
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -213,35 +217,13 @@ var MessageListWithContext = function MessageListWithContext(props) {
       setStickyHeaderDate = _useState10[1];
 
   var stickyHeaderDateRef = (0, _react.useRef)();
-
-  var getLastReadSafely = function getLastReadSafely() {
-    return channel != null && channel.initialized ? channel.lastRead() : undefined;
-  };
-
-  var channelLastRead = (0, _react.useRef)(getLastReadSafely());
-
-  var isUnreadMessage = function isUnreadMessage(message, lastRead) {
+  var isUnreadMessageRef = (0, _react.useRef)(function (message, lastRead) {
     return message && lastRead && message.created_at && lastRead < message.created_at;
-  };
-
-  var setInitialScrollIfNeeded = function setInitialScrollIfNeeded() {
-    if (!initialScrollToFirstUnreadMessage || initialScrollSet.current) {
-      initialScrollSet.current = true;
-      return;
-    }
-
-    if (isUnreadMessage(topMessageBeforeUpdate.current, channelLastRead.current)) {
-      if (flatListRef.current) {
-        flatListRef.current.scrollToEnd();
-      }
-
-      setTimeout(function () {
-        initialScrollSet.current = true;
-      }, 500);
-    } else if (!initialScrollSet.current) {
-      initialScrollSet.current = true;
-    }
-  };
+  });
+  var channelLastReadRef = (0, _react.useRef)(channel != null && channel.initialized ? channel.lastRead() : undefined);
+  (0, _react.useEffect)(function () {
+    channelLastReadRef.current = channel != null && channel.initialized ? channel.lastRead() : undefined;
+  }, [channel]);
 
   var updateStickyHeaderDateIfNeeded = function updateStickyHeaderDateIfNeeded(viewableItems) {
     if (viewableItems.length) {
@@ -267,15 +249,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
     if (viewableItems && !hideStickyDateHeader) {
       updateStickyHeaderDateIfNeeded(viewableItems);
     }
-
-    setInitialScrollIfNeeded();
   });
-
-  var resetPaginationTrackers = function resetPaginationTrackers() {
+  var resetPaginationTrackersRef = (0, _react.useRef)(function () {
     onStartReachedTracker.current = {};
     onEndReachedTracker.current = {};
-  };
-
+  });
   (0, _react.useEffect)(function () {
     setScrollToBottomButtonVisible(false);
   }, [disabled]);
@@ -304,11 +282,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
       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) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
-        resetPaginationTrackers();
+        resetPaginationTrackersRef.current();
         setTimeout(function () {
           var _flatListRef$current;
 
-          return (_flatListRef$current = flatListRef.current) == null ? void 0 : _flatListRef$current.scrollToOffset({
+          (_flatListRef$current = flatListRef.current) == null ? void 0 : _flatListRef$current.scrollToOffset({
             offset: 0
           });
         }, 50);
@@ -322,30 +300,22 @@ var MessageListWithContext = function MessageListWithContext(props) {
       }
     };
 
-    if (threadList || channel != null && channel.state.isUpToDate) {
+    if (threadList || hasNoMoreRecentMessagesToLoad) {
       scrollToBottomIfNeeded();
     } else if (!scrollToBottomButtonVisible) {
       setScrollToBottomButtonVisible(true);
     }
 
-    if (!(channel != null && channel.state.isUpToDate) && flatListRef.current && messageListLengthBeforeUpdate.current === 0 && messageListLengthAfterUpdate < 10) {
+    if (!hasNoMoreRecentMessagesToLoad && flatListRef.current && messageListLengthBeforeUpdate.current === 0 && messageListLengthAfterUpdate < 10) {
       maybeCallOnStartReached(10);
     }
 
-    if (initialScrollToFirstUnreadMessage && !initialScrollSet.current) {
-      channelLastRead.current = getLastReadSafely();
-    }
-
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
   }, [messageListLengthAfterUpdate, topMessageAfterUpdate == null ? void 0 : topMessageAfterUpdate.id]);
   (0, _react.useEffect)(function () {
-    if (!(channel != null && channel.state.isUpToDate) && autoscrollToTop) {
-      setAutoscrollToTop(false);
-    } else if (channel != null && channel.state.isUpToDate && !autoscrollToTop) {
-      setAutoscrollToTop(true);
-    }
-  }, [messageListLengthAfterUpdate]);
+    setAutoscrollToTop(hasNoMoreRecentMessagesToLoad);
+  }, [messageList, hasNoMoreRecentMessagesToLoad]);
 
   var renderItem = function renderItem(_ref2) {
     var _message$user;
@@ -353,10 +323,10 @@ var MessageListWithContext = function MessageListWithContext(props) {
     var index = _ref2.index,
         message = _ref2.item;
     if (!channel || !channel.initialized) return null;
-    var lastRead = getLastReadSafely();
+    var lastRead = channel.lastRead();
     var lastMessage = messageList == null ? void 0 : messageList[index + 1];
-    var showUnreadUnderlay = !!isUnreadMessage(message, lastRead) && scrollToBottomButtonVisible;
-    var insertInlineUnreadIndicator = showUnreadUnderlay && !isUnreadMessage(lastMessage, lastRead);
+    var showUnreadUnderlay = !!isUnreadMessageRef.current(message, lastRead) && scrollToBottomButtonVisible;
+    var insertInlineUnreadIndicator = showUnreadUnderlay && !isUnreadMessageRef.current(lastMessage, lastRead);
 
     if (message.type === 'system') {
       return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -364,7 +334,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 555,
+          lineNumber: 547,
           columnNumber: 11
         }
       }, _react["default"].createElement(MessageSystem, {
@@ -373,14 +343,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 556,
+          lineNumber: 548,
           columnNumber: 13
         }
       })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 558,
+          lineNumber: 550,
           columnNumber: 43
         }
       }));
@@ -392,7 +362,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 566,
+        lineNumber: 558,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -400,7 +370,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 567,
+        lineNumber: 559,
         columnNumber: 11
       }
     }, _react["default"].createElement(Message, {
@@ -416,7 +386,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 568,
+        lineNumber: 560,
         columnNumber: 13
       }
     }))), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -424,14 +394,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 584,
+        lineNumber: 576,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 587,
+        lineNumber: 579,
         columnNumber: 41
       }
     })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -439,7 +409,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 591,
+        lineNumber: 583,
         columnNumber: 9
       }
     }, _react["default"].createElement(Message, {
@@ -455,7 +425,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 592,
+        lineNumber: 584,
         columnNumber: 11
       }
     })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
@@ -463,139 +433,79 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 611,
+        lineNumber: 603,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 614,
+        lineNumber: 606,
         columnNumber: 41
       }
     }));
   };
 
-  var maybeCallOnStartReached = function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(limit) {
-      var callback, onError;
-      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])) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              if (messageList != null && messageList.length) {
-                onStartReachedTracker.current[messageList.length] = true;
-              }
-
-              callback = function callback() {
-                onStartReachedInPromise.current = null;
-                return Promise.resolve();
-              };
-
-              onError = function onError() {
-                setTimeout(function () {
-                  onStartReachedTracker.current = {};
-                }, 2000);
-              };
-
-              if (!onEndReachedInPromise.current) {
-                _context.next = 11;
-                break;
-              }
-
-              _context.next = 8;
-              return onEndReachedInPromise.current;
-
-            case 8:
-              onStartReachedInPromise.current = loadMoreRecent(limit).then(callback)["catch"](onError);
-              _context.next = 12;
-              break;
-
-            case 11:
-              onStartReachedInPromise.current = loadMoreRecent(limit).then(callback)["catch"](onError);
+  var maybeCallOnStartReached = function maybeCallOnStartReached(limit) {
+    if (messageList != null && messageList.length && onStartReachedTracker.current[messageList.length]) {
+      return;
+    }
 
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
+    if (messageList != null && messageList.length) {
+      onStartReachedTracker.current[messageList.length] = true;
+    }
 
-    return function maybeCallOnStartReached(_x) {
-      return _ref3.apply(this, arguments);
+    var callback = function callback() {
+      onStartReachedInPromise.current = null;
+      return Promise.resolve();
     };
-  }();
-
-  var maybeCallOnEndReached = function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
-      var callback, onError;
-      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])) {
-                _context2.next = 2;
-                break;
-              }
-
-              return _context2.abrupt("return");
-
-            case 2:
-              if (messageList != null && messageList.length) {
-                onEndReachedTracker.current[messageList.length] = true;
-              }
-
-              callback = function callback() {
-                onEndReachedInPromise.current = null;
-                return Promise.resolve();
-              };
 
-              onError = function onError() {
-                setTimeout(function () {
-                  onEndReachedTracker.current = {};
-                }, 2000);
-              };
-
-              if (!onStartReachedInPromise.current) {
-                _context2.next = 11;
-                break;
-              }
+    var onError = function onError() {
+      setTimeout(function () {
+        onStartReachedTracker.current = {};
+      }, 2000);
+    };
 
-              _context2.next = 8;
-              return onStartReachedInPromise.current;
+    if (onEndReachedInPromise.current) {
+      onEndReachedInPromise.current["finally"](function () {
+        onStartReachedInPromise.current = loadMoreRecent(limit).then(callback)["catch"](onError);
+      });
+    } else {
+      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback)["catch"](onError);
+    }
+  };
 
-            case 8:
-              onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
-              _context2.next = 12;
-              break;
+  var maybeCallOnEndReached = function maybeCallOnEndReached() {
+    if (messageList != null && messageList.length && onEndReachedTracker.current[messageList.length]) {
+      return;
+    }
 
-            case 11:
-              onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
+    if (messageList != null && messageList.length) {
+      onEndReachedTracker.current[messageList.length] = true;
+    }
 
-            case 12:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
+    var callback = function callback() {
+      onEndReachedInPromise.current = null;
+      return Promise.resolve();
+    };
 
-    return function maybeCallOnEndReached() {
-      return _ref4.apply(this, arguments);
+    var onError = function onError() {
+      setTimeout(function () {
+        onEndReachedTracker.current = {};
+      }, 2000);
     };
-  }();
+
+    if (onStartReachedInPromise.current) {
+      onStartReachedInPromise.current["finally"](function () {
+        onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
+      });
+    } else {
+      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore()).then(callback)["catch"](onError);
+    }
+  };
 
   var handleScroll = function handleScroll(event) {
-    if (!channel || !initialScrollSet.current || !channelResyncScrollSet.current) {
+    if (!channel || !channelResyncScrollSet.current) {
       return;
     }
 
@@ -614,18 +524,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     }
 
     var isScrollAtBottom = offset <= 300;
-    var showScrollToBottomButton = !isScrollAtBottom || !(channel != null && channel.state.isUpToDate);
-    var shouldMarkRead = !threadList && offset <= 0 && (channel == null ? void 0 : channel.state.isUpToDate) && channel.countUnread() > 0;
+    var showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
+    var shouldMarkRead = !threadList && offset <= 0 && hasNoMoreRecentMessagesToLoad && channel.countUnread() > 0;
 
     if (shouldMarkRead) {
       markRead();
     }
 
-    if (showScrollToBottomButton && !scrollToBottomButtonVisible) {
-      setScrollToBottomButtonVisible(true);
-    } else if (!showScrollToBottomButton && scrollToBottomButtonVisible) {
-      setScrollToBottomButtonVisible(false);
-    }
+    setScrollToBottomButtonVisible(showScrollToBottomButton);
 
     if (onListScroll) {
       onListScroll(event);
@@ -633,22 +539,22 @@ var MessageListWithContext = function MessageListWithContext(props) {
   };
 
   var goToNewMessages = function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
+    var _ref3 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context.prev = _context.next) {
             case 0:
-              if (channel != null && channel.state.isUpToDate) {
-                _context3.next = 6;
+              if (hasNoMoreRecentMessagesToLoad) {
+                _context.next = 6;
                 break;
               }
 
-              resetPaginationTrackers();
-              _context3.next = 4;
+              resetPaginationTrackersRef.current();
+              _context.next = 4;
               return reloadChannel();
 
             case 4:
-              _context3.next = 7;
+              _context.next = 7;
               break;
 
             case 6:
@@ -667,40 +573,98 @@ var MessageListWithContext = function MessageListWithContext(props) {
 
             case 9:
             case "end":
-              return _context3.stop();
+              return _context.stop();
           }
         }
-      }, _callee3);
+      }, _callee);
     }));
 
     return function goToNewMessages() {
-      return _ref5.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
 
+  var onScrollToIndexFailedRef = (0, _react.useRef)(function (info) {
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        animated: false,
+        offset: info.averageItemLength * info.index
+      });
+      setTimeout(function () {
+        var _flatListRef$current2;
+
+        (_flatListRef$current2 = flatListRef.current) == null ? void 0 : _flatListRef$current2.scrollToIndex({
+          animated: false,
+          index: info.index,
+          viewPosition: 0.5
+        });
+
+        if (messageIdLastScrolledToRef.current) {
+          setTargetedMessage(messageIdLastScrolledToRef.current);
+        }
+      }, 150);
+    }
+  });
   var goToMessage = (0, _react.useCallback)(function (messageId) {
     var indexOfParentInMessageList = messageList.findIndex(function (message) {
       return (message == null ? void 0 : message.id) === messageId;
     });
 
-    if (indexOfParentInMessageList > -1) {
-      try {
-        if (flatListRef.current) {
-          flatListRef.current.scrollToIndex({
-            index: indexOfParentInMessageList,
-            viewPosition: 0.5
-          });
-          setTargetedMessage(messageId);
-          return;
-        }
-      } catch (_) {}
+    if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+      flatListRef.current.scrollToIndex({
+        animated: true,
+        index: indexOfParentInMessageList,
+        viewPosition: 0.5
+      });
+      messageIdLastScrolledToRef.current = messageId;
+      setTargetedMessage(messageId);
+      return;
     }
 
-    loadChannelAtMessage({
+    messageIdToScrollToRef.current = messageId;
+    loadChannelAroundMessage({
       messageId: messageId
     });
-    resetPaginationTrackers();
-  }, [messageListLengthAfterUpdate]);
+    resetPaginationTrackersRef.current();
+  }, [messageList]);
+  (0, _react.useEffect)(function () {
+    if (scrollToDebounceTimeoutRef.current) clearTimeout(scrollToDebounceTimeoutRef.current);
+    scrollToDebounceTimeoutRef.current = setTimeout(function () {
+      var messageIdToScroll = messageIdToScrollToRef.current;
+
+      if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+        for (var index = messageList.length - 1; index >= 0; index--) {
+          if (isUnreadMessageRef.current(messageList[index], channelLastReadRef.current)) {
+            messageIdToScroll = messageList[index].id;
+            break;
+          }
+        }
+      } else if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
+        messageIdToScroll = targetedMessage;
+      }
+
+      if (!messageIdToScroll) return;
+      var indexOfParentInMessageList = messageList.findIndex(function (message) {
+        return (message == null ? void 0 : message.id) === messageIdToScroll;
+      });
+
+      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          animated: false,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5
+        });
+        messageIdToScrollToRef.current = undefined;
+        messageIdLastScrolledToRef.current = messageIdToScroll;
+
+        if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+          initialScrollSet.current = true;
+        } else {
+          setTargetedMessage(messageIdToScroll);
+        }
+      }
+    }, 150);
+  }, [messageList, targetedMessage, initialScrollToFirstUnreadMessage]);
   var messagesWithImages = legacyImageViewerSwipeBehaviour && messageList.filter(function (message) {
     var isMessageTypeDeleted = message.type === 'deleted';
 
@@ -760,7 +724,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 888,
+        lineNumber: 942,
         columnNumber: 5
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
@@ -768,7 +732,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 889,
+        lineNumber: 943,
         columnNumber: 7
       }
     }));
@@ -782,7 +746,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 897,
+        lineNumber: 951,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -790,7 +754,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 898,
+        lineNumber: 952,
         columnNumber: 9
       }
     }));
@@ -804,13 +768,13 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 904,
+      lineNumber: 958,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
     contentContainerStyle: [styles.contentContainer, contentContainer],
     data: messageList,
-    extraData: disabled || !(channel != null && channel.state.isUpToDate),
+    extraData: disabled || !hasNoMoreRecentMessagesToLoad,
     inverted: inverted,
     keyboardShouldPersistTaps: "handled",
     keyExtractor: keyExtractor,
@@ -821,9 +785,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
       autoscrollToTopThreshold: autoscrollToTop ? 10 : undefined,
       minIndexForVisible: 1
     },
+    maxToRenderPerBatch: 30,
     onScroll: handleScroll,
     onScrollBeginDrag: onScrollBeginDrag,
     onScrollEndDrag: onScrollEndDrag,
+    onScrollToIndexFailed: onScrollToIndexFailedRef.current,
     onTouchEnd: dismissImagePicker,
     onViewableItemsChanged: onViewableItemsChanged.current,
     ref: refCallback,
@@ -836,7 +802,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 908,
+      lineNumber: 962,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -844,7 +810,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 938,
+      lineNumber: 994,
       columnNumber: 11
     }
   }, stickyHeaderDateToRender && (StickyHeader ? _react["default"].createElement(StickyHeader, {
@@ -852,7 +818,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 941,
+      lineNumber: 997,
       columnNumber: 17
     }
   }) : messageListLengthAfterUpdate ? _react["default"].createElement(DateHeader, {
@@ -860,21 +826,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 943,
+      lineNumber: 999,
       columnNumber: 17
     }
   }) : null)), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 947,
+      lineNumber: 1003,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 948,
+      lineNumber: 1004,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -884,14 +850,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 951,
+      lineNumber: 1007,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 958,
+      lineNumber: 1014,
       columnNumber: 7
     }
   }));
@@ -911,7 +877,7 @@ var MessageList = function MessageList(props) {
       error = _useChannelContext.error,
       hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
       isChannelActive = _useChannelContext.isChannelActive,
-      loadChannelAtMessage = _useChannelContext.loadChannelAtMessage,
+      loadChannelAroundMessage = _useChannelContext.loadChannelAroundMessage,
       loading = _useChannelContext.loading,
       LoadingIndicator = _useChannelContext.LoadingIndicator,
       markRead = _useChannelContext.markRead,
@@ -945,6 +911,7 @@ var MessageList = function MessageList(props) {
       TypingIndicatorContainer = _useMessagesContext.TypingIndicatorContainer;
 
   var _usePaginatedMessageL = (0, _PaginatedMessageListContext.usePaginatedMessageListContext)(),
+      hasNoMoreRecentMessagesToLoad = _usePaginatedMessageL.hasNoMoreRecentMessagesToLoad,
       loadMore = _usePaginatedMessageL.loadMore,
       loadMoreRecent = _usePaginatedMessageL.loadMoreRecent;
 
@@ -971,13 +938,14 @@ var MessageList = function MessageList(props) {
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     error: error,
     FlatList: FlatList,
+    hasNoMoreRecentMessagesToLoad: hasNoMoreRecentMessagesToLoad,
     hideStickyDateHeader: hideStickyDateHeader,
     initialScrollToFirstUnreadMessage: initialScrollToFirstUnreadMessage,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
     isListActive: isChannelActive,
     legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
-    loadChannelAtMessage: loadChannelAtMessage,
+    loadChannelAroundMessage: loadChannelAroundMessage,
     loading: loading,
     LoadingIndicator: LoadingIndicator,
     loadMore: loadMore,
@@ -1008,7 +976,7 @@ var MessageList = function MessageList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1016,
+      lineNumber: 1073,
       columnNumber: 5
     }
   }));