stream-chat-react-native-core 8.12.4 → 8.13.1

package/src/components/Channel/__tests__/useMessageListPagination.test.js

@@ -161,8 +161,8 @@ describe('useMessageListPagination', () => {
 
       await waitFor(() => {
         expect(queryFn).toHaveBeenCalledWith({
-          messages: { id_lt: messages[0].id, limit: 20 },
-          watchers: { limit: 20 },
+          messages: { id_lt: messages[0].id },
+          watchers: {},
         });
         expect(result.current.state.hasMore).toBe(true);
         expect(result.current.state.messages.length).toBe(40);
@@ -252,8 +252,8 @@ describe('useMessageListPagination', () => {
 
       await waitFor(() => {
         expect(queryFn).toHaveBeenCalledWith({
-          messages: { id_gt: messages[messages.length - 1].id, limit: 10 },
-          watchers: { limit: 10 },
+          messages: { id_gt: messages[messages.length - 1].id },
+          watchers: {},
         });
         expect(result.current.state.hasMore).toBe(true);
         expect(result.current.state.messages.length).toBe(40);

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -74,7 +74,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
   /**
    * This function loads more messages before the first message in current channel state.
    */
-  const loadMore = useStableCallback(async (limit: number = 20) => {
+  const loadMore = useStableCallback(async (limit?: number) => {
     if (!channel.state.messagePagination.hasPrev) {
       return;
     }
@@ -103,7 +103,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
   /**
    * This function loads more messages after the most recent message in current channel state.
    */
-  const loadMoreRecent = useStableCallback(async (limit: number = 10) => {
+  const loadMoreRecent = useStableCallback(async (limit?: number) => {
     if (!channel.state.messagePagination.hasNext) {
       return;
     }

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -13,8 +13,6 @@ import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useStateStore } from '../../../hooks';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
-
 type Parameters = {
   channelManager: ChannelManager;
   enableOfflineSupport: boolean;
@@ -24,10 +22,6 @@ type Parameters = {
   sort: ChannelSort;
 };
 
-const DEFAULT_OPTIONS = {
-  message_limit: 10,
-};
-
 const RETRY_INTERVAL_IN_MS = 5000;
 
 type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
@@ -46,7 +40,7 @@ export const usePaginatedChannels = ({
   channelManager,
   enableOfflineSupport,
   filters = {},
-  options = DEFAULT_OPTIONS,
+  options = {},
   sort = {},
 }: Parameters) => {
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
@@ -99,7 +93,6 @@ export const usePaginatedChannels = ({
     setActiveQueryType(queryType);
 
     const newOptions = {
-      limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
       offset: 0,
       ...options,
     };

package/src/components/MessageList/MessageList.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   FlatListProps,
   FlatList as FlatListType,
+  LayoutChangeEvent,
   ScrollViewProps,
   StyleSheet,
   View,
@@ -9,6 +10,7 @@ import {
   ViewToken,
 } from 'react-native';
 
+import debounce from 'lodash/debounce';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -148,7 +150,7 @@ type MessageListPropsWithContext = Pick<
   > &
   Pick<ChatContextValue, 'client'> &
   Pick<ImageGalleryContextValue, 'setMessages'> &
-  Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent'> &
+  Pick<PaginatedMessageListContextValue, 'loadMore' | 'loadMoreRecent' | 'hasMore'> &
   Pick<
     MessagesContextValue,
     | 'DateHeader'
@@ -163,7 +165,7 @@ type MessageListPropsWithContext = Pick<
   > &
   Pick<
     ThreadContextValue,
-    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
+    'loadMoreRecentThread' | 'loadMoreThread' | 'threadHasMore' | 'thread' | 'threadInstance'
   > & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
@@ -295,6 +297,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
+    hasMore,
+    threadHasMore,
   } = props;
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
@@ -327,8 +331,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const renderItem = useCallback(
     ({ item: message, index }: { item: LocalMessage; index: number }) => {
-      const previousMessage = processedMessageListRef.current[index + 1];
-      const nextMessage = processedMessageListRef.current[index - 1];
+      const previousMessage = processedMessageList[index + 1];
+      const nextMessage = processedMessageList[index - 1];
       return (
         <MessageWrapper
           message={message}
@@ -337,7 +341,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         />
       );
     },
-    [processedMessageListRef],
+    [processedMessageList],
   );
 
   const messageListLengthBeforeUpdate = useRef(0);
@@ -856,8 +860,12 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * 3. If the call to `loadMoreRecent` is in progress, we wait for it to finish to make sure scroll doesn't jump.
    */
   const maybeCallOnEndReached = useStableCallback(async () => {
+    const shouldQuery = (threadList && threadHasMore) || (!threadList && hasMore);
     // If onEndReached has already been called for given messageList length, then ignore.
-    if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
+    if (
+      (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) ||
+      !shouldQuery
+    ) {
       return;
     }
 
@@ -1126,6 +1134,44 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     [additionalFlatListProps?.contentContainerStyle, contentContainer],
   );
 
+  const viewportHeightRef = useRef<number>(undefined);
+
+  /**
+   * This debounced callback makes sure that if the current number of messages do not
+   * fill our screen, we load more messages continuously until we cover enough ground.
+   */
+  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 (additionalFlatListProps?.onContentSizeChange) {
+      additionalFlatListProps.onContentSizeChange(width, height);
+    }
+
+    debouncedPrefillMessages(viewportHeightRef.current ?? 0, height);
+  });
+
+  const onLayout = useStableCallback((event: LayoutChangeEvent) => {
+    if (additionalFlatListProps?.onLayout) {
+      additionalFlatListProps.onLayout(event);
+    }
+    viewportHeightRef.current = event.nativeEvent.layout.height;
+  });
+
   if (!FlatList) {
     return null;
   }
@@ -1168,6 +1214,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           */
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             maxToRenderPerBatch={30}
+            onContentSizeChange={onContentSizeChange}
+            onLayout={onLayout}
             onMomentumScrollEnd={onUserScrollEvent}
             onScroll={handleScroll}
             onScrollBeginDrag={onScrollBeginDrag}
@@ -1259,8 +1307,9 @@ export const MessageList = (props: MessageListProps) => {
     TypingIndicatorContainer,
     UnreadMessagesNotification,
   } = useMessagesContext();
-  const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
-  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
+  const { loadMore, loadMoreRecent, hasMore } = usePaginatedMessageListContext();
+  const { loadMoreRecentThread, loadMoreThread, threadHasMore, thread, threadInstance } =
+    useThreadContext();
 
   return (
     <MessageListWithContext
@@ -1277,6 +1326,7 @@ export const MessageList = (props: MessageListProps) => {
         enableMessageGroupingByUser,
         error,
         FlatList,
+        hasMore,
         hideStickyDateHeader,
         highlightedMessageId,
         InlineDateSeparator,
@@ -1309,6 +1359,7 @@ export const MessageList = (props: MessageListProps) => {
         StickyHeader,
         targetedMessage,
         thread,
+        threadHasMore,
         threadInstance,
         threadList,
         TypingIndicator,

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.12.4"
+  "version": "8.13.1"
 }