stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.10

package/src/components/ChannelPreview/{ChannelPreviewMessenger.tsx → ChannelPreviewView.tsx}

@@ -20,7 +20,7 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 
-export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
+export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
   Pick<
     ChannelsContextValue,
     | 'maxUnreadCount'
@@ -50,7 +50,7 @@ export type ChannelPreviewMessengerPropsWithContext = Pick<ChannelPreviewProps,
     lastMessage?: LastMessageType;
   };
 
-const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsWithContext) => {
+const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext) => {
   const {
     channel,
     formatLatestMessageDate,
@@ -146,20 +146,18 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW
   );
 };
 
-export type ChannelPreviewMessengerProps = Partial<
-  Omit<ChannelPreviewMessengerPropsWithContext, 'channel'>
-> &
-  Pick<ChannelPreviewMessengerPropsWithContext, 'channel'>;
+export type ChannelPreviewViewProps = Partial<Omit<ChannelPreviewViewPropsWithContext, 'channel'>> &
+  Pick<ChannelPreviewViewPropsWithContext, 'channel'>;
 
-const MemoizedChannelPreviewMessengerWithContext = React.memo(
-  ChannelPreviewMessengerWithContext,
-) as typeof ChannelPreviewMessengerWithContext;
+const MemoizedChannelPreviewViewWithContext = React.memo(
+  ChannelPreviewViewWithContext,
+) as typeof ChannelPreviewViewWithContext;
 
 /**
  * This UI component displays an individual preview item for each channel in a list. It also receives all props
  * from the ChannelPreview component.
  */
-export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) => {
+export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
   const {
     forceUpdate,
     maxUnreadCount,
@@ -172,7 +170,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
     mutedStatusPosition,
   } = useChannelsContext();
   return (
-    <MemoizedChannelPreviewMessengerWithContext
+    <MemoizedChannelPreviewViewWithContext
       {...{
         forceUpdate,
         maxUnreadCount,
@@ -189,7 +187,7 @@ export const ChannelPreviewMessenger = (props: ChannelPreviewMessengerProps) =>
   );
 };
 
-ChannelPreviewMessenger.displayName = 'ChannelPreviewMessenger{channelPreview}';
+ChannelPreviewView.displayName = 'ChannelPreviewView{channelPreview}';
 
 const useStyles = () => {
   const {

package/src/components/ChannelPreview/__tests__/{ChannelPreviewMessenger.test.js → ChannelPreviewView.test.js}

@@ -11,16 +11,16 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
-import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
+import { ChannelPreviewView } from '../ChannelPreviewView';
 
-describe('ChannelPreviewMessenger', () => {
+describe('ChannelPreviewView', () => {
   const clientUser = generateUser();
   let chatClient;
   let channel;
 
   const getComponent = (props = {}) => (
     <Chat client={chatClient}>
-      <ChannelPreviewMessenger
+      <ChannelPreviewView
         channel={channel}
         client={chatClient}
         latestMessagePreview={{

package/src/components/Chat/Chat.tsx

@@ -109,7 +109,7 @@ export type ChatProps = Pick<ChatContextValue, 'client'> &
      * import type { DeepPartial, Theme } from 'stream-chat-react-native';
      *
      * const theme: DeepPartial<Theme> = {
-     *   messageSimple: {
+     *   messageItemView: {
      *     file: {
      *       container: {
      *         backgroundColor: 'red',

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,16 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import {
-  ImageGalleryProviderProps,
-  useImageGalleryContext,
-} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryFooterProps, ImageGalleryVideoControlProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
@@ -38,24 +32,10 @@ export type ImageGalleryFooterCustomComponent = ({
   shareMenuOpen: boolean;
 }) => React.ReactElement | null;
 
-export type ImageGalleryVideoControlProps = {
-  attachmentId: string;
-};
-
 export type ImageGalleryVideoControlComponent = ({
   attachmentId,
 }: ImageGalleryVideoControlProps) => React.ReactElement | null;
 
-export type ImageGalleryFooterProps = Pick<
-  ImageGalleryProviderProps,
-  'ImageGalleryVideoControls'
-> & {
-  accessibilityLabel: string;
-  opacity: SharedValue<number>;
-  openGridView: () => void;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
   currentIndex: state.currentIndex,

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -2,14 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import type { ImageGalleryHeaderProps } from './types';
+
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -26,11 +23,6 @@ const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
   : SafeAreaView;
 
-export type ImageGalleryHeaderProps = {
-  opacity: SharedValue<number>;
-  visible: SharedValue<number>;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
 });

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ImageGalleryVideoControlProps } from './ImageGalleryFooter';
+import type { ImageGalleryVideoControlProps } from './types';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
+import type { ImageGalleryGridProps } from './types';
+
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import { useViewport } from '../../../hooks/useViewport';
@@ -11,7 +13,7 @@ import type {
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
 import { FileTypes } from '../../../types/types';
-import { StreamBottomSheetModalFlatList } from '../../UIComponents';
+import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ImageGalleryGridImageComponent = ({
   item,
@@ -51,11 +53,6 @@ const GridImage = ({ item }: { item: GridImageItem }) => {
 
 const renderItem = ({ item }: { item: GridImageItem }) => <GridImage item={item} />;
 
-export type ImageGalleryGridProps = {
-  closeGridView: () => void;
-  numberOfImageGalleryGridColumns?: number;
-};
-
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
 });

package/src/components/ImageGallery/components/types.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+export type ImageGalleryVideoControlProps = {
+  attachmentId: string;
+};
+
+export type ImageGalleryHeaderProps = {
+  opacity: SharedValue<number>;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryFooterProps = {
+  accessibilityLabel: string;
+  ImageGalleryVideoControls?: React.ComponentType<ImageGalleryVideoControlProps>;
+  opacity: SharedValue<number>;
+  openGridView: () => void;
+  visible: SharedValue<number>;
+};
+
+export type ImageGalleryGridProps = {
+  closeGridView: () => void;
+  numberOfImageGalleryGridColumns?: number;
+};

package/src/components/ImageGallery/hooks/useImageGalleryVideoPlayer.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { VideoPlayerOptions } from '../../../state-store/video-player';
 
 export type UseImageGalleryVideoPlayerProps = VideoPlayerOptions;

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -41,7 +41,7 @@ export class KeyboardCompatibleView extends React.Component<
   > = {
     behavior: Platform.OS === 'ios' ? 'padding' : 'position',
     enabled: true,
-    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageInput height
+    keyboardVerticalOffset: Platform.OS === 'ios' ? 86.5 : -300, // default MessageComposer height
   };
 
   _frame: LayoutRectangle | null = null;

package/src/components/Message/Message.tsx

@@ -1,12 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
@@ -54,6 +47,7 @@ import { isVideoPlayerAvailable, NativeHandlers } from '../../native';
 import {
   closeOverlay,
   openOverlay,
+  Rect,
   setOverlayBottomH,
   setOverlayMessageH,
   setOverlayTopH,
@@ -209,7 +203,7 @@ export type MessagePropsWithContext = Pick<
     | 'messageContentOrder'
     | 'MessageBounce'
     | 'MessageBlocked'
-    | 'MessageSimple'
+    | 'MessageItemView'
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
@@ -293,7 +287,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
     messagesContext,
-    MessageSimple,
+    MessageItemView,
     onLongPressMessage: onLongPressMessageProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
@@ -332,16 +326,18 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
 
-  const [rect, setRect] = useState<{ w: number; h: number; x: number; y: number } | undefined>(
-    undefined,
-  );
-  const { width: screenW } = useWindowDimensions();
+  const rectRef = useRef<Rect>(undefined);
+  const bubbleRect = useRef<Rect>(undefined);
+  const contextMenuAnchorRef = useRef<View>(null);
 
   const showMessageOverlay = useStableCallback(async () => {
     dismissKeyboard();
     try {
       const layout = await measureInWindow(messageWrapperRef, insets);
-      setRect(layout);
+      const bubbleLayout = await measureInWindow(contextMenuAnchorRef, insets).catch(() => layout);
+
+      rectRef.current = layout;
+      bubbleRect.current = bubbleLayout;
       setOverlayMessageH(layout);
       openOverlay({ id: messageOverlayId, messageId: message.id });
     } catch (e) {
@@ -698,6 +694,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     actionsEnabled,
     alignment,
     channel,
+    contextMenuAnchorRef,
     deliveredToCount,
     dismissOverlay,
     files: attachments.files,
@@ -815,6 +812,8 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const styles = useStyles({
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
   });
+  const rect = rectRef.current;
+  const overlayItemsAnchorRect = bubbleRect.current ?? rect;
 
   if (!(isMessageTypeDeleted || messageContentOrder.length)) {
     return null;
@@ -841,7 +840,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         ) : null}
         {/*TODO: V9: Find a way to separate these in a dedicated file*/}
         <Portal hostName={overlayActive && rect ? 'top-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
@@ -849,7 +848,10 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                 setOverlayTopH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    alignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y - h,
                 });
               }}
@@ -865,7 +867,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           hostName={overlayActive ? 'message-overlay' : undefined}
           style={overlayActive && rect ? { width: rect.w } : undefined}
         >
-          <MessageSimple ref={messageWrapperRef} />
+          <View ref={messageWrapperRef}>
+            <MessageItemView />
+          </View>
         </Portal>
         {showMessageReactions ? (
           <BottomSheetModal
@@ -883,14 +887,17 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
           </BottomSheetModal>
         ) : null}
         <Portal hostName={overlayActive && rect ? 'bottom-item' : undefined}>
-          {overlayActive && rect ? (
+          {overlayActive && rect && overlayItemsAnchorRect ? (
             <View
               onLayout={(e) => {
                 const { width: w, height: h } = e.nativeEvent.layout;
                 setOverlayBottomH({
                   h,
                   w,
-                  x: isMyMessage ? screenW - rect.x - w : rect.x,
+                  x:
+                    alignment === 'right'
+                      ? overlayItemsAnchorRect.x + overlayItemsAnchorRect.w - w
+                      : overlayItemsAnchorRect.x,
                   y: rect.y + rect.h,
                 });
               }}
@@ -1132,7 +1139,7 @@ export const Message = (props: MessageProps) => {
 const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
   const {
     theme: {
-      messageSimple: { wrapper, targetedMessageContainer, blockedMessageContainer },
+      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
       screenPadding,
       semantics,
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessagePinnedHeader.tsx

@@ -41,7 +41,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         pinnedHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageReminderHeader.tsx

@@ -65,7 +65,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         reminderHeader: { container, label, dot, time },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/MessageSavedForLaterHeader.tsx

@@ -26,7 +26,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         savedForLaterHeader: { container, label },
       },
     },

package/src/components/Message/{MessageSimple → MessageItemView}/Headers/SentToChannelHeader.tsx

@@ -111,7 +111,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageSimple: {
+      messageItemView: {
         sentToChannelHeader: { container, label, dot, link },
       },
     },

package/src/components/Message/{MessageSimple/MessageAvatar.tsx → MessageItemView/MessageAuthor.tsx}

@@ -9,18 +9,18 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { AvatarProps, UserAvatar } from '../../ui';
 import { avatarSizes } from '../../ui/Avatar/constants';
 
-export type MessageAvatarPropsWithContext = Pick<
+export type MessageAuthorPropsWithContext = Pick<
   MessageContextValue,
   'lastGroupMessage' | 'message' | 'showAvatar'
 > &
   Partial<Pick<AvatarProps, 'size'>>;
 
-const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
+const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
   const { lastGroupMessage, message, showAvatar, size } = props;
   const {
     theme: {
-      messageSimple: {
-        avatarWrapper: { container },
+      messageItemView: {
+        authorWrapper: { container },
       },
     },
   } = useTheme();
@@ -28,7 +28,7 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
   return (
-    <View style={container} testID='message-avatar'>
+    <View style={container} testID='message-author'>
       {visible && message.user ? (
         <UserAvatar user={message.user} size={size ?? 'md'} />
       ) : (
@@ -39,8 +39,8 @@ const MessageAvatarWithContext = (props: MessageAvatarPropsWithContext) => {
 };
 
 const areEqual = (
-  prevProps: MessageAvatarPropsWithContext,
-  nextProps: MessageAvatarPropsWithContext,
+  prevProps: MessageAuthorPropsWithContext,
+  nextProps: MessageAuthorPropsWithContext,
 ) => {
   const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;
   const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;
@@ -61,18 +61,18 @@ const areEqual = (
   return true;
 };
 
-const MemoizedMessageAvatar = React.memo(
-  MessageAvatarWithContext,
+const MemoizedMessageAuthor = React.memo(
+  MessageAuthorWithContext,
   areEqual,
-) as typeof MessageAvatarWithContext;
+) as typeof MessageAuthorWithContext;
 
-export type MessageAvatarProps = Partial<MessageAvatarPropsWithContext>;
+export type MessageAuthorProps = Partial<MessageAuthorPropsWithContext>;
 
-export const MessageAvatar = (props: MessageAvatarProps) => {
+export const MessageAuthor = (props: MessageAuthorProps) => {
   const { lastGroupMessage, message, showAvatar } = useMessageContext();
 
   return (
-    <MemoizedMessageAvatar
+    <MemoizedMessageAuthor
       {...{
         lastGroupMessage,
         message,
@@ -83,4 +83,4 @@ export const MessageAvatar = (props: MessageAvatarProps) => {
   );
 };
 
-MessageAvatar.displayName = 'MessageAvatar{messageSimple{avatarWrapper}}';
+MessageAuthor.displayName = 'MessageAuthor{messageItemView{authorWrapper}}';

package/src/components/Message/{MessageSimple → MessageItemView}/MessageBlocked.tsx

@@ -35,7 +35,7 @@ MessageBlocked.displayName = 'MessageBlocked{messageList{messageBlocked}}';
 const useStyles = () => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         messageBlocked: { container, text },
       },
       semantics,

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

@@ -0,0 +1,145 @@
+import React, { ReactNode, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { MessageItemViewPropsWithContext } from './MessageItemView';
+
+import { MessagesContextValue, useTheme } from '../../../contexts';
+
+import { NativeHandlers } from '../../../native';
+
+const AnimatedWrapper = Animated.createAnimatedComponent(View);
+
+type SwipableMessageWrapperProps = Pick<MessagesContextValue, 'MessageSwipeContent'> &
+  Pick<MessageItemViewPropsWithContext, 'messageSwipeToReplyHitSlop'> & {
+    children: ReactNode;
+    onSwipe: () => void;
+  };
+
+export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+  const { MessageSwipeContent, children, messageSwipeToReplyHitSlop, onSwipe } = props;
+
+  const styles = useStyles();
+
+  const translateX = useSharedValue(0);
+  const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
+  const isSwiping = useSharedValue<boolean>(false);
+  const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
+
+  const SWIPABLE_THRESHOLD = 25;
+  const MINIMUM_DISTANCE = 8;
+
+  const triggerHaptic = NativeHandlers.triggerHaptic;
+
+  const swipeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .hitSlop(messageSwipeToReplyHitSlop)
+        .onBegin((event) => {
+          touchStart.value = { x: event.x, y: event.y };
+        })
+        .onTouchesMove((event, state) => {
+          if (!touchStart.value || !event.changedTouches.length) {
+            state.fail();
+            return;
+          }
+
+          const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
+          const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
+          const isHorizontalPanning = xDiff > yDiff;
+          const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
+
+          // Only activate if there's significant horizontal movement
+          if (isHorizontalPanning && hasMinimumDistance) {
+            state.activate();
+            if (!isSwiping.value) {
+              runOnJS(setShouldRenderAnimatedWrapper)(true);
+            }
+            isSwiping.value = true;
+          } else if (hasMinimumDistance) {
+            // If there's significant movement but not horizontal, fail the gesture
+            state.fail();
+          }
+        })
+        .onStart(() => {
+          translateX.value = 0;
+        })
+        .onChange(({ translationX }) => {
+          if (translationX > 0) {
+            translateX.value = translationX;
+          }
+        })
+        .onEnd(() => {
+          if (translateX.value >= SWIPABLE_THRESHOLD) {
+            runOnJS(onSwipe)();
+            if (triggerHaptic) {
+              runOnJS(triggerHaptic)('impactMedium');
+            }
+          }
+          isSwiping.value = false;
+          translateX.value = withSpring(
+            0,
+            {
+              dampingRatio: 1,
+              duration: 500,
+              overshootClamping: true,
+              stiffness: 1,
+            },
+            () => {
+              runOnJS(setShouldRenderAnimatedWrapper)(false);
+            },
+          );
+        }),
+    [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
+  );
+
+  const swipeContentAnimatedStyle = useAnimatedStyle(
+    () => ({
+      opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
+      width: translateX.value,
+    }),
+    [],
+  );
+
+  return (
+    <GestureDetector gesture={swipeGesture}>
+      <View hitSlop={messageSwipeToReplyHitSlop} style={styles.contentWrapper}>
+        {shouldRenderAnimatedWrapper ? (
+          <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
+            {MessageSwipeContent ? <MessageSwipeContent /> : null}
+          </AnimatedWrapper>
+        ) : null}
+        {children}
+      </View>
+    </GestureDetector>
+  );
+});
+
+const useStyles = () => {
+  const {
+    theme: {
+      messageItemView: { contentWrapper, swipeContentContainer },
+    },
+  } = useTheme();
+  return useMemo(() => {
+    return StyleSheet.create({
+      contentWrapper: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        zIndex: 1, // To hide the stick inside the message content
+        ...contentWrapper,
+      },
+      swipeContentContainer: {
+        ...swipeContentContainer,
+      },
+    });
+  }, [contentWrapper, swipeContentContainer]);
+};