stream-chat-react-native-core 9.2.1 → 9.2.2-beta.2

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

@@ -27,6 +27,7 @@ export const useCreateChannelContext = ({
   setChannelUnreadState,
   setLastRead,
   setTargetedMessage,
+  hasPendingInitialTargetLoad,
   targetedMessage,
   threadList,
   uploadAbortControllerRef,
@@ -69,6 +70,7 @@ export const useCreateChannelContext = ({
       setChannelUnreadState,
       setLastRead,
       setTargetedMessage,
+      hasPendingInitialTargetLoad,
       targetedMessage,
       threadList,
       uploadAbortControllerRef,

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -656,7 +656,6 @@ const styles = StyleSheet.create({
   containerInner: {
     borderTopLeftRadius: components.messageBubbleRadiusGroupBottom,
     borderTopRightRadius: components.messageBubbleRadiusGroupBottom,
-    overflow: 'hidden',
   },
   contentBody: {
     flexShrink: 1,

package/src/components/MessageList/MessageFlashList.tsx

@@ -132,6 +132,7 @@ type MessageFlashListPropsWithContext = Pick<
     | 'scrollToFirstUnreadThreshold'
     | 'setChannelUnreadState'
     | 'setTargetedMessage'
+    | 'hasPendingInitialTargetLoad'
     | 'targetedMessage'
     | 'threadList'
     | 'maximumMessageLimit'
@@ -289,6 +290,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     setChannelUnreadState,
     setFlatListRef,
     setTargetedMessage,
+    hasPendingInitialTargetLoad,
     targetedMessage,
     thread,
     threadInstance,
@@ -388,11 +390,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 {
@@ -408,18 +414,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
@@ -440,13 +434,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({
+            index: indexOfParentInMessageList,
+            animated: true,
+            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]);
@@ -456,8 +466,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       (message) => message?.id === messageId,
     );
 
-    indexToScrollToRef.current = indexOfParentInMessageList;
-
     try {
       if (indexOfParentInMessageList === -1) {
         clearTimeout(scrollToDebounceTimeoutRef.current);
@@ -529,7 +537,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       setScrollToBottomButtonVisible(true);
       return;
     } else {
-      indexToScrollToRef.current = undefined;
       setAutoscrollToRecent(true);
     }
     const latestNonCurrentMessageBeforeUpdate = latestNonCurrentMessageBeforeUpdateRef.current;
@@ -1064,9 +1071,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             data={processedMessageList}
             drawDistance={800}
             getItemType={getItemTypeInternal}
-            initialScrollIndex={
-              indexToScrollToRef.current === -1 ? undefined : indexToScrollToRef.current
-            }
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
             ListFooterComponent={ListFooterComponent}
@@ -1203,6 +1207,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
     scrollToFirstUnreadThreshold,
     setChannelUnreadState,
     setTargetedMessage,
+    hasPendingInitialTargetLoad,
     targetedMessage,
     threadList,
   } = useChannelContext();
@@ -1246,6 +1251,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         scrollToFirstUnreadThreshold,
         setChannelUnreadState,
         setTargetedMessage,
+        hasPendingInitialTargetLoad,
         shouldShowUnreadUnderlay,
         targetedMessage,
         thread,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -506,7 +506,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                         {
                                           "borderTopLeftRadius": 20,
                                           "borderTopRightRadius": 20,
-                                          "overflow": "hidden",
                                         },
                                         {
                                           "backgroundColor": "#ebeef1",
@@ -849,7 +848,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                         {
                                           "borderTopLeftRadius": 20,
                                           "borderTopRightRadius": 20,
-                                          "overflow": "hidden",
                                         },
                                         {
                                           "backgroundColor": "#ebeef1",
@@ -1225,7 +1223,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                         {
                                           "borderTopLeftRadius": 20,
                                           "borderTopRightRadius": 20,
-                                          "overflow": "hidden",
                                         },
                                         {
                                           "backgroundColor": "#ebeef1",
@@ -1559,7 +1556,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                       {
                                         "borderTopLeftRadius": 20,
                                         "borderTopRightRadius": 20,
-                                        "overflow": "hidden",
                                       },
                                       {
                                         "backgroundColor": "#ebeef1",

package/src/contexts/channelContext/ChannelContext.tsx

@@ -112,6 +112,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": "9.2.1"
+  "version": "9.2.2-beta.2"
 }