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

package/src/components/MessageList/MessageList.tsx

@@ -112,7 +112,7 @@ type MessageListPropsWithContext<
     | 'disabled'
     | 'EmptyStateIndicator'
     | 'hideStickyDateHeader'
-    | 'loadChannelAtMessage'
+    | 'loadChannelAroundMessage'
     | 'loading'
     | 'LoadingIndicator'
     | 'markRead'
@@ -125,7 +125,10 @@ type MessageListPropsWithContext<
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
-  Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'loadMore' | 'loadMoreRecent'> &
+  Pick<
+    PaginatedMessageListContextValue<StreamChatGenerics>,
+    'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
+  > &
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -238,6 +241,7 @@ const MessageListWithContext = <
     EmptyStateIndicator,
     FlatList,
     FooterComponent = LoadingMoreIndicator,
+    hasNoMoreRecentMessagesToLoad,
     HeaderComponent = InlineLoadingMoreRecentIndicator,
     hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
@@ -246,7 +250,7 @@ const MessageListWithContext = <
     inverted = true,
     isListActive = false,
     legacyImageViewerSwipeBehaviour,
-    loadChannelAtMessage,
+    loadChannelAroundMessage,
     loading,
     LoadingIndicator,
     loadMore,
@@ -320,49 +324,49 @@ const MessageListWithContext = <
 
   const flatListRef = useRef<FlatListType<MessageType<StreamChatGenerics>> | null>(null);
 
-  const initialScrollSet = useRef<boolean>(false);
+  /**
+   * Flag to track if the initial scroll has been set
+   * If the prop `initialScrollToFirstUnreadMessage` was enabled, then we scroll to the unread msg and set it to true
+   * If not, the default offset of 0 for flatList means that it has been set already
+   */
+  const initialScrollSet = useRef<boolean>(!initialScrollToFirstUnreadMessage);
+
   const channelResyncScrollSet = useRef<boolean>(true);
 
+  /**
+   * The timeout id used to debounce our scrollToIndex calls on messageList updates
+   */
+  const scrollToDebounceTimeoutRef = useRef<NodeJS.Timeout>();
+
+  /**
+   * If a messageId was requested to scroll to but was unloaded,
+   * this flag keeps track of it to scroll to it after loading the message
+   */
+  const messageIdToScrollToRef = useRef<string>();
+  /**
+   * Last messageID that was scrolled to after loading a new message list,
+   * this flag keeps track of it so that we dont scroll to it again on target message set
+   */
+  const messageIdLastScrolledToRef = useRef<string>();
   const [hasMoved, setHasMoved] = useState(false);
   const [lastReceivedId, setLastReceivedId] = useState(getLastReceivedMessage(messageList)?.id);
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
 
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
   const stickyHeaderDateRef = useRef<Date | undefined>();
-  /**
-   * channel.lastRead throws error if the channel is not initialized.
-   */
-  const getLastReadSafely = () => (channel?.initialized ? channel.lastRead() : undefined);
 
-  const channelLastRead = useRef(getLastReadSafely());
+  const isUnreadMessageRef = useRef(
+    (
+      message: MessageType<StreamChatGenerics> | undefined,
+      lastRead?: ReturnType<StreamChannel<StreamChatGenerics>['lastRead']>,
+    ) => message && lastRead && message.created_at && lastRead < message.created_at,
+  );
 
-  const isUnreadMessage = (
-    message: MessageType<StreamChatGenerics> | undefined,
-    lastRead?: ReturnType<StreamChannel<StreamChatGenerics>['lastRead']>,
-  ) => message && lastRead && message.created_at && lastRead < message.created_at;
+  const channelLastReadRef = useRef(channel?.initialized ? channel.lastRead() : undefined);
 
-  /**
-   * If the top message in the list is unread, then we should scroll to top of the list.
-   * This is to handle the case when entire message list is unread.
-   * This scroll get set only on load, and never again.
-   */
-  const setInitialScrollIfNeeded = () => {
-    // If the feature is disabled or initial scroll position is already set.
-    if (!initialScrollToFirstUnreadMessage || initialScrollSet.current) {
-      initialScrollSet.current = true;
-      return;
-    }
-    if (isUnreadMessage(topMessageBeforeUpdate.current, channelLastRead.current)) {
-      if (flatListRef.current) {
-        flatListRef.current.scrollToEnd();
-      }
-      setTimeout(() => {
-        initialScrollSet.current = true;
-      }, 500);
-    } else if (!initialScrollSet.current) {
-      initialScrollSet.current = true;
-    }
-  };
+  useEffect(() => {
+    channelLastReadRef.current = channel?.initialized ? channel.lastRead() : undefined;
+  }, [channel]);
 
   const updateStickyHeaderDateIfNeeded = (viewableItems: ViewToken[]) => {
     if (viewableItems.length) {
@@ -409,14 +413,16 @@ const MessageListWithContext = <
       if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
-      setInitialScrollIfNeeded();
     },
   );
 
-  const resetPaginationTrackers = () => {
+  /**
+   * Resets the pagination trackers, doing so cancels currently scheduled loading more calls
+   */
+  const resetPaginationTrackersRef = useRef(() => {
     onStartReachedTracker.current = {};
     onEndReachedTracker.current = {};
-  };
+  });
 
   useEffect(() => {
     setScrollToBottomButtonVisible(false);
@@ -474,15 +480,13 @@ const MessageListWithContext = <
       ) {
         channelResyncScrollSet.current = false;
         setScrollToBottomButtonVisible(false);
-        resetPaginationTrackers();
-
-        setTimeout(
-          () =>
-            flatListRef.current?.scrollToOffset({
-              offset: 0,
-            }),
-          50,
-        );
+        resetPaginationTrackersRef.current();
+
+        setTimeout(() => {
+          flatListRef.current?.scrollToOffset({
+            offset: 0,
+          });
+        }, 50);
         setTimeout(() => {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
@@ -492,14 +496,14 @@ const MessageListWithContext = <
       }
     };
 
-    if (threadList || channel?.state.isUpToDate) {
+    if (threadList || hasNoMoreRecentMessagesToLoad) {
       scrollToBottomIfNeeded();
     } else if (!scrollToBottomButtonVisible) {
       setScrollToBottomButtonVisible(true);
     }
 
     if (
-      !channel?.state.isUpToDate &&
+      !hasNoMoreRecentMessagesToLoad &&
       flatListRef.current &&
       messageListLengthBeforeUpdate.current === 0 &&
       messageListLengthAfterUpdate < 10
@@ -511,26 +515,13 @@ const MessageListWithContext = <
       maybeCallOnStartReached(10);
     }
 
-    /**
-     * channelLastRead and topMessage are only used for setting initial scroll.
-     * So lets not set it if `initialScrollToFirstUnreadMessage` prop is false.
-     * OR if the scroll is already set.
-     */
-    if (initialScrollToFirstUnreadMessage && !initialScrollSet.current) {
-      channelLastRead.current = getLastReadSafely();
-    }
-
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
   }, [messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
 
   useEffect(() => {
-    if (!channel?.state.isUpToDate && autoscrollToTop) {
-      setAutoscrollToTop(false);
-    } else if (channel?.state.isUpToDate && !autoscrollToTop) {
-      setAutoscrollToTop(true);
-    }
-  }, [messageListLengthAfterUpdate]);
+    setAutoscrollToTop(hasNoMoreRecentMessagesToLoad);
+  }, [messageList, hasNoMoreRecentMessagesToLoad]);
 
   const renderItem = ({
     index,
@@ -539,15 +530,16 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || !channel.initialized) return null;
+    if (!channel || (!channel.initialized && !channel.staticState)) return null;
 
-    const lastRead = getLastReadSafely();
+    const lastRead = channel.lastRead();
 
     const lastMessage = messageList?.[index + 1];
 
-    const showUnreadUnderlay = !!isUnreadMessage(message, lastRead) && scrollToBottomButtonVisible;
+    const showUnreadUnderlay =
+      !!isUnreadMessageRef.current(message, lastRead) && scrollToBottomButtonVisible;
     const insertInlineUnreadIndicator =
-      showUnreadUnderlay && !isUnreadMessage(lastMessage, lastRead);
+      showUnreadUnderlay && !isUnreadMessageRef.current(lastMessage, lastRead);
 
     if (message.type === 'system') {
       return (
@@ -639,7 +631,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMoreRecent`, once per content length
    * 3. If the call to `loadMore` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnStartReached = async (limit?: number) => {
+  const maybeCallOnStartReached = (limit?: number) => {
     // If onStartReached has already been called for given data length, then ignore.
     if (messageList?.length && onStartReachedTracker.current[messageList.length]) {
       return;
@@ -664,8 +656,9 @@ const MessageListWithContext = <
 
     // If onEndReached is in progress, better to wait for it to finish for smooth UX
     if (onEndReachedInPromise.current) {
-      await onEndReachedInPromise.current;
-      onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
+      onEndReachedInPromise.current.finally(() => {
+        onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
+      });
     } else {
       onStartReachedInPromise.current = loadMoreRecent(limit).then(callback).catch(onError);
     }
@@ -676,7 +669,7 @@ const MessageListWithContext = <
    * 2. Ensures that we call `loadMore`, once per content length
    * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
-  const maybeCallOnEndReached = async () => {
+  const maybeCallOnEndReached = () => {
     // If onEndReached has already been called for given messageList length, then ignore.
     if (messageList?.length && onEndReachedTracker.current[messageList.length]) {
       return;
@@ -700,10 +693,11 @@ const MessageListWithContext = <
 
     // If onStartReached is in progress, better to wait for it to finish for smooth UX
     if (onStartReachedInPromise.current) {
-      await onStartReachedInPromise.current;
-      onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-        .then(callback)
-        .catch(onError);
+      onStartReachedInPromise.current.finally(() => {
+        onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
+          .then(callback)
+          .catch(onError);
+      });
     } else {
       onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
         .then(callback)
@@ -719,7 +713,7 @@ const MessageListWithContext = <
    *    |-> if channel is unread, call markRead().
    */
   const handleScroll: ScrollViewProps['onScroll'] = (event) => {
-    if (!channel || !initialScrollSet.current || !channelResyncScrollSet.current) {
+    if (!channel || !channelResyncScrollSet.current) {
       return;
     }
 
@@ -740,20 +734,16 @@ const MessageListWithContext = <
 
     // Show scrollToBottom button once scroll position goes beyond 300.
     const isScrollAtBottom = offset <= 300;
-    const showScrollToBottomButton = !isScrollAtBottom || !channel?.state.isUpToDate;
+    const showScrollToBottomButton = !isScrollAtBottom || !hasNoMoreRecentMessagesToLoad;
 
     const shouldMarkRead =
-      !threadList && offset <= 0 && channel?.state.isUpToDate && channel.countUnread() > 0;
+      !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);
@@ -761,9 +751,8 @@ const MessageListWithContext = <
   };
 
   const goToNewMessages = async () => {
-    if (!channel?.state.isUpToDate) {
-      resetPaginationTrackers();
-
+    if (!hasNoMoreRecentMessagesToLoad) {
+      resetPaginationTrackersRef.current();
       await reloadChannel();
     } else if (flatListRef.current) {
       flatListRef.current.scrollToOffset({
@@ -777,33 +766,98 @@ const MessageListWithContext = <
     }
   };
 
+  const onScrollToIndexFailedRef = useRef<
+    FlatListProps<MessageType<StreamChatGenerics>>['onScrollToIndexFailed']
+  >((info) => {
+    // We got a failure as we tried to scroll to an item that was outside the render length
+    if (flatListRef.current) {
+      // we dont know the actual size of all items but we can see the average, so scroll to the closest offset
+      flatListRef.current.scrollToOffset({
+        animated: false,
+        offset: info.averageItemLength * info.index,
+      });
+      // since we used only an average offset.. we wont go to the center of the item yet
+      // with a little delay to wait for scroll to offset to complete, we can then scroll to the index
+      setTimeout(() => {
+        flatListRef.current?.scrollToIndex({
+          animated: false,
+          index: info.index,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        if (messageIdLastScrolledToRef.current) {
+          setTargetedMessage(messageIdLastScrolledToRef.current);
+        }
+      }, 150);
+    }
+  });
+
   const goToMessage = useCallback(
     (messageId: string) => {
       const indexOfParentInMessageList = messageList.findIndex(
         (message) => message?.id === messageId,
       );
+      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          animated: true,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        // keep track of this messageId, so that we dont scroll to again in useEffect for targeted message change
+        messageIdLastScrolledToRef.current = messageId;
+        setTargetedMessage(messageId);
+        return;
+      }
+      messageIdToScrollToRef.current = messageId; // keep track of the id to scroll afterwards
+      loadChannelAroundMessage({ messageId }); // now try to load the message and whats around it
+      resetPaginationTrackersRef.current();
+    },
+    [messageList],
+  );
 
-      if (indexOfParentInMessageList > -1) {
-        try {
-          if (flatListRef.current) {
-            flatListRef.current.scrollToIndex({
-              index: indexOfParentInMessageList,
-              viewPosition: 0.5,
-            });
-            setTargetedMessage(messageId);
-
-            return;
+  /**
+   * Check if a messageId needs to be scrolled to after list loads, and scroll to it
+   * Note: This effect fires on every list change with a small debounce so that scrolling isnt abrupted by an immediate rerender
+   */
+  useEffect(() => {
+    if (scrollToDebounceTimeoutRef.current) clearTimeout(scrollToDebounceTimeoutRef.current);
+    scrollToDebounceTimeoutRef.current = setTimeout(() => {
+      // goToMessage method might have requested to scroll to a message
+      let messageIdToScroll: string | undefined = messageIdToScrollToRef.current;
+      if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+        // find the first unread message, if we have to initially scroll to an unread message
+        for (let index = messageList.length - 1; index >= 0; index--) {
+          if (isUnreadMessageRef.current(messageList[index], channelLastReadRef.current)) {
+            messageIdToScroll = messageList[index].id;
+            break;
           }
-        } catch (_) {
-          // do nothing;
         }
+      } else if (targetedMessage && messageIdLastScrolledToRef.current !== targetedMessage) {
+        // if some messageId was targeted but not scrolledTo yet
+        // we have scroll to there after loading completes
+        messageIdToScroll = targetedMessage;
       }
-
-      loadChannelAtMessage({ messageId });
-      resetPaginationTrackers();
-    },
-    [messageListLengthAfterUpdate],
-  );
+      if (!messageIdToScroll) return;
+      const indexOfParentInMessageList = messageList.findIndex(
+        (message) => message?.id === messageIdToScroll,
+      );
+      if (indexOfParentInMessageList !== -1 && flatListRef.current) {
+        flatListRef.current.scrollToIndex({
+          animated: false,
+          index: indexOfParentInMessageList,
+          viewPosition: 0.5, // try to place message in the center of the screen
+        });
+        // reset the messageId tracker to not scroll to that again
+        messageIdToScrollToRef.current = undefined;
+        // keep track of this messageId, so that we dont scroll to again for targeted message change
+        messageIdLastScrolledToRef.current = messageIdToScroll;
+        if (!initialScrollSet.current && initialScrollToFirstUnreadMessage) {
+          initialScrollSet.current = true;
+        } else {
+          setTargetedMessage(messageIdToScroll);
+        }
+      }
+    }, 150);
+  }, [messageList, targetedMessage, initialScrollToFirstUnreadMessage]);
 
   const messagesWithImages =
     legacyImageViewerSwipeBehaviour &&
@@ -909,7 +963,7 @@ const MessageListWithContext = <
         contentContainerStyle={[styles.contentContainer, contentContainer]}
         data={messageList}
         /** Disables the MessageList UI. Which means, message actions, reactions won't work. */
-        extraData={disabled || !channel?.state.isUpToDate}
+        extraData={disabled || !hasNoMoreRecentMessagesToLoad}
         inverted={inverted}
         keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
@@ -920,9 +974,11 @@ const MessageListWithContext = <
           autoscrollToTopThreshold: autoscrollToTop ? 10 : undefined,
           minIndexForVisible: 1,
         }}
+        maxToRenderPerBatch={30}
         onScroll={handleScroll}
         onScrollBeginDrag={onScrollBeginDrag}
         onScrollEndDrag={onScrollEndDrag}
+        onScrollToIndexFailed={onScrollToIndexFailedRef.current}
         onTouchEnd={dismissImagePicker}
         onViewableItemsChanged={onViewableItemsChanged.current}
         ref={refCallback}
@@ -978,7 +1034,7 @@ export const MessageList = <
     error,
     hideStickyDateHeader,
     isChannelActive,
-    loadChannelAtMessage,
+    loadChannelAroundMessage,
     loading,
     LoadingIndicator,
     markRead,
@@ -1007,7 +1063,8 @@ export const MessageList = <
     TypingIndicator,
     TypingIndicatorContainer,
   } = useMessagesContext<StreamChatGenerics>();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext<StreamChatGenerics>();
+  const { hasNoMoreRecentMessagesToLoad, loadMore, loadMoreRecent } =
+    usePaginatedMessageListContext<StreamChatGenerics>();
   const { overlay } = useOverlayContext();
   const { loadMoreThread, thread } = useThreadContext<StreamChatGenerics>();
   const { t, tDateTimeParser } = useTranslationContext();
@@ -1026,13 +1083,14 @@ export const MessageList = <
         enableMessageGroupingByUser,
         error,
         FlatList,
+        hasNoMoreRecentMessagesToLoad,
         hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
         isListActive: isChannelActive,
         legacyImageViewerSwipeBehaviour,
-        loadChannelAtMessage,
+        loadChannelAroundMessage,
         loading,
         LoadingIndicator,
         loadMore,

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -32,60 +32,63 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     }
   >
     <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "borderRadius": 2,
-            "height": 4,
-            "width": 4,
-          },
-          Object {
-            "marginRight": 2,
-          },
-          Object {},
-          Object {
+      animatedStyle={
+        Object {
+          "value": Object {
             "opacity": -0.3333333333333333,
           },
-        ]
+        }
+      }
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginRight": 2,
+          "opacity": -0.3333333333333333,
+          "width": 4,
+        }
       }
     />
     <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "borderRadius": 2,
-            "height": 4,
-            "width": 4,
-          },
-          Object {
-            "marginHorizontal": 2,
-          },
-          Object {},
-          Object {
+      animatedStyle={
+        Object {
+          "value": Object {
             "opacity": 0.3333333333333333,
           },
-        ]
+        }
+      }
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginHorizontal": 2,
+          "opacity": 0.3333333333333333,
+          "width": 4,
+        }
       }
     />
     <View
-      style={
-        Array [
-          Object {
-            "backgroundColor": "#000000",
-            "borderRadius": 2,
-            "height": 4,
-            "width": 4,
-          },
-          Object {
-            "marginLeft": 2,
-          },
-          Object {},
-          Object {
+      animatedStyle={
+        Object {
+          "value": Object {
             "opacity": 1,
           },
-        ]
+        }
+      }
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "borderRadius": 2,
+          "height": 4,
+          "marginLeft": 2,
+          "opacity": 1,
+          "width": 4,
+        }
       }
     />
   </View>

package/src/components/Reply/Reply.tsx

@@ -226,7 +226,7 @@ const ReplyWithContext = <
               : messageType === 'image'
               ? t('Photo')
               : messageType === 'video'
-              ? t('Video')
+              ? 'Video'
               : messageType === 'file'
               ? lastAttachment?.title || ''
               : '',

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -147,6 +147,7 @@ exports[`Thread should match thread snapshot 1`] = `
             "minIndexForVisible": 1,
           }
         }
+        maxToRenderPerBatch={30}
         onContentSizeChange={[Function]}
         onLayout={[Function]}
         onMomentumScrollBegin={[Function]}
@@ -154,6 +155,7 @@ exports[`Thread should match thread snapshot 1`] = `
         onScroll={[Function]}
         onScrollBeginDrag={[Function]}
         onScrollEndDrag={[Function]}
+        onScrollToIndexFailed={[Function]}
         onTouchEnd={[Function]}
         onViewableItemsChanged={[Function]}
         removeClippedSubviews={false}

package/src/contexts/channelContext/ChannelContext.tsx

@@ -71,6 +71,21 @@ export type ChannelContextValue<
    * Returns true if the current user is a owner
    */
   isOwner: boolean;
+  /**
+   * Loads channel around a specific message
+   *
+   * @param messageId If undefined, channel will be loaded at most recent message.
+   */
+  loadChannelAroundMessage: ({ messageId }: { messageId?: string }) => Promise<void>;
+  /**
+   * @deprecated use loadChannelAroundMessage instead
+   *
+   * Loads channel at specific message
+   *
+   * @param messageId If undefined, channel will be loaded at most recent message.
+   * @param before Number of message to query before messageId
+   * @param after Number of message to query after messageId
+   */
   loadChannelAtMessage: ({
     after,
     before,

package/src/contexts/chatContext/ChatContext.tsx

@@ -33,6 +33,7 @@ export type ChatContextValue<
    * */
   client: StreamChat<StreamChatGenerics>;
   connectionRecovering: boolean;
+  enableOfflineSupport: boolean;
   isOnline: boolean;
   mutedUsers: Mute<StreamChatGenerics>[];
   /**

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -167,9 +167,6 @@ export const OverlayProvider = <
     }
   }, [overlay]);
 
-  // Setup translators
-  useStreami18n({ i18nInstance, setTranslators });
-
   const attachmentPickerContext = {
     attachmentPickerBottomSheetHeight,
     attachmentSelectionBarHeight,

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -15,6 +15,10 @@ export type PaginatedMessageListContextValue<
    * Has more messages to load
    */
   hasMore: boolean;
+  /**
+   * Flag to indicate that are no more recent messages to be loaded
+   */
+  hasNoMoreRecentMessagesToLoad: boolean;
   /**
    * Is loading more messages
    */