stream-chat-react-native-core 7.0.1-beta.4 → 7.0.1-beta.6

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)(isSwiping.value);
+            if (!shouldRenderSwipeableWrapper) {
+              runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+            }
           } else {
             state.fail();
           }
@@ -263,11 +277,21 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
               stiffness: 1,
             },
             () => {
-              runOnJS(setIsBeingSwiped)(isSwiping.value);
+              if (!shouldRenderSwipeableWrapper) {
+                runOnJS(setShouldRenderAnimatedWrapper)(isSwiping.value);
+              }
             },
           );
         }),
-    [isSwiping, messageSwipeToReplyHitSlop, onSwipeToReply, touchStart, translateX, triggerHaptic],
+    [
+      isSwiping,
+      messageSwipeToReplyHitSlop,
+      onSwipeToReply,
+      touchStart,
+      translateX,
+      triggerHaptic,
+      shouldRenderSwipeableWrapper,
+    ],
   );
 
   const messageBubbleAnimatedStyle = useAnimatedStyle(
@@ -326,7 +350,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     () => (
       <GestureDetector gesture={swipeGesture}>
         <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
-          {isBeingSwiped ? (
+          {shouldRenderAnimatedWrapper ? (
             <>
               <AnimatedWrapper
                 style={[
@@ -350,7 +374,7 @@ const MessageSimpleWithContext = (props: MessageSimplePropsWithContext) => {
     [
       MessageSwipeContent,
       contentWrapper,
-      isBeingSwiped,
+      shouldRenderAnimatedWrapper,
       messageBubbleAnimatedStyle,
       messageSwipeToReplyHitSlop,
       renderMessageBubble,
@@ -586,6 +610,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
     onlyEmojis,
     otherAttachments,
     showMessageStatus,
+    isMessageAIGenerated,
   } = useMessageContext();
   const {
     clearQuotedMessageState,
@@ -607,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
@@ -639,6 +669,7 @@ export const MessageSimple = (props: MessageSimpleProps) => {
         reactionListPosition,
         ReactionListTop,
         setQuotedMessageState,
+        shouldRenderSwipeableWrapper,
         showMessageStatus,
       }}
       {...props}

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.0.1-beta.4"
+  "version": "7.0.1-beta.6"
 }