Merge branch 'develop' of github.com:GetStream/stream-chat-react-native into V8

Author: khushal87

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -39,7 +39,9 @@ type FilesToDisplayType = Attachment & {
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
   const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;
-  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);
+  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>(() =>
+    files.map((file) => ({ ...file, duration: file.duration || 0, paused: true, progress: 0 })),
+  );
 
   useEffect(() => {
     setFilesToDisplay(

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

@@ -282,7 +282,7 @@ export const usePaginatedChannels = ({
           // ready. I do not like providing a way to set the ready state, as it should be managed
           // in the LLC entirely. Once we move offline support to the LLC, we can remove this check
           // too as it'll be redundant.
-          pagination?.isLoading || (!channelListInitialized && channels.length === 0),
+          pagination?.isLoading || (!channelListInitialized && channels.length === 0 && !error),
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',

package/src/components/Message/Message.tsx

@@ -135,9 +135,12 @@ export type MessagePropsWithContext = Pick<
 > &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
   Partial<
-    Omit<MessageContextValue, 'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated'>
+    Omit<
+      MessageContextValue,
+      'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy'
+    >
   > &
-  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated'> &
+  Pick<MessageContextValue, 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy'> &
   Pick<
     MessagesContextValue,
     | 'sendReaction'
@@ -262,8 +265,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     t,
     threadList = false,
     updateMessage,
+    readBy,
   } = props;
-  const { read } = useChannelContext();
   const isMessageAIGenerated = messagesContext.isMessageAIGenerated;
   const isAIGenerated = useMemo(
     () => isMessageAIGenerated(message),
@@ -278,7 +281,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       screenPadding,
     },
   } = useTheme();
-  const readBy = useMemo(() => getReadState(message, read), [message, read]);
 
   const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
     await dismissKeyboard();
@@ -759,6 +761,7 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     message: prevMessage,
     messagesContext: prevMessagesContext,
     showUnreadUnderlay: prevShowUnreadUnderlay,
+    readBy: prevReadBy,
     t: prevT,
   } = prevProps;
   const {
@@ -771,9 +774,15 @@ const areEqual = (prevProps: MessagePropsWithContext, nextProps: MessagePropsWit
     message: nextMessage,
     messagesContext: nextMessagesContext,
     showUnreadUnderlay: nextShowUnreadUnderlay,
+    readBy: nextReadBy,
     t: nextT,
   } = nextProps;
 
+  const readByEqual = prevReadBy === nextReadBy;
+  if (!readByEqual) {
+    return false;
+  }
+
   const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
   if (!membersEqual) {
     return false;
@@ -925,12 +934,14 @@ export type MessageProps = Partial<
  * @example ./Message.md
  */
 export const Message = (props: MessageProps) => {
-  const { channel, enforceUniqueReaction, members } = useChannelContext();
+  const { message } = props;
+  const { channel, enforceUniqueReaction, members, read } = useChannelContext();
   const chatContext = useChatContext();
   const { dismissKeyboard } = useKeyboardContext();
   const messagesContext = useMessagesContext();
   const { openThread } = useThreadContext();
   const { t } = useTranslationContext();
+  const readBy = useMemo(() => getReadState(message, read), [message, read]);
 
   return (
     <MemoizedMessage
@@ -943,6 +954,7 @@ export const Message = (props: MessageProps) => {
         members,
         messagesContext,
         openThread,
+        readBy,
         t,
       }}
       {...props}

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -90,7 +90,16 @@ export type MessageSimplePropsWithContext = Pick<
     | 'reactionListPosition'
     | 'ReactionListTop'
     | 'setQuotedMessageState'
-  >;
+  > & {
+    /**
+     * Will determine whether the swipeable wrapper is always rendered for each
+     * message. If set to false, the animated wrapper will be rendered only when
+     * a swiping gesture is active and not otherwise.
+     * Since stateful components would lose their state if we remount them while
+     * an animation is happening, this should always be set to true in those instances.
+     */
+    shouldRenderSwipeableWrapper: boolean;
+  };
 
 const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   const [messageContentWidth, setMessageContentWidth] = useState(0);
@@ -123,6 +132,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     ReactionListTop,
     setQuotedMessageState,
     showMessageStatus,
+    shouldRenderSwipeableWrapper,
   } = props;
 
   const {
@@ -202,7 +212,9 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
   const translateX = useSharedValue(0);
   const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
   const isSwiping = useSharedValue<boolean>(false);
-  const [isBeingSwiped, setIsBeingSwiped] = useState<boolean>(false);
+  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(
+    shouldRenderSwipeableWrapper,
+  );
 
   const onSwipeToReply = useCallback(() => {
     clearQuotedMessageState();
@@ -233,7 +245,9 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
           if (isHorizontalPanning) {
             state.activate();
             isSwiping.value = true;
-            runOnJS(setIsBeingSwiped)(true);
+            if (!shouldRenderSwipeableWrapper) {
+              runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+            }
           } else {
             state.fail();
           }
@@ -253,6 +267,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
               runOnJS(triggerHaptic)('impactMedium');
             }
           }
+          isSwiping.value = false;
           translateX.value = withSpring(
             0,
             {
@@ -262,41 +277,44 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
               stiffness: 1,
             },
             () => {
-              isSwiping.value = false;
-              runOnJS(setIsBeingSwiped)(false);
+              if (!shouldRenderSwipeableWrapper) {
+                runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+              }
             },
           );
         }),
-    [isSwiping, messageSwipeToReplyHitSlop, onSwipeToReply, touchStart, translateX, triggerHaptic],
+    [
+      isSwiping,
+      messageSwipeToReplyHitSlop,
+      onSwipeToReply,
+      touchStart,
+      translateX,
+      triggerHaptic,
+      shouldRenderSwipeableWrapper,
+    ],
   );
 
   const messageBubbleAnimatedStyle = useAnimatedStyle(
-    () =>
-      isSwiping.value
-        ? {
-            transform: [{ translateX: translateX.value }],
-          }
-        : {},
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
     [],
   );
 
   const swipeContentAnimatedStyle = useAnimatedStyle(
-    () =>
-      isSwiping.value
-        ? {
-            opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
-            transform: [
-              {
-                translateX: interpolate(
-                  translateX.value,
-                  [0, THRESHOLD],
-                  [-THRESHOLD, 0],
-                  Extrapolation.CLAMP,
-                ),
-              },
-            ],
-          }
-        : {},
+    () => ({
+      opacity: interpolate(translateX.value, [0, THRESHOLD], [0, 1]),
+      transform: [
+        {
+          translateX: interpolate(
+            translateX.value,
+            [0, THRESHOLD],
+            [-THRESHOLD, 0],
+            Extrapolation.CLAMP,
+          ),
+        },
+      ],
+    }),
     [],
   );
 
@@ -332,7 +350,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     () => (
       <GestureDetector gesture={swipeGesture}>
         <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
-          {isBeingSwiped ? (
+          {shouldRenderAnimatedWrapper ? (
             <>
               <AnimatedWrapper
                 style={[
@@ -356,7 +374,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     [
       MessageSwipeContent,
       contentWrapper,
-      isBeingSwiped,
+      shouldRenderAnimatedWrapper,
       messageBubbleAnimatedStyle,
       messageSwipeToReplyHitSlop,
       renderMessageBubble,
@@ -592,6 +610,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     onlyEmojis,
     otherAttachments,
     showMessageStatus,
+    isMessageAIGenerated,
   } = useMessageContext();
   const {
     clearQuotedMessageState,
@@ -613,6 +632,11 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     ReactionListTop,
     setQuotedMessageState,
   } = useMessagesContext();
+  const isAIGenerated = useMemo(
+    () => isMessageAIGenerated(message),
+    [message, isMessageAIGenerated],
+  );
+  const shouldRenderSwipeableWrapper = (message?.attachments || []).length > 0 || isAIGenerated;
 
   return (
     <MemoizedMessageSimple
@@ -645,6 +669,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
         reactionListPosition,
         ReactionListTop,
         setQuotedMessageState,
+        shouldRenderSwipeableWrapper,
         showMessageStatus,
       }}
       {...props}