react-native-gifted-chat 3.2.3 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -29,8 +29,8 @@
     "src"
   ],
   "scripts": {
-    "lint": "yarn eslint src",
-    "lint:fix": "yarn eslint --cache --fix",
+    "lint": "yarn eslint src example",
+    "lint:fix": "yarn eslint --cache --fix src example",
     "prepublishOnly": "yarn lint && yarn test",
     "start": "cd example && expo start",
     "start:web": "cd example && expo start -w --dev",
@@ -52,7 +52,7 @@
     "@types/lodash.isequal": "^4.5.8",
     "dayjs": "^1.11.19",
     "lodash.isequal": "^4.5.0",
-    "react-native-zoom-reanimated": "^1.4.10"
+    "react-native-zoom-reanimated": "^1.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -92,10 +92,11 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-gesture-handler": "^2.29.1",
-    "react-native-keyboard-controller": "^1.19.6",
-    "react-native-reanimated": "^3.19.4",
-    "react-native-safe-area-context": "^5.6.2",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-keyboard-controller": "1.18.5",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-worklets": "0.5.1",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.3"
   },

package/src/Bubble/index.tsx

@@ -5,6 +5,8 @@ import {
 } from 'react-native'
 
 import { Text } from 'react-native-gesture-handler'
+
+import { MessageReply } from '../components/MessageReply'
 import { useChatContext } from '../GiftedChatContext'
 import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
@@ -12,10 +14,8 @@ import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
 import { IMessage } from '../Models'
 import { QuickReplies } from '../QuickReplies'
-
 import { getStyleWithPosition } from '../styles'
 import { Time } from '../Time'
-
 import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 import styles from './styles'
 import { BubbleProps, RenderMessageTextProps } from './types'
@@ -319,10 +319,41 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
     return null
   }, [props])
 
+  const renderMessageReply = useCallback(() => {
+    if (!currentMessage?.replyMessage)
+      return null
+
+    const { messageReply } = props
+
+    const messageReplyProps = {
+      replyMessage: currentMessage.replyMessage,
+      currentMessage,
+      position,
+      onPress: messageReply?.onPress,
+      containerStyle: position === 'left'
+        ? messageReply?.containerStyleLeft ?? messageReply?.containerStyle
+        : messageReply?.containerStyleRight ?? messageReply?.containerStyle,
+      textStyle: position === 'left'
+        ? messageReply?.textStyleLeft ?? messageReply?.textStyle
+        : messageReply?.textStyleRight ?? messageReply?.textStyle,
+      imageStyle: messageReply?.imageStyle,
+    }
+
+    if (messageReply?.renderMessageReply)
+      return renderComponentOrElement(messageReply.renderMessageReply, messageReplyProps)
+
+    return <MessageReply {...messageReplyProps} />
+  }, [
+    props,
+    currentMessage,
+    position,
+  ])
+
   const renderBubbleContent = useCallback(() => {
     return (
       <>
         {!props.isCustomViewBottom && renderCustomView()}
+        {renderMessageReply()}
         {renderMessageImage()}
         {renderMessageVideo()}
         {renderMessageAudio()}
@@ -331,6 +362,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       </>
     )
   }, [
+    renderMessageReply,
     renderCustomView,
     renderMessageImage,
     renderMessageVideo,

package/src/Bubble/types.ts

@@ -5,6 +5,8 @@ import {
   TextStyle,
   Pressable,
 } from 'react-native'
+
+import { MessageReplyProps } from '../components/MessageReply'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
 import {
@@ -12,11 +14,13 @@ import {
   IMessage,
   LeftRightStyle,
   Reply,
+  ReplyMessage,
   Omit,
   MessageVideoProps,
   MessageAudioProps,
 } from '../Models'
 import { QuickRepliesProps } from '../QuickReplies'
+import { MessageReplyStyleProps } from '../Reply'
 import { TimeProps } from '../Time'
 
 
@@ -44,6 +48,13 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
 > &
   MessageTextProps<TMessage>
 
+/** Props for message reply functionality in bubble */
+export interface BubbleReplyProps<TMessage extends IMessage> extends MessageReplyStyleProps {
+  /** Custom render for message reply; rendered on top of message content */
+  renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode
+  /** Callback when message reply is pressed */
+  onPress?: (replyMessage: ReplyMessage) => void
+}
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -71,13 +82,13 @@ export interface BubbleProps<TMessage extends IMessage> {
   onLongPressMessage?: (context?: unknown, message?: unknown) => void
   onQuickReply?: (replies: Reply[]) => void
   renderMessageImage?: (
-    props: RenderMessageImageProps<TMessage>,
+    props: RenderMessageImageProps<TMessage>
   ) => React.ReactNode
   renderMessageVideo?: (
-    props: RenderMessageVideoProps<TMessage>,
+    props: RenderMessageVideoProps<TMessage>
   ) => React.ReactNode
   renderMessageAudio?: (
-    props: RenderMessageAudioProps<TMessage>,
+    props: RenderMessageAudioProps<TMessage>
   ) => React.ReactNode
   renderMessageText?: (props: RenderMessageTextProps<TMessage>) => React.ReactNode
   renderCustomView?: (bubbleProps: BubbleProps<TMessage>) => React.ReactNode
@@ -86,6 +97,8 @@ export interface BubbleProps<TMessage extends IMessage> {
   renderUsername?: (user?: TMessage['user']) => React.ReactNode
   renderQuickReplySend?: () => React.ReactNode
   renderQuickReplies?: (
-    quickReplies: QuickRepliesProps<TMessage>,
+    quickReplies: QuickRepliesProps<TMessage>
   ) => React.ReactNode
+  /** Message reply configuration */
+  messageReply?: BubbleReplyProps<TMessage>
 }

package/src/Day/index.tsx

@@ -25,7 +25,7 @@ export function Day ({
   createdAt,
   containerStyle,
   wrapperStyle,
-  textStyle,
+  textProps,
 }: DayProps) {
   const { getLocale } = useChatContext()
 
@@ -54,7 +54,7 @@ export function Day ({
   return (
     <View style={[stylesCommon.centerItems, styles.container, containerStyle]}>
       <View style={[styles.wrapper, wrapperStyle]}>
-        <Text style={[styles.text, textStyle]}>
+        <Text {...textProps} style={[styles.text, textProps?.style]}>
           {dateStr}
         </Text>
       </View>

package/src/Day/types.ts

@@ -1,7 +1,7 @@
 import {
   StyleProp,
   ViewStyle,
-  TextStyle,
+  TextProps,
 } from 'react-native'
 
 export interface DayProps {
@@ -10,5 +10,6 @@ export interface DayProps {
   dateFormatCalendar?: object
   containerStyle?: StyleProp<ViewStyle>
   wrapperStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
+  /** Props to pass to the Text component (e.g., style, allowFontScaling, numberOfLines) */
+  textProps?: Partial<TextProps>
 }

package/src/GiftedChat/index.tsx

@@ -8,6 +8,7 @@ import React, {
   RefObject,
 } from 'react'
 import {
+  Platform,
   View,
   LayoutChangeEvent,
   useColorScheme,
@@ -25,7 +26,7 @@ import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
 import { MessagesContainer, AnimatedList } from '../MessagesContainer'
-import { IMessage } from '../Models'
+import { IMessage, ReplyMessage } from '../Models'
 import stylesCommon from '../styles'
 import { renderComponentOrElement } from '../utils'
 import styles from './styles'
@@ -33,6 +34,23 @@ import { GiftedChatProps } from './types'
 
 dayjs.extend(localizedFormat)
 
+/**
+ * Default keyboard vertical offset values (similar to Stream Chat SDK)
+ * iOS: Compensates for predictive/suggestion text bar (~44-50pt) and headers
+ * Android: Negative offset to account for navigation bar in edge-to-edge mode
+ */
+const DEFAULT_KEYBOARD_VERTICAL_OFFSET = Platform.select({
+  ios: 50,
+  android: 0,
+  default: 0,
+})
+
+const DEFAULT_KEYBOARD_BEHAVIOR = Platform.select({
+  ios: 'padding' as const,
+  android: 'padding' as const,
+  default: 'padding' as const,
+})
+
 function GiftedChat<TMessage extends IMessage = IMessage> (
   props: GiftedChatProps<TMessage>
 ) {
@@ -56,8 +74,19 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     renderChatFooter,
     renderInputToolbar,
     isInverted = true,
+
+    // Reply props
+    reply,
   } = props
 
+  // Extract reply props for internal use
+  const replyMessageProp = reply?.message
+  const onClearReply = reply?.onClear
+  const onSwipeToReply = reply?.swipe?.onSwipe
+  const renderReplyPreview = reply?.renderPreview
+  const replyPreviewContainerStyle = reply?.previewStyle?.containerStyle
+  const replyPreviewTextStyle = reply?.previewStyle?.textStyle
+
   const systemColorScheme = useColorScheme()
   const colorScheme = colorSchemeProp !== undefined ? colorSchemeProp : systemColorScheme
 
@@ -75,6 +104,10 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
   const [text, setText] = useState<string | undefined>(() => props.text || '')
+  const [internalReplyMessage, setInternalReplyMessage] = useState<ReplyMessage | null>(null)
+
+  // Use controlled or uncontrolled reply state
+  const replyMessage = replyMessageProp !== undefined ? replyMessageProp : internalReplyMessage
 
   const getTextFromProp = useCallback(
     (fallback: string) => {
@@ -104,6 +137,31 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [isInverted, messagesContainerRef]
   )
 
+  const handleSwipeToReply = useCallback(
+    (message: TMessage) => {
+      if (replyMessageProp === undefined)
+        // Uncontrolled mode: manage state internally
+        setInternalReplyMessage({
+          _id: message._id,
+          text: message.text,
+          user: message.user,
+          image: message.image,
+          audio: message.audio,
+        })
+
+      onSwipeToReply?.(message)
+    },
+    [replyMessageProp, onSwipeToReply]
+  )
+
+  const clearReply = useCallback(() => {
+    if (replyMessageProp === undefined)
+      // Uncontrolled mode: manage state internally
+      setInternalReplyMessage(null)
+
+    onClearReply?.()
+  }, [replyMessageProp, onClearReply])
+
   const renderMessages = useMemo(() => {
     if (!isInitialized)
       return null
@@ -118,6 +176,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
           messages={messages}
           forwardRef={messagesContainerRef}
           isTyping={isTyping}
+          reply={{
+            ...reply,
+            swipe: reply?.swipe ? {
+              ...reply.swipe,
+              onSwipe: handleSwipeToReply,
+            } : undefined,
+          }}
         />
         {renderComponentOrElement(renderChatFooter, {})}
       </View>
@@ -130,6 +195,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInverted,
     messagesContainerRef,
     renderChatFooter,
+    reply,
+    handleSwipeToReply,
   ])
 
   const notifyInputTextReset = useCallback(() => {
@@ -159,17 +226,22 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
           user: user!,
           createdAt: new Date(),
           _id: messageIdGenerator?.(),
+          // Attach reply message if exists
+          ...(replyMessage ? { replyMessage } : {}),
         }
       })
 
       if (shouldResetInputToolbar === true)
         resetInputToolbar()
 
+      // Clear reply after sending
+      clearReply()
+
       onSend?.(newMessages)
 
       setTimeout(() => scrollToBottom(), 10)
     },
-    [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
+    [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom, replyMessage, clearReply]
   )
 
   const _onChangeText = useCallback(
@@ -214,6 +286,12 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         onChangeText: _onChangeText,
         ref: textInputRef,
       },
+      // Reply preview props
+      replyMessage,
+      onClearReply: clearReply,
+      renderReplyPreview,
+      replyPreviewContainerStyle,
+      replyPreviewTextStyle,
     }
 
     if (renderInputToolbar)
@@ -230,6 +308,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     textInputRef,
     textInputProps,
     _onChangeText,
+    replyMessage,
+    clearReply,
+    renderReplyPreview,
+    replyPreviewContainerStyle,
+    replyPreviewTextStyle,
   ])
 
   const contextValues = useMemo(
@@ -254,29 +337,32 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   return (
     <GiftedChatContext.Provider value={contextValues}>
       <ActionSheetProvider ref={actionSheetRef}>
-        {/* @ts-expect-error */}
-        <KeyboardAvoidingView
-          behavior='padding'
-          style={stylesCommon.fill}
-          {...props.keyboardAvoidingViewProps}
+        <View
+          testID={TEST_ID.WRAPPER}
+          style={[stylesCommon.fill, styles.contentContainer]}
+          onLayout={onInitialLayoutViewLayout}
         >
-          <View
-            testID={TEST_ID.WRAPPER}
-            style={[stylesCommon.fill, styles.contentContainer]}
-            onLayout={onInitialLayoutViewLayout}
+          {/* @ts-expect-error */}
+          <KeyboardAvoidingView
+            behavior={DEFAULT_KEYBOARD_BEHAVIOR}
+            keyboardVerticalOffset={DEFAULT_KEYBOARD_VERTICAL_OFFSET}
+            style={stylesCommon.fill}
+            {...props.keyboardAvoidingViewProps}
           >
-            {isInitialized
-              ? (
-                <>
-                  {renderMessages}
-                  {inputToolbarFragment}
-                </>
-              )
-              : (
-                renderComponentOrElement(renderLoading, {})
-              )}
-          </View>
-        </KeyboardAvoidingView>
+            <View style={stylesCommon.fill}>
+              {isInitialized
+                ? (
+                  <>
+                    {renderMessages}
+                    {inputToolbarFragment}
+                  </>
+                )
+                : (
+                  renderComponentOrElement(renderLoading, {})
+                )}
+            </View>
+          </KeyboardAvoidingView>
+        </View>
       </ActionSheetProvider>
     </GiftedChatContext.Provider>
   )

package/src/GiftedChat/types.ts

@@ -9,6 +9,7 @@ import {
   ActionSheetOptions,
 } from '@expo/react-native-action-sheet'
 import { KeyboardProvider, KeyboardAvoidingViewProps } from 'react-native-keyboard-controller'
+
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
@@ -25,11 +26,12 @@ import {
   User,
 } from '../Models'
 import { QuickRepliesProps } from '../QuickReplies'
+import { ReplyProps } from '../Reply'
 import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
 
-export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessagesContainerProps<TMessage>> {
+export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Omit<MessagesContainerProps<TMessage>, 'messageReplyContainerStyle'>> {
   /* Messages container ref */
   messagesContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
@@ -85,7 +87,7 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   actionSheet?: () => {
     showActionSheetWithOptions: (
       options: ActionSheetOptions,
-      callback: (buttonIndex: number) => void | Promise<void>,
+      callback: (buttonIndex: number) => void | Promise<void>
     ) => void
   }
   /* Callback when a message avatar is tapped */
@@ -140,11 +142,15 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   /* Extra props to be passed to the MessageText component */
   messageTextProps?: Partial<MessageTextProps<TMessage>>
   renderQuickReplies?: (
-    quickReplies: QuickRepliesProps<TMessage>,
+    quickReplies: QuickRepliesProps<TMessage>
   ) => React.ReactNode
   renderQuickReplySend?: () => React.ReactNode
   keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
+  /** Props for KeyboardAvoidingView. Use `keyboardVerticalOffset` to account for headers or iOS predictive text bar (~44pt). */
   keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
   /** Enable animated day label that appears on scroll; default is true */
   isDayAnimationEnabled?: boolean
+
+  /** Reply functionality configuration */
+  reply?: ReplyProps<TMessage>
 }

package/src/InputToolbar.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { StyleSheet, View, StyleProp, ViewStyle, TextStyle } from 'react-native'
 
 import { Actions, ActionsProps } from './Actions'
 import { Color } from './Color'
+import { ReplyPreview, ReplyPreviewProps } from './components/ReplyPreview'
 import { Composer, ComposerProps } from './Composer'
 import { useColorScheme } from './hooks/useColorScheme'
-import { IMessage } from './Models'
+import { IMessage, ReplyMessage } from './Models'
 import { Send, SendProps } from './Send'
-import { getColorSchemeStyle } from './styles'
 import { renderComponentOrElement } from './utils'
 
+export type { ReplyPreviewProps } from './components/ReplyPreview'
+
 export interface InputToolbarProps<TMessage extends IMessage> {
   actions?: Array<{ title: string, action: () => void }>
   actionSheetOptionTintColor?: string
@@ -22,6 +24,16 @@ export interface InputToolbarProps<TMessage extends IMessage> {
   onPressActionButton?: () => void
   icon?: () => React.ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
+  /** Reply message to show in preview */
+  replyMessage?: ReplyMessage | null
+  /** Callback to clear reply */
+  onClearReply?: () => void
+  /** Custom render for reply preview */
+  renderReplyPreview?: (props: ReplyPreviewProps) => React.ReactNode
+  /** Style for reply preview container */
+  replyPreviewContainerStyle?: StyleProp<ViewStyle>
+  /** Style for reply preview text */
+  replyPreviewTextStyle?: StyleProp<TextStyle>
 }
 
 export function InputToolbar<TMessage extends IMessage = IMessage> (
@@ -38,10 +50,26 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     icon,
     wrapperStyle,
     containerStyle,
+    replyMessage,
+    onClearReply,
+    renderReplyPreview: renderReplyPreviewProp,
+    replyPreviewContainerStyle,
+    replyPreviewTextStyle,
   } = props
 
   const colorScheme = useColorScheme()
 
+  const containerStyles = useMemo(() => [
+    styles.container,
+    colorScheme === 'dark' && styles.container_dark,
+    containerStyle,
+  ], [colorScheme, containerStyle])
+
+  const primaryStyles = useMemo(() => [
+    styles.primary,
+    props.primaryStyle,
+  ], [props.primaryStyle])
+
   const actionsFragment = useMemo(() => {
     const actionsProps = {
       onPressActionButton,
@@ -92,11 +120,37 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     return renderComponentOrElement(renderAccessory, props)
   }, [renderAccessory, props])
 
+  const handleClearReply = useCallback(() => {
+    onClearReply?.()
+  }, [onClearReply])
+
+  const replyPreviewFragment = useMemo(() => {
+    if (!replyMessage)
+      return null
+
+    const replyPreviewProps: ReplyPreviewProps = {
+      replyMessage,
+      onClearReply: handleClearReply,
+      containerStyle: replyPreviewContainerStyle,
+      textStyle: replyPreviewTextStyle,
+    }
+
+    if (renderReplyPreviewProp)
+      return renderComponentOrElement(renderReplyPreviewProp, replyPreviewProps)
+
+    return <ReplyPreview {...replyPreviewProps} />
+  }, [
+    replyMessage,
+    handleClearReply,
+    renderReplyPreviewProp,
+    replyPreviewContainerStyle,
+    replyPreviewTextStyle,
+  ])
+
   return (
-    <View
-      style={[getColorSchemeStyle(styles, 'container', colorScheme), containerStyle]}
-    >
-      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), props.primaryStyle]}>
+    <View style={containerStyles}>
+      {replyPreviewFragment}
+      <View style={primaryStyles}>
         {actionsFragment}
         {composerFragment}
         {sendFragment}