react-native-gifted-chat 3.3.0 → 3.3.2

package/README.md

@@ -120,18 +120,15 @@ Follow the [react-native-reanimated installation guide](https://docs.swmansion.c
 
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
-import { Platform } from 'react-native'
 import { GiftedChat } from 'react-native-gifted-chat'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useHeaderHeight } from '@react-navigation/elements'
 
 export function Example() {
   const [messages, setMessages] = useState([])
-  const insets = useSafeAreaInsets()
 
-  // If you have a tab bar, include its height
-  const tabbarHeight = 50
-  const keyboardTopToolbarHeight = Platform.select({ ios: 44, default: 0 })
-  const keyboardVerticalOffset = insets.bottom + tabbarHeight + keyboardTopToolbarHeight
+  // keyboardVerticalOffset = distance from screen top to GiftedChat container
+  // useHeaderHeight() returns status bar + navigation header height
+  const headerHeight = useHeaderHeight()
 
   useEffect(() => {
     setMessages([
@@ -161,8 +158,7 @@ export function Example() {
       user={{
         _id: 1,
       }}
-
-      keyboardAvoidingViewProps={{ keyboardVerticalOffset }}
+      keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}
     />
   )
 }
@@ -227,10 +223,42 @@ interface User {
 - **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling. Default values:
   - `statusBarTranslucent: true` - Required on Android for correct keyboard height calculation when status bar is translucent (edge-to-edge mode)
   - `navigationBarTranslucent: true` - Required on Android for correct keyboard height calculation when navigation bar is translucent (edge-to-edge mode)
-- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view). Use `keyboardVerticalOffset` to account for headers or iOS predictive text bar (~50pt).
+- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view). See **keyboardVerticalOffset** below for proper keyboard handling.
 - **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
 - **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 
+#### Understanding `keyboardVerticalOffset`
+
+The [`keyboardVerticalOffset`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#keyboardverticaloffset) tells the KeyboardAvoidingView where its container starts relative to the top of the screen. This is essential when GiftedChat is not positioned at the very top of the screen (e.g., when you have a navigation header).
+
+**Default value:** `insets.top` (status bar height from `useSafeAreaInsets()`). This works correctly only when GiftedChat fills the entire screen without a navigation header. If you have a navigation header, you need to pass the correct offset via `keyboardAvoidingViewProps`.
+
+**What the value means:** The offset equals the distance (in points) from the top of the screen to the top of your GiftedChat container. This typically includes:
+- Status bar height
+- Navigation header height (on iOS, `useHeaderHeight()` already includes status bar)
+
+**How to use:**
+
+```jsx
+import { useHeaderHeight } from '@react-navigation/elements'
+
+function ChatScreen() {
+  // useHeaderHeight() returns status bar + navigation header height on iOS
+  const headerHeight = useHeaderHeight()
+
+  return (
+    <GiftedChat
+      keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}
+      // ... other props
+    />
+  )
+}
+```
+
+> **Note:** `useHeaderHeight()` requires your chat component to be rendered inside a proper navigation screen (not conditional rendering). If it returns `0`, ensure your chat screen is a real navigation screen with a visible header.
+
+**Why this matters:** Without the correct offset, the keyboard may overlap the input field or leave extra space. The KeyboardAvoidingView uses this value to calculate how much to shift the content when the keyboard appears.
+
 ### Text Input & Composer
 
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state. Useful for managing text state outside of GiftedChat (e.g. with Redux). Don't forget to implement `textInputProps.onChangeText` to update the text state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -92,11 +92,11 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-keyboard-controller": "1.18.5",
-    "react-native-reanimated": "~4.1.1",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-keyboard-controller": "1.20.6",
+    "react-native-reanimated": "~4.2.1",
     "react-native-safe-area-context": "~5.6.2",
-    "react-native-worklets": "0.5.1",
+    "react-native-worklets": "0.7.2",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.3"
   },

package/src/GiftedChat/index.tsx

@@ -8,7 +8,6 @@ import React, {
   RefObject,
 } from 'react'
 import {
-  Platform,
   View,
   LayoutChangeEvent,
   useColorScheme,
@@ -21,7 +20,7 @@ import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler'
 import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
@@ -34,23 +33,6 @@ 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>
 ) {
@@ -92,6 +74,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
+  const insets = useSafeAreaInsets()
+
   const messagesContainerRef = useMemo(
     () => props.messagesContainerRef || createRef<AnimatedList<TMessage>>(),
     [props.messagesContainerRef]
@@ -344,23 +328,16 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {/* @ts-expect-error */}
           <KeyboardAvoidingView
-            behavior={DEFAULT_KEYBOARD_BEHAVIOR}
-            keyboardVerticalOffset={DEFAULT_KEYBOARD_VERTICAL_OFFSET}
+            behavior='translate-with-padding'
+            keyboardVerticalOffset={insets.top}
             style={stylesCommon.fill}
             {...props.keyboardAvoidingViewProps}
           >
-            <View style={stylesCommon.fill}>
-              {isInitialized
-                ? (
-                  <>
-                    {renderMessages}
-                    {inputToolbarFragment}
-                  </>
-                )
-                : (
-                  renderComponentOrElement(renderLoading, {})
-                )}
+            <View style={[stylesCommon.fill, !isInitialized && styles.hidden]}>
+              {renderMessages}
+              {inputToolbarFragment}
             </View>
+            {!isInitialized && renderComponentOrElement(renderLoading, {})}
           </KeyboardAvoidingView>
         </View>
       </ActionSheetProvider>

package/src/GiftedChat/styles.ts

@@ -7,4 +7,7 @@ export default StyleSheet.create({
   contentContainer: {
     overflow: 'hidden',
   },
+  hidden: {
+    opacity: 0,
+  },
 })

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

@@ -34,8 +34,8 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
         testID="GC_WRAPPER"
       >
         <View
-          behavior="padding"
-          keyboardVerticalOffset={50}
+          behavior="translate-with-padding"
+          keyboardVerticalOffset={0}
           style={
             {
               "flex": 1,
@@ -44,9 +44,14 @@ exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "flex": 1,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
             }
           />
         </View>
@@ -90,8 +95,8 @@ exports[`should render <GiftedChat/> with dark colorScheme and compare with snap
         testID="GC_WRAPPER"
       >
         <View
-          behavior="padding"
-          keyboardVerticalOffset={50}
+          behavior="translate-with-padding"
+          keyboardVerticalOffset={0}
           style={
             {
               "flex": 1,
@@ -100,9 +105,14 @@ exports[`should render <GiftedChat/> with dark colorScheme and compare with snap
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "flex": 1,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
             }
           />
         </View>
@@ -146,8 +156,8 @@ exports[`should render <GiftedChat/> with light colorScheme and compare with sna
         testID="GC_WRAPPER"
       >
         <View
-          behavior="padding"
-          keyboardVerticalOffset={50}
+          behavior="translate-with-padding"
+          keyboardVerticalOffset={0}
           style={
             {
               "flex": 1,
@@ -156,9 +166,14 @@ exports[`should render <GiftedChat/> with light colorScheme and compare with sna
         >
           <View
             style={
-              {
-                "flex": 1,
-              }
+              [
+                {
+                  "flex": 1,
+                },
+                {
+                  "opacity": 0,
+                },
+              ]
             }
           />
         </View>

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

@@ -73,28 +73,6 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
       />
     </View>
     <View
-      collapsable={false}
-      jestAnimatedProps={
-        {
-          "value": {},
-        }
-      }
-      jestAnimatedStyle={
-        {
-          "value": {
-            "opacity": 0,
-          },
-        }
-      }
-      jestInlineStyle={
-        [
-          {
-            "justifyContent": "flex-end",
-          },
-          undefined,
-        ]
-      }
-      nativeID="0"
       pointerEvents="none"
       style={
         [

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

@@ -34,38 +34,6 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
     visible={false}
   >
     <View
-      collapsable={false}
-      jestAnimatedProps={
-        {
-          "value": {},
-        }
-      }
-      jestAnimatedStyle={
-        {
-          "value": {
-            "borderRadius": 40,
-            "opacity": 0,
-            "transform": [
-              {
-                "scale": 0.9,
-              },
-            ],
-          },
-        }
-      }
-      jestInlineStyle={
-        [
-          {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "zIndex": 1000,
-          },
-        ]
-      }
-      nativeID="0"
       style={
         [
           {
@@ -98,35 +66,6 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
         }
       >
         <View
-          collapsable={false}
-          jestAnimatedProps={
-            {
-              "value": {},
-            }
-          }
-          jestAnimatedStyle={
-            {
-              "value": {
-                "borderRadius": 40,
-              },
-            }
-          }
-          jestInlineStyle={
-            [
-              {
-                "flex": 1,
-              },
-              {
-                "backgroundColor": "#000",
-                "overflow": "hidden",
-              },
-              {
-                "paddingBottom": 0,
-                "paddingTop": 0,
-              },
-            ]
-          }
-          nativeID="1"
           style={
             [
               {
@@ -222,35 +161,6 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
                 }
               >
                 <View
-                  collapsable={false}
-                  jestAnimatedProps={
-                    {
-                      "value": {},
-                    }
-                  }
-                  jestAnimatedStyle={
-                    {
-                      "value": {
-                        "transform": [
-                          {
-                            "translateX": 0,
-                          },
-                          {
-                            "translateY": 0,
-                          },
-                          {
-                            "scale": 1,
-                          },
-                        ],
-                      },
-                    }
-                  }
-                  jestInlineStyle={
-                    [
-                      undefined,
-                    ]
-                  }
-                  nativeID="2"
                   onLayout={[Function]}
                   style={
                     [

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

@@ -2,44 +2,17 @@
 
 exports[`should render <ReplyPreview /> and compare with snapshot 1`] = `
 <View
-  collapsable={false}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "height": 0,
-        "opacity": 0,
-        "transform": [
-          {
-            "translateY": 10,
-          },
-        ],
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      {
-        "overflow": "hidden",
-      },
-    ]
-  }
-  nativeID="0"
   style={
     [
       {
         "overflow": "hidden",
       },
       {
-        "height": 0,
-        "opacity": 0,
+        "height": undefined,
+        "opacity": undefined,
         "transform": [
           {
-            "translateY": 10,
+            "translateY": undefined,
           },
         ],
       },
@@ -194,44 +167,17 @@ exports[`should render <ReplyPreview /> and compare with snapshot 1`] = `
 
 exports[`should render <ReplyPreview /> with image and compare with snapshot 1`] = `
 <View
-  collapsable={false}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "height": 0,
-        "opacity": 0,
-        "transform": [
-          {
-            "translateY": 10,
-          },
-        ],
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      {
-        "overflow": "hidden",
-      },
-    ]
-  }
-  nativeID="1"
   style={
     [
       {
         "overflow": "hidden",
       },
       {
-        "height": 0,
-        "opacity": 0,
+        "height": undefined,
+        "opacity": undefined,
         "transform": [
           {
-            "translateY": 10,
+            "translateY": undefined,
           },
         ],
       },

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

@@ -2,28 +2,6 @@
 
 exports[`Send should always render <Send /> and compare with snapshot 1`] = `
 <View
-  collapsable={false}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 0,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      {
-        "justifyContent": "flex-end",
-      },
-      undefined,
-    ]
-  }
-  nativeID="1"
   pointerEvents="auto"
   style={
     [
@@ -73,28 +51,6 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
 
 exports[`Send should not render <Send /> and compare with snapshot 1`] = `
 <View
-  collapsable={false}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 0,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      {
-        "justifyContent": "flex-end",
-      },
-      undefined,
-    ]
-  }
-  nativeID="0"
   pointerEvents="none"
   style={
     [
@@ -144,28 +100,6 @@ exports[`Send should not render <Send /> and compare with snapshot 1`] = `
 
 exports[`Send should render <Send /> where there is input and compare with snapshot 1`] = `
 <View
-  collapsable={false}
-  jestAnimatedProps={
-    {
-      "value": {},
-    }
-  }
-  jestAnimatedStyle={
-    {
-      "value": {
-        "opacity": 0,
-      },
-    }
-  }
-  jestInlineStyle={
-    [
-      {
-        "justifyContent": "flex-end",
-      },
-      undefined,
-    ]
-  }
-  nativeID="2"
   pointerEvents="auto"
   style={
     [

package/src/utils.ts

@@ -27,6 +27,11 @@ export function renderComponentOrElement<TProps extends Record<string, any>>(
     return (component as (props: TProps) => React.ReactNode)(props)
   }
 
+  // Check for React.memo or React.forwardRef wrapped components
+  // These have $$typeof property and should be rendered with createElement
+  if (typeof component === 'object' && component !== null && '$$typeof' in component)
+    return React.createElement(component as React.ComponentType<TProps>, props as any)
+
   // If it's neither, return it as-is
   return component
 }