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

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';
@@ -327,8 +329,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 +339,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         />
       );
     },
-    [processedMessageListRef],
+    [processedMessageList],
   );
 
   const messageListLengthBeforeUpdate = useRef(0);
@@ -1126,6 +1128,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 +1208,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           */
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             maxToRenderPerBatch={30}
+            onContentSizeChange={onContentSizeChange}
+            onLayout={onLayout}
             onMomentumScrollEnd={onUserScrollEvent}
             onScroll={handleScroll}
             onScrollBeginDrag={onScrollBeginDrag}

package/src/version.json

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