fix: add hitslop

GetStream · Jan 17, 2025 · 677442e · 677442e
1 parent c7c46c5
commit 677442e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 4 deletions.
diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx
@@ -351,6 +351,7 @@ export type ChannelPropsWithContext<
       | 'MessageTimestamp'
       | 'MessageUserReactions'
       | 'MessageSwipeContent'
+      | 'messageSwipeToReplyHitSlop'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
@@ -625,6 +626,7 @@ const ChannelWithContext = <
     MessageSimple = MessageSimpleDefault,
     MessageStatus = MessageStatusDefault,
     MessageSwipeContent = MessageSwipeContentDefault,
+    messageSwipeToReplyHitSlop,
     MessageSystem = MessageSystemDefault,
     MessageText,
     messageTextNumberOfLines,
@@ -1870,6 +1872,7 @@ const ChannelWithContext = <
     MessageSimple,
     MessageStatus,
     MessageSwipeContent,
+    messageSwipeToReplyHitSlop,
     MessageSystem,
     MessageText,
     messageTextNumberOfLines,

diff --git a/package/src/components/Channel/hooks/useCreateMessagesContext.ts b/package/src/components/Channel/hooks/useCreateMessagesContext.ts
@@ -77,6 +77,7 @@ export const useCreateMessagesContext = <
   MessageSimple,
   MessageStatus,
   MessageSwipeContent,
+  messageSwipeToReplyHitSlop,
   MessageSystem,
   MessageText,
   messageTextNumberOfLines,
@@ -193,6 +194,7 @@ export const useCreateMessagesContext = <
       MessageSimple,
       MessageStatus,
       MessageSwipeContent,
+      messageSwipeToReplyHitSlop,
       MessageSystem,
       MessageText,
       messageTextNumberOfLines,

diff --git a/package/src/components/Message/MessageSimple/MessageSimple.tsx b/package/src/components/Message/MessageSimple/MessageSimple.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
+import { Dimensions, LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
@@ -85,6 +85,7 @@ export type MessageSimplePropsWithContext<
     | 'MessageReplies'
     | 'MessageStatus'
     | 'MessageSwipeContent'
+    | 'messageSwipeToReplyHitSlop'
     | 'ReactionListBottom'
     | 'reactionListPosition'
     | 'ReactionListTop'
@@ -97,7 +98,7 @@ const MessageSimpleWithContext = <
   props: MessageSimplePropsWithContext<StreamChatGenerics>,
 ) => {
   const [messageContentWidth, setMessageContentWidth] = useState(0);
-
+  const { width } = Dimensions.get('screen');
   const {
     alignment,
     clearQuotedMessageState,
@@ -118,6 +119,7 @@ const MessageSimpleWithContext = <
     MessageReplies,
     MessageStatus,
     MessageSwipeContent,
+    messageSwipeToReplyHitSlop = { left: width, right: width },
     onlyEmojis,
     otherAttachments,
     ReactionListBottom,
@@ -212,6 +214,7 @@ const MessageSimpleWithContext = <
   const THRESHOLD = 25;
 
   const swipeGesture = Gesture.Pan()
+    .hitSlop(messageSwipeToReplyHitSlop)
     .manualActivation(true)
     .onBegin((event) => {
       touchStart.value = { x: event.x, y: event.y };
@@ -286,7 +289,7 @@ const MessageSimpleWithContext = <
 
   const renderAnimatedMessageBubble = (
     <GestureDetector gesture={swipeGesture}>
-      <View style={[styles.contentWrapper, contentWrapper]}>
+      <View hitSlop={messageSwipeToReplyHitSlop} style={[styles.contentWrapper, contentWrapper]}>
         <Animated.View
           style={[styles.swipeContentContainer, swipeContentAnimatedStyle, swipeContentContainer]}
         >
@@ -517,6 +520,7 @@ export const MessageSimple = <
     MessageReplies,
     MessageStatus,
     MessageSwipeContent,
+    messageSwipeToReplyHitSlop,
     myMessageTheme,
     ReactionListBottom,
     reactionListPosition,
@@ -547,6 +551,7 @@ export const MessageSimple = <
         MessageReplies,
         MessageStatus,
         MessageSwipeContent,
+        messageSwipeToReplyHitSlop,
         myMessageTheme,
         onlyEmojis,
         otherAttachments,

diff --git a/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap b/package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
@@ -385,6 +385,12 @@ exports[`Thread should match thread snapshot 1`] = `
                         />
                         <View
                           collapsable={false}
+                          hitSlop={
+                            {
+                              "left": 750,
+                              "right": 750,
+                            }
+                          }
                           style={
                             [
                               {
@@ -885,6 +891,12 @@ exports[`Thread should match thread snapshot 1`] = `
                         />
                         <View
                           collapsable={false}
+                          hitSlop={
+                            {
+                              "left": 750,
+                              "right": 750,
+                            }
+                          }
                           style={
                             [
                               {
@@ -1423,6 +1435,12 @@ exports[`Thread should match thread snapshot 1`] = `
                         />
                         <View
                           collapsable={false}
+                          hitSlop={
+                            {
+                              "left": 750,
+                              "right": 750,
+                            }
+                          }
                           style={
                             [
                               {
@@ -1916,6 +1934,12 @@ exports[`Thread should match thread snapshot 1`] = `
                           />
                           <View
                             collapsable={false}
+                            hitSlop={
+                              {
+                                "left": 750,
+                                "right": 750,
+                              }
+                            }
                             style={
                               [
                                 {

diff --git a/package/src/contexts/messagesContext/MessagesContext.tsx b/package/src/contexts/messagesContext/MessagesContext.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { PressableProps } from 'react-native';
+import { PressableProps, ViewProps } from 'react-native';
 
 import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
@@ -467,11 +467,16 @@ export type MessagesContextValue<
    * @overrideType Function | Array<Objects>
    */
   messageActions?: (param: MessageActionsParams<StreamChatGenerics>) => MessageActionType[];
+
   /**
    * Custom message header component
    */
   MessageHeader?: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
   MessageSwipeContent?: React.ComponentType;
+  /**
+   * HitSlop for the message swipe to reply gesture
+   */
+  messageSwipeToReplyHitSlop?: ViewProps['hitSlop'];
   /** Custom UI component for message text */
   MessageText?: React.ComponentType<MessageTextProps<StreamChatGenerics>>;
   /**