react-native-gifted-chat 3.2.3 → 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/MessagesContainer/components/Item/index.tsx

@@ -159,6 +159,7 @@ 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,
@@ -167,16 +168,29 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
     ...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()}>
       {isDayAnimationEnabled
         ? <AnimatedDayWrapper<TMessage> {...props} />
-        : <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />}
+        : <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>
   )

package/src/MessagesContainer/index.tsx

@@ -18,7 +18,7 @@ import { DayAnimated } from './components/DayAnimated'
 import { Item } from './components/Item'
 import { ItemProps } from './components/Item/types'
 import styles from './styles'
-import { MessagesContainerProps, DaysPositions } from './types'
+import { MessagesContainerProps, DaysPositions, AnimatedFlatList } from './types'
 
 export * from './types'
 
@@ -34,6 +34,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
     scrollToBottomOffset = 200,
     isAlignedTop = false,
     scrollToBottomStyle,
+    scrollToBottomContentStyle,
     loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
@@ -162,18 +163,18 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
       messageItem.user = { _id: 0 }
     }
 
-    if (messages && user) {
+    if (messages) {
       const previousMessage =
         (isInverted ? messages[index + 1] : messages[index - 1]) || {}
       const nextMessage =
         (isInverted ? messages[index - 1] : messages[index + 1]) || {}
 
       const messageProps: ItemProps<TMessage> = {
+        position: user?._id != null && messageItem.user?._id === user._id ? 'right' : 'left',
         ...restProps,
         currentMessage: messageItem,
         previousMessage,
         nextMessage,
-        position: messageItem.user._id === user._id ? 'right' : 'left',
         scrolledY,
         daysPositions,
         listHeight,
@@ -238,14 +239,14 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         style={[
           stylesCommon.centerItems,
           styles.scrollToBottomContent,
-          scrollToBottomStyle,
+          scrollToBottomContentStyle,
           scrollToBottomStyleAnim,
         ]}
       >
         {renderScrollBottomComponent()}
       </Animated.View>
     )
-  }, [scrollToBottomStyle, scrollToBottomStyleAnim, renderScrollBottomComponent])
+  }, [scrollToBottomStyleAnim, scrollToBottomContentStyle, renderScrollBottomComponent])
 
   const ScrollToBottomWrapper = useCallback(() => {
     if (!isScrollToBottomEnabled)
@@ -256,13 +257,13 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
 
     return (
       <Pressable
-        style={styles.scrollToBottom}
+        style={[styles.scrollToBottom, scrollToBottomStyle]}
         onPress={handleScrollToBottomPress}
       >
         {scrollToBottomContent}
       </Pressable>
     )
-  }, [isScrollToBottomEnabled, isScrollToBottomVisible, handleScrollToBottomPress, scrollToBottomContent])
+  }, [isScrollToBottomEnabled, isScrollToBottomVisible, handleScrollToBottomPress, scrollToBottomContent, scrollToBottomStyle])
 
   const onLayoutList = useCallback((event: LayoutChangeEvent) => {
     listHeight.value = event.nativeEvent.layout.height
@@ -276,7 +277,9 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         doScrollToBottom(false)
       }, 500)
 
-    listProps?.onLayout?.(event)
+    // listProps.onLayout may be a SharedValue in Reanimated types, but we only accept functions
+    const onLayoutProp = listProps?.onLayout as ((event: LayoutChangeEvent) => void) | undefined
+    onLayoutProp?.(event)
   }, [isInverted, messages, doScrollToBottom, listHeight, listProps, isScrollToBottomEnabled])
 
   const onEndReached = useCallback(() => {
@@ -387,7 +390,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         isAlignedTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
-      <Animated.FlatList
+      <AnimatedFlatList
         ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
@@ -398,10 +401,10 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         contentContainerStyle={styles.messagesContainer}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
-          isInverted ? ListHeaderComponent : ListFooterComponent
+          isInverted ? ListHeaderComponent : <>{ListFooterComponent}</>
         }
         ListHeaderComponent={
-          isInverted ? ListFooterComponent : ListHeaderComponent
+          isInverted ? <>{ListFooterComponent}</> : ListHeaderComponent
         }
         scrollEventThrottle={1}
         onEndReached={onEndReached}
@@ -422,6 +425,8 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
           renderDay={renderDayProp}
           messages={messages}
           isLoading={loadEarlierMessagesProps?.isLoading ?? false}
+          dateFormat={props.dateFormat}
+          dateFormatCalendar={props.dateFormatCalendar}
         />
       )}
     </View>

package/src/MessagesContainer/types.ts

@@ -4,21 +4,36 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native'
-import Animated, { AnimatedProps, ScrollEvent } from 'react-native-reanimated'
+import { FlatList } from 'react-native-gesture-handler'
+import Animated, { ScrollEvent } from 'react-native-reanimated'
 
 import { DayProps } from '../Day'
 import { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
 import { MessageProps } from '../Message'
 import { User, IMessage, Reply } from '../Models'
+import { ReplyProps } from '../Reply'
 import { TypingIndicatorProps } from '../TypingIndicator/types'
 
+/** Animated FlatList created from react-native-gesture-handler's FlatList */
+const RNGHAnimatedFlatList = Animated.createAnimatedComponent(FlatList)
+
+/**
+ * Typed AnimatedFlatList component that preserves generic type parameter.
+ * Uses react-native-gesture-handler's FlatList which respects keyboardShouldPersistTaps.
+ */
+export const AnimatedFlatList = RNGHAnimatedFlatList as <TMessage>(
+  props: FlatListProps<TMessage> & {
+    ref?: RefObject<FlatList<TMessage>>
+  }
+) => React.ReactElement
+
 export type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<
-  Omit<AnimatedProps<FlatListProps<TMessage>>, 'onScroll'> & {
+  Omit<FlatListProps<TMessage>, 'onScroll'> & {
     onScroll?: (event: ScrollEvent) => void
   }
 >
 
-export type AnimatedList<TMessage> = Animated.FlatList<TMessage>
+export type AnimatedList<TMessage> = FlatList<TMessage>
 
 export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   extends Omit<TypingIndicatorProps, 'style'> {
@@ -26,6 +41,10 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   forwardRef?: RefObject<AnimatedList<TMessage>>
   /** Messages to display */
   messages?: TMessage[]
+  /** Format to use for rendering dates; default is 'll' */
+  dateFormat?: string
+  /** Format to use for rendering relative times */
+  dateFormatCalendar?: object
   /** User sending the messages: { _id, name, avatar } */
   user?: User
   /** Additional props for FlatList */
@@ -38,6 +57,8 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   isScrollToBottomEnabled?: boolean
   /** Scroll to bottom wrapper style */
   scrollToBottomStyle?: StyleProp<ViewStyle>
+  /** Scroll to bottom content style */
+  scrollToBottomContentStyle?: StyleProp<ViewStyle>
   /** Distance from bottom before showing scroll to bottom button */
   scrollToBottomOffset?: number
   /** Custom component to render when messages are empty */
@@ -62,6 +83,8 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   typingIndicatorStyle?: StyleProp<ViewStyle>
   /** Enable animated day label that appears on scroll; default is true */
   isDayAnimationEnabled?: boolean
+  /** Reply functionality configuration */
+  reply?: ReplyProps<TMessage>
 }
 
 export interface State {

package/src/Models.ts

@@ -27,6 +27,8 @@ export interface QuickReplies {
   keepIt?: boolean
 }
 
+export interface ReplyMessage extends Pick<IMessage, '_id' | 'text' | 'user' | 'audio' | 'image'> {}
+
 export interface IMessage {
   _id: string | number
   text: string
@@ -40,6 +42,7 @@ export interface IMessage {
   received?: boolean
   pending?: boolean
   quickReplies?: QuickReplies
+  replyMessage?: ReplyMessage
   location?: {
     latitude: number
     longitude: number

package/src/Reply/index.ts

@@ -0,0 +1 @@
+export * from './types'