stream-chat-react-native-core 8.13.12 → 8.13.14

package/src/components/Channel/Channel.tsx

@@ -834,6 +834,18 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     channel,
   });
 
+  const shouldLoadInitialChannelAtFirstUnreadMessage = useStableCallback((unreadCount?: number) => {
+    if (messageId || !initialScrollToFirstUnreadMessage || !client.user) {
+      return false;
+    }
+
+    return (unreadCount ?? channel.countUnread()) > scrollToFirstUnreadThreshold;
+  });
+
+  const hasPendingInitialTargetLoad = useStableCallback(() => {
+    return !!messageId || shouldLoadInitialChannelAtFirstUnreadMessage();
+  });
+
   const { setMessages: copyMessagesStateFromChannel, viewabilityChangedCallback } =
     usePrunableMessageList({ maximumMessageLimit, setMessages: rawCopyMessagesStateFromChannel });
 
@@ -960,6 +972,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     const initChannel = async () => {
       setLastRead(new Date());
       const unreadCount = channel.countUnread();
+      const shouldLoadAtFirstUnread = shouldLoadInitialChannelAtFirstUnreadMessage(unreadCount);
       if (!channel || !shouldSyncChannel) {
         return;
       }
@@ -989,13 +1002,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
 
       if (messageId) {
         await loadChannelAroundMessage({ messageId, setTargetedMessage });
-      } else if (
-        initialScrollToFirstUnreadMessage &&
-        client.user &&
-        unreadCount > scrollToFirstUnreadThreshold
-      ) {
+      } else if (shouldLoadAtFirstUnread) {
+        const clientUserId = client.user?.id;
+        if (!clientUserId) {
+          return;
+        }
+
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { user, ...ownReadState } = channel.state.read[client.user.id];
+        const { user, ...ownReadState } = channel.state.read[clientUserId];
 
         await loadChannelAtFirstUnreadMessage({
           channelUnreadState: ownReadState,
@@ -1788,6 +1802,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     enableMessageGroupingByUser,
     enforceUniqueReaction,
     error,
+    hasPendingInitialTargetLoad,
     hideDateSeparators,
     hideStickyDateHeader,
     highlightedMessageId,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -31,6 +31,7 @@ export const useCreateChannelContext = ({
   setChannelUnreadState,
   setLastRead,
   setTargetedMessage,
+  hasPendingInitialTargetLoad,
   StickyHeader,
   targetedMessage,
   threadList,
@@ -58,6 +59,7 @@ export const useCreateChannelContext = ({
       enableMessageGroupingByUser,
       enforceUniqueReaction,
       error,
+      hasPendingInitialTargetLoad,
       hideDateSeparators,
       hideStickyDateHeader,
       highlightedMessageId,

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { Image, Platform } from 'react-native';
 
-import { Channel, OfflineDBState, SdkIdentifier } from 'stream-chat';
+import { Channel, OfflineDBState } from 'stream-chat';
 
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
@@ -181,10 +181,9 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
 
   useEffect(() => {
     if (client) {
-      const sdkName = (((NativeHandlers.SDK
-        ? NativeHandlers.SDK.replace('stream-chat-', '')
-        : 'react-native') as 'react-native' | 'expo') +
-        `-${Platform.OS as 'ios' | 'android'}`) as SdkIdentifier['name'];
+      const sdkName = (
+        NativeHandlers.SDK ? NativeHandlers.SDK.replace('stream-chat-', '') : 'react-native'
+      ) as 'react-native' | 'expo';
       client.sdkIdentifier = {
         name: sdkName,
         version,

package/src/components/MessageList/MessageFlashList.tsx

@@ -119,6 +119,7 @@ type MessageFlashListPropsWithContext = Pick<
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
+    | 'hasPendingInitialTargetLoad'
     | 'StickyHeader'
     | 'targetedMessage'
     | 'threadList'
@@ -298,6 +299,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     setMessages,
     setSelectedPicker,
     setTargetedMessage,
+    hasPendingInitialTargetLoad,
     StickyHeader,
     targetedMessage,
     thread,
@@ -389,11 +391,15 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
   useEffect(() => {
     if (autoscrollToRecent && flashListRef.current) {
+      if (hasPendingInitialTargetLoad?.()) {
+        return;
+      }
+
       flashListRef.current.scrollToEnd({
         animated: true,
       });
     }
-  }, [autoscrollToRecent]);
+  }, [autoscrollToRecent, hasPendingInitialTargetLoad]);
 
   const maintainVisibleContentPosition = useMemo(() => {
     return {
@@ -409,18 +415,6 @@ 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
@@ -441,13 +435,29 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       scrollToDebounceTimeoutRef.current = setTimeout(() => {
         clearTimeout(scrollToDebounceTimeoutRef.current);
 
-        // now scroll to it
-        flashListRef.current?.scrollToIndex({
-          animated: true,
-          index: indexOfParentInMessageList,
-          viewPosition: 0.5,
+        const scrollToIndex = async () => {
+          const list = flashListRef.current;
+
+          if (!list) {
+            return false;
+          }
+
+          await list.scrollToIndex({
+            animated: true,
+            index: indexOfParentInMessageList,
+            viewPosition: 0.5,
+          });
+
+          return true;
+        };
+
+        requestAnimationFrame(async () => {
+          await scrollToIndex();
+          requestAnimationFrame(async () => {
+            await scrollToIndex();
+            setTargetedMessage(undefined);
+          });
         });
-        setTargetedMessage(undefined);
       }, WAIT_FOR_SCROLL_TIMEOUT);
     }
   }, [loadChannelAroundMessage, processedMessageList, setTargetedMessage, targetedMessage]);
@@ -457,8 +467,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       (message) => message?.id === messageId,
     );
 
-    indexToScrollToRef.current = indexOfParentInMessageList;
-
     try {
       if (indexOfParentInMessageList === -1) {
         clearTimeout(scrollToDebounceTimeoutRef.current);
@@ -530,7 +538,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       setScrollToBottomButtonVisible(true);
       return;
     } else {
-      indexToScrollToRef.current = undefined;
       setAutoscrollToRecent(true);
     }
     const latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
@@ -1072,9 +1079,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             data={processedMessageList}
             drawDistance={800}
             getItemType={getItemTypeInternal}
-            initialScrollIndex={
-              indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current
-            }
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
             ListFooterComponent={FooterComponent}
@@ -1151,6 +1155,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
+    hasPendingInitialTargetLoad,
     StickyHeader,
     targetedMessage,
     threadList,
@@ -1192,6 +1197,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         enableMessageGroupingByUser,
         error,
         FlatList,
+        hasPendingInitialTargetLoad,
         hideStickyDateHeader,
         highlightedMessageId,
         InlineDateSeparator,

package/src/contexts/channelContext/ChannelContext.tsx

@@ -130,6 +130,12 @@ export type ChannelContextValue = {
   setChannelUnreadState: (data: ChannelUnreadStateStoreType['channelUnreadState']) => void;
   setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setTargetedMessage: (messageId?: string) => void;
+  /**
+   * Returns true when Channel is about to load an initial targeted message.
+   *
+   * @internal
+   */
+  hasPendingInitialTargetLoad?: () => boolean;
   /**
    * Abort controller for cancelling async requests made for uploading images/files
    * Its a map of filename and AbortController

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "8.13.12"
+  "version": "8.13.14"
 }