react-native-gifted-chat 3.2.3 → 3.3.0

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/__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()
+})

package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -20,27 +20,36 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
       }
     >
       <View
-        behavior="padding"
+        onLayout={[Function]}
         style={
-          {
-            "flex": 1,
-          }
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
+        testID="GC_WRAPPER"
       >
         <View
-          onLayout={[Function]}
+          behavior="padding"
+          keyboardVerticalOffset={50}
           style={
-            [
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <View
+            style={
               {
                 "flex": 1,
-              },
-              {
-                "overflow": "hidden",
-              },
-            ]
-          }
-          testID="GC_WRAPPER"
-        />
+              }
+            }
+          />
+        </View>
       </View>
     </View>
   </KeyboardProvider>
@@ -67,27 +76,36 @@ exports[`should render <GiftedChat/> with dark colorScheme and compare with snap
       }
     >
       <View
-        behavior="padding"
+        onLayout={[Function]}
         style={
-          {
-            "flex": 1,
-          }
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
+        testID="GC_WRAPPER"
       >
         <View
-          onLayout={[Function]}
+          behavior="padding"
+          keyboardVerticalOffset={50}
           style={
-            [
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <View
+            style={
               {
                 "flex": 1,
-              },
-              {
-                "overflow": "hidden",
-              },
-            ]
-          }
-          testID="GC_WRAPPER"
-        />
+              }
+            }
+          />
+        </View>
       </View>
     </View>
   </KeyboardProvider>
@@ -114,27 +132,36 @@ exports[`should render <GiftedChat/> with light colorScheme and compare with sna
       }
     >
       <View
-        behavior="padding"
+        onLayout={[Function]}
         style={
-          {
-            "flex": 1,
-          }
+          [
+            {
+              "flex": 1,
+            },
+            {
+              "overflow": "hidden",
+            },
+          ]
         }
+        testID="GC_WRAPPER"
       >
         <View
-          onLayout={[Function]}
+          behavior="padding"
+          keyboardVerticalOffset={50}
           style={
-            [
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <View
+            style={
               {
                 "flex": 1,
-              },
-              {
-                "overflow": "hidden",
-              },
-            ]
-          }
-          testID="GC_WRAPPER"
-        />
+              }
+            }
+          />
+        </View>
       </View>
     </View>
   </KeyboardProvider>

package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap

@@ -4,14 +4,12 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
 <View
   style={
     [
-      [
-        {
-          "backgroundColor": "#fff",
-          "borderTopColor": "#b2b2b2",
-          "borderTopWidth": 0.5,
-        },
-        undefined,
-      ],
+      {
+        "backgroundColor": "#fff",
+        "borderTopColor": "#b2b2b2",
+        "borderTopWidth": 0.5,
+      },
+      false,
       undefined,
     ]
   }
@@ -19,13 +17,10 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
   <View
     style={
       [
-        [
-          {
-            "alignItems": "flex-end",
-            "flexDirection": "row",
-          },
-          undefined,
-        ],
+        {
+          "alignItems": "flex-end",
+          "flexDirection": "row",
+        },
         undefined,
       ]
     }
@@ -99,6 +94,7 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
           undefined,
         ]
       }
+      nativeID="0"
       pointerEvents="none"
       style={
         [

package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap

@@ -65,6 +65,7 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
           },
         ]
       }
+      nativeID="0"
       style={
         [
           {
@@ -125,6 +126,7 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
               },
             ]
           }
+          nativeID="1"
           style={
             [
               {
@@ -196,24 +198,27 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
           >
             <View
               style={
-                {
-                  "flex": 1,
-                }
+                [
+                  {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  },
+                  undefined,
+                ]
               }
             >
               <View
                 collapsable={false}
                 onLayout={[Function]}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flex": 1,
-                      "justifyContent": "center",
-                      "overflow": "hidden",
-                    },
-                    undefined,
-                  ]
+                  {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  }
                 }
               >
                 <View
@@ -227,15 +232,15 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
                     {
                       "value": {
                         "transform": [
-                          {
-                            "scale": 1,
-                          },
                           {
                             "translateX": 0,
                           },
                           {
                             "translateY": 0,
                           },
+                          {
+                            "scale": 1,
+                          },
                         ],
                       },
                     }
@@ -245,20 +250,21 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
                       undefined,
                     ]
                   }
+                  nativeID="2"
                   onLayout={[Function]}
                   style={
                     [
                       {
                         "transform": [
-                          {
-                            "scale": 1,
-                          },
                           {
                             "translateX": 0,
                           },
                           {
                             "translateY": 0,
                           },
+                          {
+                            "scale": 1,
+                          },
                         ],
                       },
                       undefined,