react-native-gifted-chat 3.2.2 → 3.3.0

package/src/MessagesContainer/index.tsx

@@ -5,12 +5,11 @@ import {
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
-import { FlatList, Pressable, Text } from 'react-native-gesture-handler'
-import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
+import { Pressable, Text } from 'react-native-gesture-handler'
+import Animated, { runOnJS, ScrollEvent, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
 import { IMessage } from '../Models'
-import { ReanimatedScrollEvent } from '../reanimatedCompat'
 import stylesCommon from '../styles'
 import { TypingIndicator } from '../TypingIndicator'
 import { isSameDay, useCallbackThrottled } from '../utils'
@@ -19,12 +18,10 @@ 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'
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
-
 export const MessagesContainer = <TMessage extends IMessage>(props: MessagesContainerProps<TMessage>) => {
   const {
     messages = [],
@@ -37,6 +34,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
     scrollToBottomOffset = 200,
     isAlignedTop = false,
     scrollToBottomStyle,
+    scrollToBottomContentStyle,
     loadEarlierMessagesProps,
     renderTypingIndicator: renderTypingIndicatorProp,
     renderFooter: renderFooterProp,
@@ -114,8 +112,8 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
       forwardRef.current.scrollToEnd({ animated })
   }, [forwardRef, isInverted, scrollTo, isScrollingDown, changeScrollToBottomVisibility])
 
-  const handleOnScroll = useCallback((event: ReanimatedScrollEvent) => {
-    listPropsOnScrollProp?.(event as any)
+  const handleOnScroll = useCallback((event: ScrollEvent) => {
+    listPropsOnScrollProp?.(event)
 
     const {
       contentOffset: { y: contentOffsetY },
@@ -165,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,
@@ -241,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)
@@ -259,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
@@ -279,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(() => {
@@ -301,6 +301,10 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
     const handleOnLayout = (event: LayoutChangeEvent) => {
       onLayoutProp?.(event)
 
+      // Only track positions when day animation is enabled
+      if (!isDayAnimationEnabled)
+        return
+
       const { y, height } = event.nativeEvent.layout
 
       const newValue = {
@@ -343,7 +347,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         {children}
       </View>
     )
-  }, [daysPositions, isInverted])
+  }, [daysPositions, isInverted, isDayAnimationEnabled])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -355,6 +359,10 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
 
   // removes unrendered days positions when messages are added/removed
   useEffect(() => {
+    // Skip cleanup when day animation is disabled
+    if (!isDayAnimationEnabled)
+      return
+
     Object.keys(daysPositions.value).forEach(key => {
       const messageIndex = messages.findIndex(m => m._id.toString() === key)
       let shouldRemove = messageIndex === -1
@@ -373,7 +381,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
           return value
         })
     })
-  }, [messages, daysPositions, isInverted])
+  }, [messages, daysPositions, isInverted, isDayAnimationEnabled])
 
   return (
     <View
@@ -390,12 +398,13 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         inverted={isInverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
+        contentContainerStyle={styles.messagesContainer}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
-          isInverted ? ListHeaderComponent : ListFooterComponent
+          isInverted ? ListHeaderComponent : <>{ListFooterComponent}</>
         }
         ListHeaderComponent={
-          isInverted ? ListFooterComponent : ListHeaderComponent
+          isInverted ? <>{ListFooterComponent}</> : ListHeaderComponent
         }
         scrollEventThrottle={1}
         onEndReached={onEndReached}
@@ -416,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/styles.ts

@@ -9,6 +9,8 @@ export default StyleSheet.create({
   contentContainerStyle: {
     flexGrow: 1,
     justifyContent: 'flex-start',
+  },
+  messagesContainer: {
     paddingBottom: 10,
   },
   emptyChatContainer: {

package/src/MessagesContainer/types.ts

@@ -1,18 +1,37 @@
-import React, { RefObject } from 'react'
+import { RefObject } from 'react'
 import {
   FlatListProps,
   StyleProp,
   ViewStyle,
 } from 'react-native'
 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'
 
-export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
+/** 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<FlatListProps<TMessage>, 'onScroll'> & {
+    onScroll?: (event: ScrollEvent) => void
+  }
+>
 
 export type AnimatedList<TMessage> = FlatList<TMessage>
 
@@ -22,10 +41,14 @@ 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 */
-  listProps?: ListProps<TMessage>
+  listProps?: AnimatedListProps<TMessage>
   /** Reverses display order of messages; default is true */
   isInverted?: boolean
   /** Controls whether or not the message bubbles appear at the top of the chat */
@@ -34,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 */
@@ -58,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'

package/src/Reply/types.ts

@@ -0,0 +1,80 @@
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { SharedValue } from 'react-native-reanimated'
+
+import { MessageReplyProps } from '../components/MessageReply'
+import { ReplyPreviewProps } from '../components/ReplyPreview'
+import { IMessage, ReplyMessage } from '../Models'
+
+/**
+ * Props for swipe-to-reply gesture behavior
+ */
+export interface SwipeToReplyProps<TMessage extends IMessage> {
+  /** Enable swipe to reply on messages; default is false */
+  isEnabled?: boolean
+  /** Direction to swipe for reply; default is 'left' (swipe left, icon appears on right) */
+  direction?: 'left' | 'right'
+  /** Callback when swipe to reply is triggered */
+  onSwipe?: (message: TMessage) => void
+  /** Custom render for swipe action indicator */
+  renderAction?: (
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
+    position: 'left' | 'right'
+  ) => React.ReactNode
+  /** Style for the swipe action container */
+  actionContainerStyle?: StyleProp<ViewStyle>
+}
+
+/**
+ * Props for reply preview shown above input toolbar
+ */
+export interface ReplyPreviewStyleProps {
+  /** Style for reply preview container */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Style for reply preview text */
+  textStyle?: StyleProp<TextStyle>
+  /** Style for reply preview image */
+  imageStyle?: StyleProp<ImageStyle>
+}
+
+/**
+ * Props for message reply display inside bubble
+ */
+export interface MessageReplyStyleProps {
+  /** Style for message reply container */
+  containerStyle?: StyleProp<ViewStyle>
+  /** Style for message reply container on left side */
+  containerStyleLeft?: StyleProp<ViewStyle>
+  /** Style for message reply container on right side */
+  containerStyleRight?: StyleProp<ViewStyle>
+  /** Style for message reply image */
+  imageStyle?: StyleProp<ImageStyle>
+  /** Style for message reply text */
+  textStyle?: StyleProp<TextStyle>
+  /** Style for message reply text on left side */
+  textStyleLeft?: StyleProp<TextStyle>
+  /** Style for message reply text on right side */
+  textStyleRight?: StyleProp<TextStyle>
+}
+
+/**
+ * Grouped props for reply functionality
+ */
+export interface ReplyProps<TMessage extends IMessage> {
+  /** Reply message to show in input toolbar preview */
+  message?: ReplyMessage | null
+  /** Callback when reply is cleared */
+  onClear?: () => void
+  /** Callback when message reply is pressed inside bubble */
+  onPress?: (replyMessage: ReplyMessage) => void
+  /** Custom render for reply preview in input toolbar */
+  renderPreview?: (props: ReplyPreviewProps) => React.ReactNode
+  /** Custom render for message reply inside bubble */
+  renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode
+  /** Swipe-to-reply configuration */
+  swipe?: SwipeToReplyProps<TMessage>
+  /** Reply preview styling */
+  previewStyle?: ReplyPreviewStyleProps
+  /** Message reply styling */
+  messageStyle?: MessageReplyStyleProps
+}

package/src/ReplyPreview.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from 'react'
+import { StyleSheet, View, StyleProp, ViewStyle, TextStyle, Pressable } from 'react-native'
+
+import { Text } from 'react-native-gesture-handler'
+import { Color } from './Color'
+import { useColorScheme } from './hooks/useColorScheme'
+import { ReplyMessage } from './Models'
+
+export interface ReplyPreviewProps {
+  replyMessage: ReplyMessage
+  onClearReply: () => void
+  containerStyle?: StyleProp<ViewStyle>
+  usernameStyle?: StyleProp<TextStyle>
+  textStyle?: StyleProp<TextStyle>
+  clearButtonStyle?: StyleProp<ViewStyle>
+  clearButtonTextStyle?: StyleProp<TextStyle>
+}
+
+export function ReplyPreview ({
+  replyMessage,
+  onClearReply,
+  containerStyle,
+  usernameStyle,
+  textStyle,
+  clearButtonStyle,
+  clearButtonTextStyle,
+}: ReplyPreviewProps) {
+  const colorScheme = useColorScheme()
+
+  const containerStyles = useMemo(() => [
+    styles.container,
+    colorScheme === 'dark' && styles.container_dark,
+    containerStyle,
+  ], [colorScheme, containerStyle])
+
+  const usernameStyles = useMemo(() => [
+    styles.username,
+    colorScheme === 'dark' && styles.username_dark,
+    usernameStyle,
+  ], [colorScheme, usernameStyle])
+
+  const textStyles = useMemo(() => [
+    styles.text,
+    colorScheme === 'dark' && styles.text_dark,
+    textStyle,
+  ], [colorScheme, textStyle])
+
+  return (
+    <View style={containerStyles}>
+      <View style={styles.border} />
+      <View style={styles.content}>
+        <Text
+          style={usernameStyles}
+          numberOfLines={1}
+        >
+          {replyMessage.user?.name || 'User'}
+        </Text>
+        <Text
+          style={textStyles}
+          numberOfLines={1}
+        >
+          {replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
+        </Text>
+      </View>
+      <Pressable
+        onPress={onClearReply}
+        style={[styles.clearButton, clearButtonStyle]}
+        hitSlop={8}
+      >
+        <Text style={[styles.clearButtonText, clearButtonTextStyle]}>
+          {'✕'}
+        </Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    backgroundColor: '#f5f5f5',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Color.defaultColor,
+  },
+  container_dark: {
+    backgroundColor: '#2a2a2a',
+    borderBottomColor: '#444',
+  },
+  border: {
+    width: 3,
+    height: '100%',
+    backgroundColor: Color.defaultBlue,
+    borderRadius: 1.5,
+    marginRight: 10,
+  },
+  content: {
+    flex: 1,
+  },
+  username: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: Color.defaultBlue,
+    marginBottom: 2,
+  },
+  username_dark: {
+    color: '#6eb5ff',
+  },
+  text: {
+    fontSize: 13,
+    color: '#666',
+  },
+  text_dark: {
+    color: '#999',
+  },
+  clearButton: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: Color.defaultColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  clearButtonText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#666',
+  },
+})

package/src/Send.tsx

@@ -21,7 +21,10 @@ export interface SendProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   children?: React.ReactNode
+  /** Always show send button, even when text is empty */
   isSendButtonAlwaysVisible?: boolean
+  /** Text is optional, allow sending empty messages (useful for media-only messages) */
+  isTextOptional?: boolean
   sendButtonProps?: Partial<TouchableOpacityProps>
   onSend?(
     messages: Partial<TMessage> | Partial<TMessage>[],
@@ -36,6 +39,7 @@ export const Send = <TMessage extends IMessage = IMessage>({
   textStyle,
   label = 'Send',
   isSendButtonAlwaysVisible = false,
+  isTextOptional = false,
   sendButtonProps,
   onSend,
 }: SendProps<TMessage>) => {
@@ -43,11 +47,12 @@ export const Send = <TMessage extends IMessage = IMessage>({
   const opacity = useSharedValue(0)
 
   const handleOnPress = useCallback(() => {
-    const message = { text: text?.trim() } as Partial<TMessage>
+    const trimmedText = text?.trim() ?? ''
+    const message = { text: trimmedText } as Partial<TMessage>
 
-    if (onSend && message.text?.length)
+    if (onSend && (trimmedText.length || isTextOptional))
       onSend(message, true)
-  }, [text, onSend])
+  }, [text, onSend, isTextOptional])
 
   const isVisible = useMemo(
     () => isSendButtonAlwaysVisible || !!text?.trim().length,

package/src/SystemMessage.tsx

@@ -32,34 +32,39 @@ export function SystemMessage<TMessage extends IMessage> ({
     return null
 
   return (
-    <View style={[stylesCommon.fill, styles.container, containerStyle]}>
-      {
-        !!currentMessage.text && (
-          <MessageText
-            currentMessage={currentMessage}
-            customTextStyle={[styles.text, textStyle]}
-            position='left'
-            containerStyle={{ left: [styles.messageContainer, messageContainerStyle] }}
-            {...messageTextProps}
-          />
-        )
-      }
-      {children}
+    <View style={[stylesCommon.fill, styles.wrapper]}>
+      <View style={[styles.container, containerStyle]}>
+        {
+          !!currentMessage.text && (
+            <MessageText
+              currentMessage={currentMessage}
+              customTextStyle={[styles.text, textStyle]}
+              position='left'
+              containerStyle={{ left: [styles.messageContainer, messageContainerStyle] }}
+              {...messageTextProps}
+            />
+          )
+        }
+        {children}
+      </View>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    marginVertical: 5,
+    marginHorizontal: 10,
+  },
   container: {
+    maxWidth: '70%',
     borderRadius: 20,
     borderWidth: 1,
     borderColor: 'rgba(0,0,0,0.1)',
     paddingHorizontal: 10,
     paddingVertical: 10,
     backgroundColor: 'rgba(0,0,0,0.05)',
-    marginVertical: 5,
-    marginHorizontal: 10,
-    alignItems: 'flex-end',
   },
   messageContainer: {
     marginVertical: 0,
@@ -69,5 +74,6 @@ const styles = StyleSheet.create({
     backgroundColor: Color.backgroundTransparent,
     fontSize: 12,
     fontWeight: '300',
+    textAlign: 'center',
   },
 })

package/src/__tests__/MessageReply.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { MessageReply } from '../components/MessageReply'
+import { IMessage, ReplyMessage } from '../Models'
+
+const replyMessage: ReplyMessage = {
+  _id: 'reply-1',
+  text: 'Original message text',
+  user: {
+    _id: 2,
+    name: 'John Doe',
+  },
+}
+
+const currentMessage: IMessage = {
+  _id: 'msg-1',
+  text: 'Reply text',
+  createdAt: new Date(),
+  user: {
+    _id: 1,
+    name: 'Jane Doe',
+  },
+  replyMessage,
+}
+
+it('should render <MessageReply /> and compare with snapshot', () => {
+  const { toJSON } = render(
+    <MessageReply
+      replyMessage={replyMessage}
+      currentMessage={currentMessage}
+      position='left'
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})
+
+it('should render <MessageReply /> on right position and compare with snapshot', () => {
+  const currentMessageFromCurrentUser: IMessage = {
+    ...currentMessage,
+    user: replyMessage.user,
+  }
+
+  const { toJSON } = render(
+    <MessageReply
+      replyMessage={replyMessage}
+      currentMessage={currentMessageFromCurrentUser}
+      position='right'
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})

package/src/__tests__/ReplyPreview.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { ReplyPreview } from '../components/ReplyPreview'
+import { ReplyMessage } from '../Models'
+
+const replyMessage: ReplyMessage = {
+  _id: 'reply-1',
+  text: 'Original message to reply to',
+  user: {
+    _id: 2,
+    name: 'John Doe',
+  },
+}
+
+it('should render <ReplyPreview /> and compare with snapshot', () => {
+  const { toJSON } = render(
+    <ReplyPreview
+      replyMessage={replyMessage}
+      onClearReply={() => {}}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})
+
+it('should render <ReplyPreview /> with image and compare with snapshot', () => {
+  const replyWithImage: ReplyMessage = {
+    ...replyMessage,
+    image: 'https://example.com/image.jpg',
+  }
+
+  const { toJSON } = render(
+    <ReplyPreview
+      replyMessage={replyWithImage}
+      onClearReply={() => {}}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
+})