react-native-gifted-chat 3.2.2 → 3.3.0

package/src/Message/index.tsx

@@ -1,9 +1,13 @@
-import React, { useCallback } from 'react'
-import { View } from 'react-native'
+import React, { useCallback, useMemo, useRef } from 'react'
+import { View, StyleSheet } from 'react-native'
+import ReanimatedSwipeable, { SwipeableMethods } from 'react-native-gesture-handler/ReanimatedSwipeable'
+import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated'
 
 import { Avatar } from '../Avatar'
 import { Bubble } from '../Bubble'
+import { Color } from '../Color'
 import { IMessage } from '../Models'
+import { SwipeToReplyProps } from '../Reply'
 import { getStyleWithPosition } from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { isSameUser, renderComponentOrElement } from '../utils'
@@ -12,6 +16,44 @@ import { MessageProps } from './types'
 
 export * from './types'
 
+interface ReplyIconProps {
+  progress: SharedValue<number>
+  translation: SharedValue<number>
+  direction: 'left' | 'right'
+  position: 'left' | 'right'
+  style?: SwipeToReplyProps<IMessage>['actionContainerStyle']
+}
+
+const ReplyIcon = ({ progress, direction, position, style }: ReplyIconProps) => {
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet'
+
+    const scale = Math.min(progress.value, 1)
+    // When swiping left (icon on right), icon should move left (negative)
+    // When swiping right (icon on left), icon should move right (positive)
+    const translateX = direction === 'left'
+      ? Math.min(progress.value * -12, -12)
+      : Math.max(progress.value * 12, 12)
+
+    return {
+      transform: [{ scale }, { translateX }],
+      marginLeft: position === 'left' ? 0 : 16,
+      marginRight: position === 'right' ? 0 : 16,
+    }
+  })
+
+  return (
+    <Animated.View style={[localStyles.swipeActionContainer, animatedStyle, style]}>
+      <View style={localStyles.replyIconContainer}>
+        <View style={localStyles.replyIcon}>
+          <View style={localStyles.replyIconArrow} />
+          <View style={localStyles.replyIconLine} />
+        </View>
+      </View>
+    </Animated.View>
+  )
+}
+
 export const Message = <TMessage extends IMessage = IMessage>(props: MessageProps<TMessage>) => {
   const {
     currentMessage,
@@ -23,13 +65,24 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
     containerStyle,
     user,
     isUserAvatarVisible,
+    swipeToReply,
   } = props
 
+  // Extract swipe props
+  const isSwipeToReplyEnabled = swipeToReply?.isEnabled ?? false
+  const swipeToReplyDirection = swipeToReply?.direction ?? 'left'
+  const onSwipeToReply = swipeToReply?.onSwipe
+  const renderSwipeToReplyActionProp = swipeToReply?.renderAction
+  const swipeToReplyActionContainerStyle = swipeToReply?.actionContainerStyle
+
+  const swipeableRef = useRef<SwipeableMethods>(null)
+
   const renderBubble = useCallback(() => {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */
       containerStyle,
       onMessageLayout,
+      swipeToReply,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = props
@@ -45,6 +98,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
       /* eslint-disable @typescript-eslint/no-unused-vars */
       containerStyle,
       onMessageLayout,
+      swipeToReply,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = props
@@ -71,6 +125,7 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
       /* eslint-disable @typescript-eslint/no-unused-vars */
       containerStyle,
       onMessageLayout,
+      swipeToReply,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...rest
     } = props
@@ -83,31 +138,136 @@ export const Message = <TMessage extends IMessage = IMessage>(props: MessageProp
     isUserAvatarVisible,
   ])
 
+  const renderSwipeAction = useCallback((
+    progress: SharedValue<number>,
+    translation: SharedValue<number>
+  ) => {
+    if (renderSwipeToReplyActionProp)
+      return renderSwipeToReplyActionProp(progress, translation, position)
+
+    return (
+      <ReplyIcon
+        progress={progress}
+        translation={translation}
+        direction={swipeToReplyDirection}
+        position={position}
+        style={swipeToReplyActionContainerStyle}
+      />
+    )
+  }, [position, renderSwipeToReplyActionProp, swipeToReplyDirection, swipeToReplyActionContainerStyle])
+
+  const handleSwipeableOpen = useCallback(() => {
+    swipeableRef.current?.close()
+  }, [])
+
+  const handleSwipeableWillOpen = useCallback(() => {
+    if (onSwipeToReply && currentMessage)
+      onSwipeToReply(currentMessage)
+  }, [onSwipeToReply, currentMessage])
+
+  const sameUser = useMemo(() =>
+    isSameUser(currentMessage, nextMessage!)
+  , [currentMessage, nextMessage])
+
+  const messageContent = useMemo(() => {
+    if (currentMessage?.system)
+      return renderSystemMessage()
+
+    return (
+      <View
+        style={[
+          getStyleWithPosition(styles, 'container', position),
+          { marginBottom: sameUser ? 2 : 10 },
+          !props.isInverted && { marginBottom: 2 },
+          containerStyle?.[position],
+        ]}
+      >
+        {position === 'left' && renderAvatar()}
+        {renderBubble()}
+        {position === 'right' && renderAvatar()}
+      </View>
+    )
+  }, [
+    currentMessage?.system,
+    renderSystemMessage,
+    position,
+    sameUser,
+    props.isInverted,
+    containerStyle,
+    renderAvatar,
+    renderBubble,
+  ])
+
   if (!currentMessage)
     return null
 
-  const sameUser = isSameUser(currentMessage, nextMessage!)
+  // Don't wrap system messages in Swipeable
+  if (currentMessage.system || !isSwipeToReplyEnabled)
+    return (
+      <View onLayout={onMessageLayout}>
+        {messageContent}
+      </View>
+    )
 
   return (
     <View onLayout={onMessageLayout}>
-      {currentMessage.system
-        ? (
-          renderSystemMessage()
-        )
-        : (
-          <View
-            style={[
-              getStyleWithPosition(styles, 'container', position),
-              { marginBottom: sameUser ? 2 : 10 },
-              !props.isInverted && { marginBottom: 2 },
-              containerStyle?.[position],
-            ]}
-          >
-            {position === 'left' && renderAvatar()}
-            {renderBubble()}
-            {position === 'right' && renderAvatar()}
-          </View>
-        )}
+      <ReanimatedSwipeable
+        ref={swipeableRef}
+        friction={2}
+        overshootFriction={8}
+        renderRightActions={swipeToReplyDirection === 'left' ? renderSwipeAction : undefined}
+        renderLeftActions={swipeToReplyDirection === 'right' ? renderSwipeAction : undefined}
+        onSwipeableOpen={handleSwipeableOpen}
+        onSwipeableWillOpen={handleSwipeableWillOpen}
+      >
+        {messageContent}
+      </ReanimatedSwipeable>
     </View>
   )
 }
+
+const localStyles = StyleSheet.create({
+  swipeActionContainer: {
+    width: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  replyIconContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: Color.defaultBlue,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  replyIcon: {
+    width: 14,
+    height: 10,
+    transform: [{ scaleX: -1 }],
+  },
+  replyIconArrow: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+    borderTopWidth: 5,
+    borderTopColor: 'transparent',
+    borderBottomWidth: 5,
+    borderBottomColor: 'transparent',
+    borderRightWidth: 6,
+    borderRightColor: Color.white,
+  },
+  replyIconLine: {
+    position: 'absolute',
+    top: 3,
+    left: 5,
+    width: 9,
+    height: 4,
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderTopColor: Color.white,
+    borderRightColor: Color.white,
+    borderTopRightRadius: 4,
+  },
+})

package/src/Message/types.ts

@@ -1,8 +1,10 @@
 import { ViewStyle, LayoutChangeEvent } from 'react-native'
+
 import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { DayProps } from '../Day'
 import { IMessage, User, LeftRightStyle } from '../Models'
+import { SwipeToReplyProps } from '../Reply'
 import { SystemMessageProps } from '../SystemMessage'
 
 export interface MessageProps<TMessage extends IMessage> {
@@ -19,4 +21,6 @@ export interface MessageProps<TMessage extends IMessage> {
   renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode
   renderAvatar?: (props: AvatarProps<TMessage>) => React.ReactNode
   onMessageLayout?: (event: LayoutChangeEvent) => void
+  /** Swipe to reply configuration */
+  swipeToReply?: SwipeToReplyProps<TMessage>
 }

package/src/MessageReply.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo, useCallback } from 'react'
+import {
+  StyleSheet,
+  ViewStyle,
+  View,
+  Pressable,
+  Image,
+  TextStyle,
+  StyleProp,
+  ImageStyle,
+} from 'react-native'
+
+import { Text } from 'react-native-gesture-handler'
+import { Color } from './Color'
+import { LeftRightStyle, IMessage, ReplyMessage } from './Models'
+import { getStyleWithPosition } from './styles'
+
+export interface MessageReplyProps<TMessage extends IMessage> {
+  position?: 'left' | 'right'
+  currentMessage: TMessage
+  containerStyle?: LeftRightStyle<ViewStyle>
+  contentContainerStyle?: LeftRightStyle<ViewStyle>
+  imageStyle?: StyleProp<ImageStyle>
+  usernameStyle?: StyleProp<TextStyle>
+  textStyle?: StyleProp<TextStyle>
+  onPress?: (replyMessage: ReplyMessage) => void
+}
+
+export function MessageReply<TMessage extends IMessage = IMessage> ({
+  currentMessage,
+  position = 'left',
+  containerStyle,
+  contentContainerStyle,
+  imageStyle,
+  usernameStyle,
+  textStyle,
+  onPress: onPressProp,
+}: MessageReplyProps<TMessage>) {
+  const handlePress = useCallback(() => {
+    if (!onPressProp || !currentMessage.replyMessage)
+      return
+
+    onPressProp(currentMessage.replyMessage)
+  }, [onPressProp, currentMessage.replyMessage])
+
+  const containerStyleMemo = useMemo(() => [
+    styles.container,
+    getStyleWithPosition(styles, 'container', position),
+    containerStyle?.[position],
+  ], [position, containerStyle])
+
+  const contentContainerStyleMemo = useMemo(() => [
+    styles.contentContainer,
+    contentContainerStyle?.[position],
+  ], [position, contentContainerStyle])
+
+  const imageStyleMemo = useMemo(() => [
+    styles.image,
+    imageStyle,
+  ], [imageStyle])
+
+  const usernameStyleMemo = useMemo(() => [
+    styles.username,
+    getStyleWithPosition(styles, 'username', position),
+    usernameStyle,
+  ], [position, usernameStyle])
+
+  const textStyleMemo = useMemo(() => [
+    styles.text,
+    getStyleWithPosition(styles, 'text', position),
+    textStyle,
+  ], [position, textStyle])
+
+  if (!currentMessage.replyMessage)
+    return null
+
+  const { replyMessage } = currentMessage
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={containerStyleMemo}
+    >
+      <View style={contentContainerStyleMemo}>
+        {replyMessage.image && (
+          <Image
+            source={{ uri: replyMessage.image }}
+            style={imageStyleMemo}
+          />
+        )}
+        <View style={styles.textContainer}>
+          <Text
+            style={usernameStyleMemo}
+            numberOfLines={1}
+          >
+            {replyMessage.user?.name || 'User'}
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={textStyleMemo}
+          >
+            {replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
+          </Text>
+        </View>
+      </View>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: 10,
+    marginTop: 5,
+    marginBottom: 2,
+    padding: 8,
+    borderRadius: 8,
+    borderLeftWidth: 3,
+    borderLeftColor: Color.defaultBlue,
+    minWidth: 150,
+  },
+  container_left: {
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+  },
+  container_right: {
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  image: {
+    width: 36,
+    height: 36,
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  username: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  username_left: {
+    color: Color.defaultBlue,
+  },
+  username_right: {
+    color: Color.white,
+  },
+  text: {
+    fontSize: 13,
+  },
+  text_left: {
+    color: Color.black,
+  },
+  text_right: {
+    color: 'rgba(255, 255, 255, 0.8)',
+  },
+})

package/src/MessageText.tsx

@@ -35,7 +35,7 @@ export type MessageTextProps<TMessage extends IMessage> = {
   stripPrefix?: boolean
 }
 
-export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
+export function MessageText<TMessage extends IMessage>({
   currentMessage,
   position = 'left',
   containerStyle,
@@ -52,7 +52,7 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   hashtagUrl,
   mentionUrl,
   stripPrefix = false,
-}) => {
+}: MessageTextProps<TMessage>) {
   const linkStyle = useMemo(() => StyleSheet.flatten([
     styles.link,
     linkStyleProp?.[position],

package/src/MessagesContainer/components/DayAnimated/index.tsx

@@ -19,7 +19,11 @@ export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, m
   const isScrolledOnMount = useSharedValue(false)
   const isLoadingAnim = useSharedValue(isLoading)
 
-  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => {
+    'worklet'
+
+    return a.y - b.y
+  }))
 
   const [createdAt, setCreatedAt] = useState<number | undefined>()
 

package/src/MessagesContainer/components/Item/index.tsx

@@ -32,28 +32,35 @@ export const useRelativeScrolledPositionToBottomOfDay = (
 
   const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
 
-  // sorted array of days positions by y
-  const daysPositionsArray = useDerivedValue(() => {
-    return Object.values(daysPositions.value).sort((a, b) => {
-      'worklet'
-
-      return a.y - b.y
-    })
-  })
-
   // find current day position by scrolled position
   const currentDayPosition = useDerivedValue(() => {
+    'worklet'
+
+    // When createdAt is provided (called from AnimatedDayWrapper for a specific message),
+    // directly find the day position by createdAt without sorting the entire array.
+    // This avoids O(n log n) sorting and O(n) search for each message item.
     if (createdAt != null) {
-      const currentDayPosition = daysPositionsArray.value.find(day => day.createdAt === createdAt)
-      if (currentDayPosition)
-        return currentDayPosition
+      const values = Object.values(daysPositions.value)
+      for (let i = 0; i < values.length; i++)
+        if (values[i].createdAt === createdAt)
+          return values[i]
     }
 
-    return daysPositionsArray.value.find((day, index) => {
-      const dayPosition = day.y + day.height
-      return (absoluteScrolledPositionToBottomOfDay.value < dayPosition) || index === daysPositionsArray.value.length - 1
+    // Fallback: sort and search when createdAt is not provided (e.g., from DayAnimated)
+    const sortedArray = Object.values(daysPositions.value).sort((a, b) => {
+      'worklet'
+
+      return a.y - b.y
     })
-  }, [daysPositionsArray, absoluteScrolledPositionToBottomOfDay, createdAt])
+    for (let i = 0; i < sortedArray.length; i++) {
+      const day = sortedArray[i]
+      const dayPosition = day.y + day.height
+      if (absoluteScrolledPositionToBottomOfDay.value < dayPosition || i === sortedArray.length - 1)
+        return day
+    }
+
+    return undefined
+  }, [daysPositions, absoluteScrolledPositionToBottomOfDay, createdAt])
 
   const relativeScrolledPositionToBottomOfDay = useDerivedValue(() => {
     const scrolledBottomY = listHeight.value + scrolledY.value - (
@@ -97,13 +104,11 @@ const DayWrapper = <TMessage extends IMessage>(props: MessageProps<TMessage>) =>
   )
 }
 
-export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
+const AnimatedDayWrapper = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   const {
-    renderMessage: renderMessageProp,
     scrolledY,
     daysPositions,
     listHeight,
-    isDayAnimationEnabled,
     ...rest
   } = props
 
@@ -122,40 +127,70 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   }, [dayContainerHeight])
 
   const style = useAnimatedStyle(() => ({
-    opacity:
-      isDayAnimationEnabled
-        ? interpolate(
-          relativeScrolledPositionToBottomOfDay.value,
-          [
-            -dayTopOffset,
-            -0.0001,
-            0,
-            dayContainerHeight.value + dayTopOffset,
-          ],
-          [
-            0,
-            0,
-            1,
-            1,
-          ],
-          'clamp'
-        )
-        : 1,
-  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset, isDayAnimationEnabled])
+    opacity: interpolate(
+      relativeScrolledPositionToBottomOfDay.value,
+      [
+        -dayTopOffset,
+        -0.0001,
+        0,
+        dayContainerHeight.value + dayTopOffset,
+      ],
+      [
+        0,
+        0,
+        1,
+        1,
+      ],
+      'clamp'
+    ),
+  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
+
+  return (
+    <Animated.View
+      style={style}
+      onLayout={handleLayoutDayContainer}
+    >
+      <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
+    </Animated.View>
+  )
+}
+
+export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
+  const {
+    renderMessage: renderMessageProp,
+    isDayAnimationEnabled,
+    reply,
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    scrolledY: _scrolledY,
+    daysPositions: _daysPositions,
+    listHeight: _listHeight,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ...rest
+  } = props
+
+  // Transform reply props for Message and Bubble
+  const messageProps = useMemo(() => ({
+    ...rest,
+    // Swipe to reply for Message component
+    swipeToReply: reply?.swipe,
+    // Message reply styling for Bubble component
+    messageReply: reply ? {
+      renderMessageReply: reply.renderMessageReply,
+      onPress: reply.onPress,
+      ...reply.messageStyle,
+    } : undefined,
+  }), [rest, reply])
 
   return (
     // do not remove key. it helps to get correct position of the day container
     <View key={props.currentMessage._id.toString()}>
-      <Animated.View
-        style={style}
-        onLayout={handleLayoutDayContainer}
-      >
-        <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
-      </Animated.View>
+      {isDayAnimationEnabled
+        ? <AnimatedDayWrapper<TMessage> {...props} />
+        : <DayWrapper<TMessage> {...messageProps as MessageProps<TMessage>} />}
       {
         renderMessageProp
-          ? renderMessageProp(rest as MessageProps<TMessage>)
-          : <Message<TMessage> {...rest as MessageProps<TMessage>} />
+          ? renderMessageProp(messageProps as MessageProps<TMessage>)
+          : <Message<TMessage> {...messageProps as MessageProps<TMessage>} />
       }
     </View>
   )