stream-chat-react-native-core 8.6.1 → 8.6.2-beta.1

package/src/components/MessageList/MessageFlashList.tsx

@@ -118,6 +118,7 @@ type MessageFlashListPropsWithContext = Pick<
     | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
+    | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
   Pick<ImageGalleryContextValue, 'setMessages'> &
@@ -200,6 +201,15 @@ type MessageFlashListPropsWithContext = Pick<
      * ```
      */
     setFlatListRef?: (ref: FlashListRef<LocalMessage> | null) => void;
+    /**
+     * If true, the message list will be used in a live-streaming scenario.
+     * This flag is used to make sure that the auto scroll behaves well, if multiple messages are received.
+     *
+     * This flag is experimental and is subject to change. Please test thoroughly before using it.
+     *
+     * @experimental
+     */
+    isLiveStreaming?: boolean;
   };
 
 const WAIT_FOR_SCROLL_TIMEOUT = 0;
@@ -262,6 +272,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     InlineDateSeparator,
     InlineUnreadIndicator,
     isListActive = false,
+    isLiveStreaming = false,
     legacyImageViewerSwipeBehaviour,
     loadChannelAroundMessage,
     loading,
@@ -271,6 +282,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     loadMoreRecentThread,
     loadMoreThread,
     markRead,
+    maximumMessageLimit,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -303,7 +315,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   const [scrollToBottomButtonVisible, setScrollToBottomButtonVisible] = useState(false);
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const [stickyHeaderDate, setStickyHeaderDate] = useState<Date | undefined>();
-  const [autoScrollToRecent, setAutoScrollToRecent] = useState(false);
 
   const stickyHeaderDateRef = useRef<Date | undefined>(undefined);
   /**
@@ -337,12 +348,18 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [myMessageThemeString, theme],
   );
 
-  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
-    useMessageList({
-      isFlashList: true,
-      noGroupByUser,
-      threadList,
-    });
+  const {
+    dateSeparatorsRef,
+    messageGroupStylesRef,
+    processedMessageList,
+    rawMessageList,
+    viewabilityChangedCallback,
+  } = useMessageList({
+    isFlashList: true,
+    isLiveStreaming,
+    noGroupByUser,
+    threadList,
+  });
 
   /**
    * We need topMessage and channelLastRead values to set the initial scroll position.
@@ -366,13 +383,23 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     [processedMessageList],
   );
 
+  const [autoscrollToRecent, setAutoscrollToRecent] = useState(true);
+
+  useEffect(() => {
+    if (autoscrollToRecent && flashListRef.current) {
+      flashListRef.current.scrollToEnd({
+        animated: true,
+      });
+    }
+  }, [autoscrollToRecent]);
+
   const maintainVisibleContentPosition = useMemo(() => {
     return {
       animateAutoscrollToBottom: true,
-      autoscrollToBottomThreshold: autoScrollToRecent || threadList ? 10 : undefined,
+      autoscrollToBottomThreshold: autoscrollToRecent ? 1 : undefined,
       startRenderingFromBottom: true,
     };
-  }, [autoScrollToRecent, threadList]);
+  }, [autoscrollToRecent]);
 
   useEffect(() => {
     if (disabled) {
@@ -380,6 +407,18 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [disabled]);
 
+  const indexToScrollToRef = useRef<number | undefined>(undefined);
+
+  const initialIndexToScrollTo = useMemo(() => {
+    return targetedMessage
+      ? processedMessageList.findIndex((message) => message?.id === targetedMessage)
+      : -1;
+  }, [processedMessageList, targetedMessage]);
+
+  useEffect(() => {
+    indexToScrollToRef.current = initialIndexToScrollTo;
+  }, [initialIndexToScrollTo]);
+
   /**
    * 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
@@ -415,28 +454,15 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     const indexOfParentInMessageList = processedMessageList.findIndex(
       (message) => message?.id === messageId,
     );
-    if (indexOfParentInMessageList !== -1) {
-      flashListRef.current?.scrollToIndex({
-        animated: true,
-        index: indexOfParentInMessageList,
-        viewPosition: 0.5,
-      });
-      setTargetedMessage(messageId);
-      return;
-    }
+
+    indexToScrollToRef.current = indexOfParentInMessageList;
+
     try {
       if (indexOfParentInMessageList === -1) {
         clearTimeout(scrollToDebounceTimeoutRef.current);
-        await loadChannelAroundMessage({ messageId });
+        await loadChannelAroundMessage({ messageId, setTargetedMessage });
+      } else {
         setTargetedMessage(messageId);
-
-        // now scroll to it with animated=true
-        flashListRef.current?.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5, // try to place message in the center of the screen
-        });
-        return;
       }
     } catch (e) {
       console.warn('Error while scrolling to message', e);
@@ -471,25 +497,23 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         setScrollToBottomButtonVisible(false);
         resetPaginationTrackersRef.current();
 
-        setAutoScrollToRecent(true);
         setTimeout(() => {
           channelResyncScrollSet.current = true;
           if (channel.countUnread() > 0) {
             markRead();
           }
-          setAutoScrollToRecent(false);
         }, WAIT_FOR_SCROLL_TIMEOUT);
       }
     };
 
-    if (isMessageRemovedFromMessageList) {
+    if (isMessageRemovedFromMessageList && !maximumMessageLimit) {
       scrollToBottomIfNeeded();
     }
 
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
+  }, [messageListLengthAfterUpdate, topMessageAfterUpdate?.id, maximumMessageLimit]);
 
   useEffect(() => {
     if (!processedMessageList.length) {
@@ -500,16 +524,18 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     if (notLatestSet) {
       latestNonCurrentMessageBeforeUpdateRef.current =
         channel.state.latestMessages[channel.state.latestMessages.length - 1];
-      setAutoScrollToRecent(false);
+      setAutoscrollToRecent(false);
       setScrollToBottomButtonVisible(true);
       return;
+    } else {
+      indexToScrollToRef.current = undefined;
+      setAutoscrollToRecent(true);
     }
     const latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
     latestNonCurrentMessageBeforeUpdateRef.current = undefined;
 
     const latestCurrentMessageAfterUpdate = processedMessageList[processedMessageList.length - 1];
     if (!latestCurrentMessageAfterUpdate) {
-      setAutoScrollToRecent(true);
       return;
     }
     const didMergeMessageSetsWithNoUpdates =
@@ -527,28 +553,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     }
   }, [channel, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef, threadList]);
 
-  /**
-   * Effect to scroll to the bottom of the message list when a new message is received if the scroll to bottom button is not visible.
-   */
-  useEffect(() => {
-    const handleEvent = (event: Event) => {
-      if (event.message?.user?.id !== client.userID) {
-        if (!scrollToBottomButtonVisible) {
-          flashListRef.current?.scrollToEnd({
-            animated: true,
-          });
-        } else {
-          setAutoScrollToRecent(false);
-        }
-      }
-    };
-    const listener: ReturnType<typeof channel.on> = channel.on('message.new', handleEvent);
-
-    return () => {
-      listener?.unsubscribe();
-    };
-  }, [channel, client.userID, scrollToBottomButtonVisible]);
-
   /**
    * Effect to mark the channel as read when the user scrolls to the bottom of the message list.
    */
@@ -695,6 +699,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     if (!viewableItems) {
       return;
     }
+    viewabilityChangedCallback({ inverted: false, viewableItems });
     if (!hideStickyDateHeader) {
       updateStickyHeaderDateIfNeeded(viewableItems);
     }
@@ -1074,23 +1079,15 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   }
 
   const flatListStyle = useMemo(
-    () => ({ ...styles.listContainer, ...listContainer, ...additionalFlashListProps?.style }),
+    () => [styles.listContainer, listContainer, additionalFlashListProps?.style],
     [additionalFlashListProps?.style, listContainer],
   );
 
   const flatListContentContainerStyle = useMemo(
-    () => ({
-      ...styles.contentContainer,
-      ...contentContainer,
-    }),
+    () => [styles.contentContainer, contentContainer],
     [contentContainer],
   );
 
-  const getItemType = useStableCallback((item: LocalMessage) => {
-    const type = getItemTypeInternal(item);
-    return client.userID === item.user?.id ? `own-${type}` : type;
-  });
-
   const currentListHeightRef = useRef<number | undefined>(undefined);
 
   const onLayout = useStableCallback((e: LayoutChangeEvent) => {
@@ -1136,7 +1133,10 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           contentContainerStyle={flatListContentContainerStyle}
           data={processedMessageList}
           drawDistance={800}
-          getItemType={getItemType}
+          getItemType={getItemTypeInternal}
+          initialScrollIndex={
+            indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current
+          }
           keyboardShouldPersistTaps='handled'
           keyExtractor={keyExtractor}
           ListFooterComponent={FooterComponent}
@@ -1150,6 +1150,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           onViewableItemsChanged={stableOnViewableItemsChanged}
           ref={refCallback}
           renderItem={renderItem}
+          scrollEventThrottle={isLiveStreaming ? 16 : undefined}
           showsVerticalScrollIndicator={false}
           style={flatListStyle}
           testID='message-flash-list'
@@ -1204,6 +1205,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     loading,
     LoadingIndicator,
     markRead,
+    maximumMessageLimit,
     NetworkDownIndicator,
     reloadChannel,
     scrollToFirstUnreadThreshold,
@@ -1263,6 +1265,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
+        maximumMessageLimit,
         Message,
         MessageSystem,
         myMessageTheme,

package/src/components/MessageList/MessageList.tsx

@@ -140,6 +140,7 @@ type MessageListPropsWithContext = Pick<
     | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
+    | 'maximumMessageLimit'
   > &
   Pick<ChatContextValue, 'client'> &
   Pick<ImageGalleryContextValue, 'setMessages'> &
@@ -275,6 +276,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     loadMoreRecentThread,
     loadMoreThread,
     markRead,
+    maximumMessageLimit,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -322,12 +324,17 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * NOTE: rawMessageList changes only when messages array state changes
    * processedMessageList changes on any state change
    */
-  const { dateSeparatorsRef, messageGroupStylesRef, processedMessageList, rawMessageList } =
-    useMessageList({
-      isLiveStreaming,
-      noGroupByUser,
-      threadList,
-    });
+  const {
+    dateSeparatorsRef,
+    messageGroupStylesRef,
+    processedMessageList,
+    rawMessageList,
+    viewabilityChangedCallback,
+  } = useMessageList({
+    isLiveStreaming,
+    noGroupByUser,
+    threadList,
+  });
   const messageListLengthBeforeUpdate = useRef(0);
   const messageListLengthAfterUpdate = processedMessageList.length;
 
@@ -348,10 +355,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const minIndexForVisible = Math.min(1, processedMessageList.length);
 
-  const autoscrollToTopThreshold = useMemo(
-    () => (isLiveStreaming ? 64 : autoscrollToRecent ? 10 : undefined),
-    [autoscrollToRecent, isLiveStreaming],
-  );
+  const autoscrollToTopThreshold = autoscrollToRecent ? (isLiveStreaming ? 300 : 10) : undefined;
 
   const maintainVisibleContentPosition = useMemo(
     () => ({
@@ -503,6 +507,8 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
   }: {
     viewableItems: ViewToken[] | undefined;
   }) => {
+    viewabilityChangedCallback({ inverted, viewableItems });
+
     if (!viewableItems) {
       return;
     }
@@ -632,13 +638,18 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     };
 
     if (threadList || isMessageRemovedFromMessageList) {
-      scrollToBottomIfNeeded();
+      if (maximumMessageLimit) {
+        // pruning has happened, reset the trackers
+        resetPaginationTrackersRef.current();
+      } else {
+        scrollToBottomIfNeeded();
+      }
     }
 
     messageListLengthBeforeUpdate.current = messageListLengthAfterUpdate;
     topMessageBeforeUpdate.current = topMessageAfterUpdate;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id]);
+  }, [threadList, messageListLengthAfterUpdate, topMessageAfterUpdate?.id, maximumMessageLimit]);
 
   useEffect(() => {
     if (threadList) {
@@ -673,7 +684,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       !didMergeMessageSetsWithNoUpdates ||
       processedMessageList.length - messageListLengthBeforeUpdate.current > 0;
 
-    setAutoscrollToRecent(shouldForceScrollToRecent);
+    // we don't want this behaviour while pruning, as it may scroll unnecessarily in
+    // certain scenarios
+    if ((maximumMessageLimit && shouldForceScrollToRecent) || !maximumMessageLimit) {
+      setAutoscrollToRecent(shouldForceScrollToRecent);
+    }
 
     if (!didMergeMessageSetsWithNoUpdates) {
       const shouldScrollToRecentOnNewOwnMessage = shouldScrollToRecentOnNewOwnMessageRef.current();
@@ -688,7 +703,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
         }, WAIT_FOR_SCROLL_TIMEOUT); // flatlist might take a bit to update, so a small delay is needed
       }
     }
-  }, [channel, threadList, processedMessageList, shouldScrollToRecentOnNewOwnMessageRef]);
+  }, [
+    channel,
+    threadList,
+    processedMessageList,
+    shouldScrollToRecentOnNewOwnMessageRef,
+    maximumMessageLimit,
+  ]);
 
   const goToMessage = useStableCallback(async (messageId: string) => {
     const indexOfParentInMessageList = processedMessageList.findIndex(
@@ -1288,6 +1309,7 @@ export const MessageList = (props: MessageListProps) => {
     loadChannelAroundMessage,
     loading,
     LoadingIndicator,
+    maximumMessageLimit,
     markRead,
     NetworkDownIndicator,
     reloadChannel,
@@ -1348,6 +1370,7 @@ export const MessageList = (props: MessageListProps) => {
         loadMoreRecentThread,
         loadMoreThread,
         markRead,
+        maximumMessageLimit,
         Message,
         MessageSystem,
         myMessageTheme,

package/src/components/MessageList/hooks/useMessageList.ts

@@ -56,7 +56,7 @@ export const useMessageList = (params: UseMessageListParams) => {
   const { hideDateSeparators, maxTimeBetweenGroupedMessages } = useChannelContext();
   const { deletedMessagesVisibilityType, getMessagesGroupStyles = getGroupStyles } =
     useMessagesContext();
-  const { messages } = usePaginatedMessageListContext();
+  const { messages, viewabilityChangedCallback } = usePaginatedMessageListContext();
   const { threadMessages } = useThreadContext();
   const messageList = threadList ? threadMessages : messages;
 
@@ -129,7 +129,8 @@ export const useMessageList = (params: UseMessageListParams) => {
       processedMessageList: data,
       /** Raw messages from the channel state */
       rawMessageList: messageList,
+      viewabilityChangedCallback,
     }),
-    [data, messageList],
+    [data, messageList, viewabilityChangedCallback],
   );
 };

package/src/contexts/channelContext/ChannelContext.tsx

@@ -147,6 +147,12 @@ export type ChannelContextValue = {
    * to still consider them grouped together
    */
   maxTimeBetweenGroupedMessages?: number;
+  /**
+   * The maximum number of messages that can be loaded into the state when new messages arrive.
+   * Any excess messages will be pruned from the back of the list (oldest first), unless we are
+   * currently near them within the viewport.
+   */
+  maximumMessageLimit?: number;
   /**
    * Custom UI component for sticky header of channel.
    *

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
+import { ViewabilityChangedCallbackInput } from '../../hooks/usePrunableMessageList';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -24,6 +25,10 @@ export type PaginatedMessageListContextValue = {
    * Messages from client state
    */
   messages: ChannelState['messages'];
+  /**
+   * A callback that is to be passed to onViewableItemsChanged in the underlying `MessageList`
+   */
+  viewabilityChangedCallback: (config: ViewabilityChangedCallbackInput) => void;
   /**
    * Has more messages to load
    */

package/src/hooks/usePrunableMessageList.ts

@@ -0,0 +1,79 @@
+import { useRef } from 'react';
+
+import { ViewToken } from 'react-native';
+
+import { Channel } from 'stream-chat';
+
+import { useStableCallback } from './useStableCallback';
+
+import { ChannelPropsWithContext } from '../components';
+
+export type VisibleRangeConfig = { first: number; last: number; inverted: boolean };
+export type ViewabilityChangedCallbackInput = {
+  viewableItems: ViewToken[] | undefined;
+  inverted: boolean;
+};
+
+// The number of messages from an edge we want to be viewing before we stop pruning
+const calculateSafeGap = (maximumMessages: number) => 0.2 * maximumMessages;
+
+const isNearEnd = ({
+  rangeConfig,
+  maximumMessageLimit,
+}: {
+  rangeConfig: VisibleRangeConfig;
+  maximumMessageLimit: number;
+}) => {
+  const { first, last, inverted } = rangeConfig;
+
+  const safeGap = calculateSafeGap(maximumMessageLimit);
+
+  if (!inverted) return first <= safeGap;
+
+  return last >= maximumMessageLimit - 1 - safeGap;
+};
+
+export function usePrunableMessageList({
+  // setter to update the array used by the List
+  setMessages: rawSetMessages,
+  maximumMessageLimit,
+}: {
+  setMessages: (channel: Channel) => void;
+} & Pick<ChannelPropsWithContext, 'maximumMessageLimit'>) {
+  // Track visible index range (index in `channel.messages`)
+  const visibleRangeConfigRef = useRef<VisibleRangeConfig>({ first: 0, inverted: true, last: -1 });
+
+  const viewabilityChangedCallback = useStableCallback(
+    ({ viewableItems, inverted = true }: ViewabilityChangedCallbackInput) => {
+      if (!viewableItems?.length || maximumMessageLimit == null) return;
+      let first = Infinity;
+      let last = -1;
+      for (const v of viewableItems) {
+        if (v.index == null) continue;
+        if (v.index < first) first = v.index;
+        if (v.index > last) last = v.index;
+      }
+      if (first !== Infinity) visibleRangeConfigRef.current = { first, inverted, last };
+    },
+  );
+
+  // Prune when length exceeds MAX, but only if the viewport is far from the back edge
+  const setMessages = useStableCallback((channel: Channel) => {
+    const rangeConfig = visibleRangeConfigRef.current;
+
+    if (
+      maximumMessageLimit == null ||
+      channel.state.messages.length <= maximumMessageLimit ||
+      isNearEnd({ maximumMessageLimit, rangeConfig })
+    ) {
+      rawSetMessages(channel);
+      return;
+    }
+
+    channel.state.pruneOldest(maximumMessageLimit);
+
+    rawSetMessages(channel);
+  });
+
+  return { setMessages, viewabilityChangedCallback };
+}

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.6.1"
+  "version": "8.6.2-beta.1"
 }