feat: enable swipe to reply for message bubble

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -141,6 +141,7 @@ import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimpl
 import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
+import { MessageSwipeLeftContent as MessageSwipeLeftContentDefault } from '../Message/MessageSimple/MessageSwipeLeftContent';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
 import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
 import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
@@ -295,6 +296,7 @@ export type ChannelPropsWithContext<
       | 'deletedMessagesVisibilityType'
       | 'disableTypingIndicator'
       | 'dismissKeyboardOnMessageTouch'
+      | 'enableSwipeToReply'
       | 'FileAttachment'
       | 'FileAttachmentIcon'
       | 'FileAttachmentGroup'
@@ -348,6 +350,7 @@ export type ChannelPropsWithContext<
       | 'messageTextNumberOfLines'
       | 'MessageTimestamp'
       | 'MessageUserReactions'
+      | 'MessageSwipeLeftContent'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
@@ -528,6 +531,7 @@ const ChannelWithContext = <
     EmptyStateIndicator = EmptyStateIndicatorDefault,
     enableMessageGroupingByUser = true,
     enableOfflineSupport,
+    enableSwipeToReply = true,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
@@ -620,6 +624,7 @@ const ChannelWithContext = <
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
     MessageSimple = MessageSimpleDefault,
     MessageStatus = MessageStatusDefault,
+    MessageSwipeLeftContent = MessageSwipeLeftContentDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
     messageTextNumberOfLines,
@@ -1802,13 +1807,15 @@ const ChannelWithContext = <
     CardFooter,
     CardHeader,
     channelId,
+    clearQuotedMessageState,
     DateHeader,
     deletedMessagesVisibilityType,
     deleteMessage,
     deleteReaction,
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch,
     enableMessageGroupingByUser,
+    enableSwipeToReply,
     FileAttachment,
     FileAttachmentGroup,
     FileAttachmentIcon,
@@ -1862,6 +1869,7 @@ const ChannelWithContext = <
     MessageRepliesAvatars,
     MessageSimple,
     MessageStatus,
+    MessageSwipeLeftContent,
     MessageSystem,
     MessageText,
     messageTextNumberOfLines,

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

@@ -15,13 +15,15 @@ export const useCreateMessagesContext = <
   CardFooter,
   CardHeader,
   channelId,
+  clearQuotedMessageState,
   DateHeader,
   deletedMessagesVisibilityType,
   deleteMessage,
   deleteReaction,
   disableTypingIndicator,
   dismissKeyboardOnMessageTouch,
   enableMessageGroupingByUser,
+  enableSwipeToReply,
   FileAttachment,
   FileAttachmentGroup,
   FileAttachmentIcon,
@@ -74,6 +76,7 @@ export const useCreateMessagesContext = <
   MessageRepliesAvatars,
   MessageSimple,
   MessageStatus,
+  MessageSwipeLeftContent,
   MessageSystem,
   MessageText,
   messageTextNumberOfLines,
@@ -128,13 +131,15 @@ export const useCreateMessagesContext = <
       CardCover,
       CardFooter,
       CardHeader,
+      clearQuotedMessageState,
       DateHeader,
       deletedMessagesVisibilityType,
       deleteMessage,
       deleteReaction,
       disableTypingIndicator,
       dismissKeyboardOnMessageTouch,
       enableMessageGroupingByUser,
+      enableSwipeToReply,
       FileAttachment,
       FileAttachmentGroup,
       FileAttachmentIcon,
@@ -187,6 +192,7 @@ export const useCreateMessagesContext = <
       MessageRepliesAvatars,
       MessageSimple,
       MessageStatus,
+      MessageSwipeLeftContent,
       MessageSystem,
       MessageText,
       messageTextNumberOfLines,

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
 
 import {
   MessageContextValue,
@@ -22,7 +23,9 @@ const styles = StyleSheet.create({
   contentContainer: {},
   contentWrapper: {
     flexDirection: 'row',
+    overflow: 'visible',
   },
+
   lastMessageContainer: {
     marginBottom: 12,
   },
@@ -56,7 +59,9 @@ export type MessageSimplePropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
+    | 'clearQuotedMessageState'
     | 'enableMessageGroupingByUser'
+    | 'enableSwipeToReply'
     | 'myMessageTheme'
     | 'MessageAvatar'
     | 'MessageContent'
@@ -66,9 +71,11 @@ export type MessageSimplePropsWithContext<
     | 'MessagePinnedHeader'
     | 'MessageReplies'
     | 'MessageStatus'
+    | 'MessageSwipeLeftContent'
     | 'ReactionListBottom'
     | 'reactionListPosition'
     | 'ReactionListTop'
+    | 'setQuotedMessageState'
   >;
 
 const MessageSimpleWithContext = <
@@ -77,9 +84,13 @@ const MessageSimpleWithContext = <
   props: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
   const [messageContentWidth, setMessageContentWidth] = useState(0);
+  const swipeableRef = useRef<Swipeable | null>(null);
+
   const {
     alignment,
+    clearQuotedMessageState,
     enableMessageGroupingByUser,
+    enableSwipeToReply,
     groupStyles,
     hasReactions,
     isMyMessage,
@@ -94,11 +105,13 @@ const MessageSimpleWithContext = <
     MessagePinnedHeader,
     MessageReplies,
     MessageStatus,
+    MessageSwipeLeftContent,
     onlyEmojis,
     otherAttachments,
     ReactionListBottom,
     reactionListPosition,
     ReactionListTop,
+    setQuotedMessageState,
     showMessageStatus,
   } = props;
 
@@ -234,7 +247,25 @@ const MessageSimpleWithContext = <
             {message.pinned ? <MessagePinnedHeader /> : null}
           </View>
 
-          <View style={[styles.contentWrapper, contentWrapper]}>
+          <Swipeable
+            containerStyle={[styles.contentWrapper, contentWrapper]}
+            friction={2}
+            leftThreshold={enableSwipeToReply ? 100 : 0}
+            onSwipeableWillOpen={() => {
+              if (!swipeableRef.current) return;
+              clearQuotedMessageState();
+              setQuotedMessageState(message);
+              swipeableRef.current.close();
+            }}
+            ref={swipeableRef}
+            renderLeftActions={() => {
+              if (alignment === 'left' && enableSwipeToReply) {
+                return MessageSwipeLeftContent ? <MessageSwipeLeftContent /> : null;
+              } else {
+                return null;
+              }
+            }}
+          >
             <MessageContent
               backgroundColor={backgroundColor}
               noBorder={noBorder}
@@ -243,7 +274,7 @@ const MessageSimpleWithContext = <
             {reactionListPosition === 'top' && ReactionListTop ? (
               <ReactionListTop messageContentWidth={messageContentWidth} />
             ) : null}
-          </View>
+          </Swipeable>
 
           {reactionListPosition === 'bottom' && ReactionListBottom ? <ReactionListBottom /> : null}
           <MessageReplies noBorder={noBorder} repliesCurveColor={repliesCurveColor} />
@@ -394,7 +425,9 @@ export const MessageSimple = <
     showMessageStatus,
   } = useMessageContext<StreamChatGenerics>();
   const {
+    clearQuotedMessageState,
     enableMessageGroupingByUser,
+    enableSwipeToReply,
     MessageAvatar,
     MessageContent,
     MessageDeleted,
@@ -403,18 +436,22 @@ export const MessageSimple = <
     MessagePinnedHeader,
     MessageReplies,
     MessageStatus,
+    MessageSwipeLeftContent,
     myMessageTheme,
     ReactionListBottom,
     reactionListPosition,
     ReactionListTop,
+    setQuotedMessageState,
   } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedMessageSimple<StreamChatGenerics>
       {...{
         alignment,
         channel,
+        clearQuotedMessageState,
         enableMessageGroupingByUser,
+        enableSwipeToReply,
         groupStyles,
         hasReactions,
         isMyMessage,
@@ -429,12 +466,14 @@ export const MessageSimple = <
         MessagePinnedHeader,
         MessageReplies,
         MessageStatus,
+        MessageSwipeLeftContent,
         myMessageTheme,
         onlyEmojis,
         otherAttachments,
         ReactionListBottom,
         reactionListPosition,
         ReactionListTop,
+        setQuotedMessageState,
         showMessageStatus,
       }}
       {...props}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { CurveLineLeftUp } from '../../../icons';
+
+export const MessageSwipeLeftContent = () => {
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: {
+        swipeLeftContent: { container },
+      },
+    },
+  } = useTheme();
+  return (
+    <View style={[styles.container, container]}>
+      <CurveLineLeftUp pathFill={grey} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+  },
+});