Next Release

examples/E2ETestApp/package.json

@@ -23,7 +23,7 @@
     "react-native-svg": "^15.15.5",
     "react-native-teleport": "^1.2.2",
     "react-native-worklets": "^0.13.0",
-    "stream-chat": "^9.54.2",
+    "stream-chat": "^9.54.4",
     "stream-chat-react-native": "workspace:^"
   },
   "devDependencies": {

examples/ExpoChatGPTSample/package.json

@@ -29,7 +29,7 @@
     "react-native-svg": "15.15.5",
     "react-native-teleport": "^1.2.2",
     "react-native-worklets": "0.13.0",
-    "stream-chat": "^9.54.2",
+    "stream-chat": "^9.54.4",
     "stream-chat-expo": "workspace:^",
     "stream-chat-react-native-core": "workspace:^",
     "victory-native": "^42.0.1"

examples/ExpoMessaging/package.json

@@ -51,7 +51,7 @@
     "react-native-teleport": "^1.2.2",
     "react-native-web": "~0.21.4",
     "react-native-worklets": "0.13.0",
-    "stream-chat": "^9.54.2",
+    "stream-chat": "^9.54.4",
     "stream-chat-expo": "workspace:^",
     "stream-chat-react-native-core": "workspace:^"
   },

examples/SampleApp/package.json

@@ -64,7 +64,7 @@
     "react-native-teleport": "^1.2.2",
     "react-native-video": "^6.19.3",
     "react-native-worklets": "^0.13.0",
-    "stream-chat": "^9.54.2",
+    "stream-chat": "^9.54.4",
     "stream-chat-react-native": "workspace:^",
     "stream-chat-react-native-core": "workspace:^"
   },

package/package.json

@@ -84,7 +84,7 @@
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-syntax-highlighter": "^16.1.0",
-    "stream-chat": "^9.54.2",
+    "stream-chat": "^9.54.4",
     "use-sync-external-store": "^1.5.0",
     "zod": "^4.1.12"
   },

package/src/components/MessageList/MessageFlashList.tsx

@@ -4,6 +4,7 @@ import { LayoutChangeEvent, ScrollViewProps, StyleSheet, View, useColorScheme }
 import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
+import debounce from 'lodash/debounce';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -147,7 +148,7 @@ type MessageFlashListPropsWithContext = Pick<
   > &
   Pick<
     ThreadContextValue,
-    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
+    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadHasMore' | 'threadInstance'
   > & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
@@ -346,6 +347,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     hasPendingInitialTargetLoad,
     targetedMessage,
     thread,
+    threadHasMore,
     threadInstance,
     threadList = false,
   } = props;
@@ -835,6 +837,16 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    * once per content length.
    */
 
+  /**
+   * How many messages the list pages through are loaded: the thread's replies in a thread list, the
+   * channel's messages otherwise.
+   */
+  const getLoadedMessageCount = useStableCallback(() =>
+    threadList && thread?.id
+      ? (channel?.state.threads[thread.id]?.length ?? 0)
+      : (channel?.state.messages.length ?? 0),
+  );
+
   /**
    * 1. Makes a call to `loadMore` function, which queries more older messages.
    * 2. Ensures that we call `loadMore`, once per content length
@@ -853,8 +865,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       onStartReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onStartReachedInPromise.current = null;
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -869,12 +884,13 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
         ? loadMoreRecentThread({})
         : loadMoreRecent()
     )
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -885,17 +901,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    */
   const maybeCallOnEndReached = useStableCallback(async () => {
     // If onStartReached has already been called for given data length, then ignore.
-    if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
+    if (
+      (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) ||
+      (threadList && !threadHasMore)
+    ) {
       return;
     }
 
     if (processedMessageList?.length) {
       onEndReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onEndReachedInPromise.current = null;
-
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -911,8 +932,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       await onStartReachedInPromise.current;
     }
 
+    const loadedMessageCount = getLoadedMessageCount();
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -1100,6 +1122,31 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     currentListHeightRef.current = height;
   });
 
+  const debouncedPrefillMessages = useMemo(
+    () =>
+      debounce(
+        (viewportHeight: number, contentHeight: number) => {
+          if (viewportHeight >= contentHeight) {
+            maybeCallOnEndReached();
+          }
+        },
+        500,
+        {
+          leading: false,
+          trailing: true,
+        },
+      ),
+    [maybeCallOnEndReached],
+  );
+
+  const onContentSizeChange = useStableCallback((width: number, height: number) => {
+    if (additionalFlashListProps?.onContentSizeChange) {
+      additionalFlashListProps.onContentSizeChange(width, height);
+    }
+
+    debouncedPrefillMessages(currentListHeightRef.current ?? 0, height);
+  });
+
   const ListFooterComponent = useCallback(() => {
     if (FooterComponent) {
       return <FooterComponent />;
@@ -1172,6 +1219,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             {...additionalFlashListPropsExcludingStyle}
             accessibilityActions={messageListAccessibilityActions}
             onAccessibilityAction={messageListOnAccessibilityAction}
+            onContentSizeChange={onContentSizeChange}
           />
         </MessageListItemProvider>
       )}
@@ -1313,7 +1361,8 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
     useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
-  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
+  const { loadMoreRecentThread, loadMoreThread, thread, threadHasMore, threadInstance } =
+    useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
   const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
     useMessageInputContext();
@@ -1355,6 +1404,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         shouldShowUnreadUnderlay,
         targetedMessage,
         thread,
+        threadHasMore,
         threadInstance,
         threadList,
       }}

package/src/components/MessageList/MessageList.tsx

@@ -932,6 +932,16 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * once per content length.
    */
 
+  /**
+   * How many messages the list pages through are loaded: the thread's replies in a thread list, the
+   * channel's messages otherwise.
+   */
+  const getLoadedMessageCount = useStableCallback(() =>
+    threadList && thread?.id
+      ? (channel?.state.threads[thread.id]?.length ?? 0)
+      : (channel?.state.messages.length ?? 0),
+  );
+
   /**
    * 1. Makes a call to `loadMoreRecent` function, which queries more recent messages.
    * 2. Ensures that we call `loadMoreRecent`, once per content length
@@ -950,9 +960,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       onStartReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onStartReachedInPromise.current = null;
-
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -967,12 +979,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
         ? loadMoreRecentThread({})
         : loadMoreRecent()
     )
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -995,8 +1008,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       onEndReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onEndReachedInPromise.current = null;
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -1011,8 +1027,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (onStartReachedInPromise.current) {
       await onStartReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 

package/src/components/MessageList/__tests__/MessageList.test.tsx

@@ -650,6 +650,57 @@ describe('MessageList pagination', () => {
     });
   });
 
+  it('tries loading older messages again after a load that loaded nothing', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+
+    // resolves without loading anything, as `loadMore` does when its request fails, e.g. offline
+    const loadMore = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMore });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    const scrollToEnd = () =>
+      act(() => {
+        fireEvent(getByTestId('message-flat-list'), 'momentumScrollEnd', {
+          nativeEvent: {
+            contentOffset: { y: 1900 },
+            contentSize: { height: 2000, width: 200 },
+            layoutMeasurement: { height: 400, width: 200 },
+          },
+        });
+      });
+
+    scrollToEnd();
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(1);
+    });
+
+    // released after the same 2 second backoff as a rejected load
+    await act(() => new Promise((resolve) => setTimeout(resolve, 2100)));
+    scrollToEnd();
+
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(2);
+    });
+  });
+
   it('should call load latest messages when the scroll to bottom button is pressed', async () => {
     const user1 = generateUser();
     const messages = Array.from({ length: 10 }, (_, i) =>