react-native-gifted-chat 3.2.2 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",

package/src/Composer.tsx

@@ -49,8 +49,7 @@ export function Composer ({
   const handleChange = useCallback((event: TextInputChangeEvent) => {
     if (Platform.OS === 'web')
       // Reset height to 0 to get the correct scrollHeight
-      // @ts-expect-error - web-specific code
-      window.requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
         // @ts-expect-error - web-specific code
         event.nativeEvent.target.style.height = '0px'
         // @ts-expect-error - web-specific code

package/src/GiftedAvatar.tsx

@@ -159,7 +159,7 @@ export function GiftedAvatar (
   if (user.avatar)
     return (
       <TouchableOpacity
-        disabled={!onPress}
+        enabled={!!onPress}
         onPress={handleOnPress}
         onLongPress={handleOnLongPress}
         accessibilityRole='image'

package/src/MessageText.tsx

@@ -35,7 +35,7 @@ export type MessageTextProps<TMessage extends IMessage> = {
   stripPrefix?: boolean
 }
 
-export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
+export function MessageText<TMessage extends IMessage>({
   currentMessage,
   position = 'left',
   containerStyle,
@@ -52,7 +52,7 @@ export const MessageText: React.FC<MessageTextProps<IMessage>> = ({
   hashtagUrl,
   mentionUrl,
   stripPrefix = false,
-}) => {
+}: MessageTextProps<TMessage>) {
   const linkStyle = useMemo(() => StyleSheet.flatten([
     styles.link,
     linkStyleProp?.[position],

package/src/MessagesContainer/components/DayAnimated/index.tsx

@@ -19,7 +19,11 @@ export const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, m
   const isScrolledOnMount = useSharedValue(false)
   const isLoadingAnim = useSharedValue(isLoading)
 
-  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y))
+  const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => {
+    'worklet'
+
+    return a.y - b.y
+  }))
 
   const [createdAt, setCreatedAt] = useState<number | undefined>()
 

package/src/MessagesContainer/components/Item/index.tsx

@@ -32,28 +32,35 @@ export const useRelativeScrolledPositionToBottomOfDay = (
 
   const absoluteScrolledPositionToBottomOfDay = useAbsoluteScrolledPositionToBottomOfDay(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset)
 
-  // sorted array of days positions by y
-  const daysPositionsArray = useDerivedValue(() => {
-    return Object.values(daysPositions.value).sort((a, b) => {
-      'worklet'
-
-      return a.y - b.y
-    })
-  })
-
   // find current day position by scrolled position
   const currentDayPosition = useDerivedValue(() => {
+    'worklet'
+
+    // When createdAt is provided (called from AnimatedDayWrapper for a specific message),
+    // directly find the day position by createdAt without sorting the entire array.
+    // This avoids O(n log n) sorting and O(n) search for each message item.
     if (createdAt != null) {
-      const currentDayPosition = daysPositionsArray.value.find(day => day.createdAt === createdAt)
-      if (currentDayPosition)
-        return currentDayPosition
+      const values = Object.values(daysPositions.value)
+      for (let i = 0; i < values.length; i++)
+        if (values[i].createdAt === createdAt)
+          return values[i]
     }
 
-    return daysPositionsArray.value.find((day, index) => {
-      const dayPosition = day.y + day.height
-      return (absoluteScrolledPositionToBottomOfDay.value < dayPosition) || index === daysPositionsArray.value.length - 1
+    // Fallback: sort and search when createdAt is not provided (e.g., from DayAnimated)
+    const sortedArray = Object.values(daysPositions.value).sort((a, b) => {
+      'worklet'
+
+      return a.y - b.y
     })
-  }, [daysPositionsArray, absoluteScrolledPositionToBottomOfDay, createdAt])
+    for (let i = 0; i < sortedArray.length; i++) {
+      const day = sortedArray[i]
+      const dayPosition = day.y + day.height
+      if (absoluteScrolledPositionToBottomOfDay.value < dayPosition || i === sortedArray.length - 1)
+        return day
+    }
+
+    return undefined
+  }, [daysPositions, absoluteScrolledPositionToBottomOfDay, createdAt])
 
   const relativeScrolledPositionToBottomOfDay = useDerivedValue(() => {
     const scrolledBottomY = listHeight.value + scrolledY.value - (
@@ -97,13 +104,11 @@ const DayWrapper = <TMessage extends IMessage>(props: MessageProps<TMessage>) =>
   )
 }
 
-export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
+const AnimatedDayWrapper = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   const {
-    renderMessage: renderMessageProp,
     scrolledY,
     daysPositions,
     listHeight,
-    isDayAnimationEnabled,
     ...rest
   } = props
 
@@ -122,36 +127,52 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   }, [dayContainerHeight])
 
   const style = useAnimatedStyle(() => ({
-    opacity:
-      isDayAnimationEnabled
-        ? interpolate(
-          relativeScrolledPositionToBottomOfDay.value,
-          [
-            -dayTopOffset,
-            -0.0001,
-            0,
-            dayContainerHeight.value + dayTopOffset,
-          ],
-          [
-            0,
-            0,
-            1,
-            1,
-          ],
-          'clamp'
-        )
-        : 1,
-  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset, isDayAnimationEnabled])
+    opacity: interpolate(
+      relativeScrolledPositionToBottomOfDay.value,
+      [
+        -dayTopOffset,
+        -0.0001,
+        0,
+        dayContainerHeight.value + dayTopOffset,
+      ],
+      [
+        0,
+        0,
+        1,
+        1,
+      ],
+      'clamp'
+    ),
+  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
+
+  return (
+    <Animated.View
+      style={style}
+      onLayout={handleLayoutDayContainer}
+    >
+      <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
+    </Animated.View>
+  )
+}
+
+export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
+  const {
+    renderMessage: renderMessageProp,
+    isDayAnimationEnabled,
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    scrolledY: _scrolledY,
+    daysPositions: _daysPositions,
+    listHeight: _listHeight,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    ...rest
+  } = props
 
   return (
     // do not remove key. it helps to get correct position of the day container
     <View key={props.currentMessage._id.toString()}>
-      <Animated.View
-        style={style}
-        onLayout={handleLayoutDayContainer}
-      >
-        <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />
-      </Animated.View>
+      {isDayAnimationEnabled
+        ? <AnimatedDayWrapper<TMessage> {...props} />
+        : <DayWrapper<TMessage> {...rest as MessageProps<TMessage>} />}
       {
         renderMessageProp
           ? renderMessageProp(rest as MessageProps<TMessage>)

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'
@@ -23,8 +22,6 @@ import { MessagesContainerProps, DaysPositions } 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 = [],
@@ -114,8 +111,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 },
@@ -301,6 +298,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 +344,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         {children}
       </View>
     )
-  }, [daysPositions, isInverted])
+  }, [daysPositions, isInverted, isDayAnimationEnabled])
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
@@ -355,6 +356,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 +378,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
           return value
         })
     })
-  }, [messages, daysPositions, isInverted])
+  }, [messages, daysPositions, isInverted, isDayAnimationEnabled])
 
   return (
     <View
@@ -382,7 +387,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         isAlignedTop ? styles.containerAlignTop : stylesCommon.fill,
       ]}
     >
-      <AnimatedFlatList
+      <Animated.FlatList
         ref={forwardRef}
         keyExtractor={keyExtractor}
         data={messages}
@@ -390,6 +395,7 @@ export const MessagesContainer = <TMessage extends IMessage>(props: MessagesCont
         inverted={isInverted}
         automaticallyAdjustContentInsets={false}
         style={stylesCommon.fill}
+        contentContainerStyle={styles.messagesContainer}
         ListEmptyComponent={renderChatEmpty}
         ListFooterComponent={
           isInverted ? ListHeaderComponent : ListFooterComponent

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,10 +1,10 @@
-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, { AnimatedProps, ScrollEvent } from 'react-native-reanimated'
 
 import { DayProps } from '../Day'
 import { LoadEarlierMessagesProps } from '../LoadEarlierMessages'
@@ -12,9 +12,13 @@ import { MessageProps } from '../Message'
 import { User, IMessage, Reply } from '../Models'
 import { TypingIndicatorProps } from '../TypingIndicator/types'
 
-export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListProps<TMessage>>
+export type AnimatedListProps<TMessage extends IMessage = IMessage> = Partial<
+  Omit<AnimatedProps<FlatListProps<TMessage>>, 'onScroll'> & {
+    onScroll?: (event: ScrollEvent) => void
+  }
+>
 
-export type AnimatedList<TMessage> = FlatList<TMessage>
+export type AnimatedList<TMessage> = Animated.FlatList<TMessage>
 
 export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   extends Omit<TypingIndicatorProps, 'style'> {
@@ -25,7 +29,7 @@ export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   /** 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 */

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__/__snapshots__/SystemMessage.test.tsx.snap

@@ -10,17 +10,10 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
         "flex": 1,
       },
       {
-        "alignItems": "flex-end",
-        "backgroundColor": "rgba(0,0,0,0.05)",
-        "borderColor": "rgba(0,0,0,0.1)",
-        "borderRadius": 20,
-        "borderWidth": 1,
+        "alignItems": "center",
         "marginHorizontal": 10,
         "marginVertical": 5,
-        "paddingHorizontal": 10,
-        "paddingVertical": 10,
       },
-      undefined,
     ]
   }
 >
@@ -28,39 +21,57 @@ exports[`SystemMessage should render <SystemMessage /> and compare with snapshot
     style={
       [
         {
-          "marginHorizontal": 10,
-          "marginVertical": 5,
+          "backgroundColor": "rgba(0,0,0,0.05)",
+          "borderColor": "rgba(0,0,0,0.1)",
+          "borderRadius": 20,
+          "borderWidth": 1,
+          "maxWidth": "70%",
+          "paddingHorizontal": 10,
+          "paddingVertical": 10,
         },
-        [
-          {
-            "marginHorizontal": 0,
-            "marginVertical": 0,
-          },
-          undefined,
-        ],
+        undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         [
           {
-            "color": "black",
+            "marginHorizontal": 10,
+            "marginVertical": 5,
           },
-          undefined,
           [
             {
-              "backgroundColor": "transparent",
-              "fontSize": 12,
-              "fontWeight": "300",
+              "marginHorizontal": 0,
+              "marginVertical": 0,
             },
             undefined,
           ],
         ]
       }
     >
-      test
-    </Text>
+      <Text
+        style={
+          [
+            {
+              "color": "black",
+            },
+            undefined,
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontSize": 12,
+                "fontWeight": "300",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        test
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/CHANGELOG.md

@@ -1,364 +0,0 @@
-# Changelog
-
-## [3.2.0] - 2025-11-25
-
-### ✨ Features
-- **Custom Link Parser**: Replaced `react-native-autolink` dependency with custom link parser implementation for better control and performance
-  - Removed external dependency on `react-native-autolink`
-  - Improved link parsing with custom implementation in `linkParser.tsx`
-  - Updated `MessageText` component to use new parser
-  - Enhanced links example in example app
-
-### 🐛 Bug Fixes
-- Adjusted message bubble styles for better rendering
-- Updated test snapshots to reflect parser changes
-
-## [3.1.5] - 2025-11-25
-
-### ✨ Features
-- **Color Scheme Support**: Added `colorScheme` prop to `GiftedChat` component
-  - New `useColorScheme` hook for consistent color scheme handling
-  - Automatically adapts UI elements (Composer, InputToolbar, Send) based on color scheme
-  - Added comprehensive tests for color scheme functionality
-
-### 📝 Documentation
-- Updated README with `colorScheme` prop documentation
-
-## [3.1.4] - 2025-11-25
-
-### 🐛 Bug Fixes
-- Added left padding to `TextInput` when no accessory is present for better visual alignment
-- Adjusted input toolbar styles for improved layout
-
-## [3.1.3] - 2025-11-25
-
-### 🔧 Improvements
-- Removed unused imports for cleaner codebase
-
-## [3.1.2] - 2025-11-24
-
-### 🐛 Bug Fixes
-- Fixed message bubble styles for small messages
-- Improved rendering of compact message content
-
-### 🧪 Testing
-- Updated test snapshots
-
-## [3.1.1] - 2025-11-24
-
-### 🐛 Bug Fixes
-- Fixed Bubble component styles for better message rendering
-- Corrected style inconsistencies in message bubbles
-
-### 🧪 Testing
-- Updated test snapshots to reflect style fixes
-
-## [3.1.0] - 2025-11-24
-
-### 🔧 Improvements
-- Refactored component styles for better maintainability
-- Updated Expo Snack example with latest changes
-
-### 🧪 Testing
-- Updated test snapshots
-
-## [3.0.1] - 2025-11-24
-
-### 🐛 Bug Fixes
-- Fixed Composer auto-resize height behavior on web platform
-
-### 🧪 Testing
-- Updated test snapshots
-
-## [3.0.0] - 2025-11-23
-
-This is a major release with significant breaking changes, new features, and improvements. The library has been completely rewritten in TypeScript with improved type safety, better keyboard handling, and enhanced customization options.
-
-### 🚨 Breaking Changes
-
-#### Renamed Props (GiftedChat)
-- `onInputTextChanged` → moved to `textInputProps.onChangeText` (follows React Native naming pattern)
-- `alwaysShowSend` → `isSendButtonAlwaysVisible` (consistent boolean naming convention)
-- `onPress` → `onPressMessage` (more specific naming)
-- `onLongPress` → `onLongPressMessage` (more specific naming)
-- `options` → `actions` (better semantic naming, different type signature)
-- `optionTintColor` → `actionSheetOptionTintColor` (clearer naming)
-- `renderUsernameOnMessage` → `isUsernameVisible` (consistent boolean naming)
-- `showUserAvatar` → `isUserAvatarVisible` (consistent boolean naming)
-- `showAvatarForEveryMessage` → `isAvatarVisibleForEveryMessage` (consistent boolean naming)
-- `renderAvatarOnTop` → `isAvatarOnTop` (consistent boolean naming)
-- `focusOnInputWhenOpeningKeyboard` → `shouldFocusInputOnKeyboardOpen` (consistent boolean naming)
-- `messageContainerRef` → `messagesContainerRef` (typo fix)
-- `alignTop` → `isAlignedTop` (consistent boolean naming)
-- `inverted` → `isInverted` (consistent boolean naming)
-
-#### Removed Props (GiftedChat)
-- `bottomOffset` - use `keyboardAvoidingViewProps.keyboardVerticalOffset` instead
-- `disableKeyboardController` - removed keyboard controller configuration
-- `isKeyboardInternallyHandled` - keyboard handling now always uses react-native-keyboard-controller
-- `lightboxProps` - custom Modal implementation replaced react-native-lightbox-v2
-- `placeholder` - moved to `textInputProps.placeholder`
-- `disableComposer` - moved to `textInputProps.editable={false}`
-- `keyboardShouldPersistTaps` - moved to `listProps.keyboardShouldPersistTaps`
-- `maxInputLength` - moved to `textInputProps.maxLength`
-- `extraData` - moved to `listProps.extraData`
-- `infiniteScroll` - use `loadEarlierMessagesProps.isInfiniteScrollEnabled` instead
-- `parsePatterns` - removed, automatic link parsing improved
-
-#### Props Moved to MessagesContainer (via spreading)
-These props moved from `GiftedChatProps` to `MessagesContainerProps` but are still accessible on `GiftedChat` via prop spreading:
-- `messages` - now in MessagesContainerProps
-- `isTyping` - now in MessagesContainerProps (via TypingIndicatorProps)
-- `loadEarlier` → `loadEarlierMessagesProps.isAvailable`
-- `isLoadingEarlier` → `loadEarlierMessagesProps.isLoading`
-- `onLoadEarlier` → `loadEarlierMessagesProps.onPress`
-- `renderLoadEarlier` - now in MessagesContainerProps
-- `renderDay` - now in MessagesContainerProps
-- `renderMessage` - now in MessagesContainerProps
-- `renderFooter` - now in MessagesContainerProps
-- `renderChatEmpty` - now in MessagesContainerProps
-- `scrollToBottomStyle` - now in MessagesContainerProps
-- `isScrollToBottomEnabled` - now in MessagesContainerProps
-- `scrollToBottomComponent` - now in MessagesContainerProps
-- `onQuickReply` - now in MessagesContainerProps
-- `listViewProps` → `listProps` (renamed in MessagesContainerProps)
-
-#### Type Signature Changes
-- `options`: changed from `{ [key: string]: () => void }` to `Array<{ title: string, action: () => void }>`
-- `textInputProps`: changed from `object` to `Partial<React.ComponentProps<typeof TextInput>>`
-- `renderInputToolbar`: now accepts `React.ComponentType | React.ReactElement | function | null` (can be component, element, function, or null)
-- All callback props now use arrow function syntax instead of function syntax for better type inference
-
-#### Dependency Changes
-- Removed `react-native-lightbox-v2` (replaced with custom Modal implementation)
-- Removed `react-native-iphone-x-helper` (deprecated)
-- Removed `react-native-keyboard-controller` as direct dependency
-- Added `react-native-keyboard-controller` as peer dependency (>=1.0.0)
-- Added `react-native-gesture-handler` as peer dependency (>=2.0.0)
-- Added `react-native-reanimated` support for v3 & v4
-- Added `react-native-safe-area-context` as peer dependency (>=5.0.0)
-
-### ✨ New Features
-
-#### TypeScript Migration
-- Complete conversion from JavaScript to TypeScript/TSX
-- Improved type safety and IntelliSense support
-- Better type definitions for all components and props
-- Refactored types to arrow functions for better readability
-
-#### Keyboard Handling
-- New `keyboardTopToolbarHeight` prop for better keyboard customization
-- New `keyboardAvoidingViewProps` to pass props to KeyboardAvoidingView from react-native-keyboard-controller
-- Improved keyboard behavior and offset handling
-- Consolidated keyboard configuration (removed individual keyboard props in favor of `keyboardAvoidingViewProps`)
-- Fixed auto-grow text input behavior
-- Better keyboard open/close transitions
-- New `OverKeyboardView` component for MessageImage to keep keyboard open
-
-#### Message Rendering
-- `isDayAnimationEnabled` prop to control day separator animations
-- Support for passing custom components in render functions
-- Improved message parsing with better link detection
-- Parse links in system messages (fixes #2105)
-- Better phone number parsing with custom matchers support
-- Improved URL parsing (email, phone, URL detection)
-
-#### UI & Styling
-- Dark theme support in example app
-- Safe area provider included in library
-- Improved LoadEarlier messages logic
-- Better themed styles implementation
-- Fixed press animation for TouchableOpacity
-- Replaced deprecated `TouchableWithoutFeedback` with `Pressable`
-- Better scroll to bottom button behavior on Android
-
-#### Image Viewing
-- Custom Modal implementation replacing react-native-lightbox-v2
-- Better image viewing experience with proper insets handling
-- Improved MessageImage component
-
-#### Accessibility & UX
-- `renderTicks` prop for message status indicators
-- Better scroll to bottom wrapper visibility handling
-- `useCallbackThrottled` for improved scroll performance
-- Allow passing children to SystemMessage
-- Improved load earlier messages functionality
-
-### 🐛 Bug Fixes
-
-- Fixed duplicate paragraph tags in README
-- Fixed scroll to bottom when `isScrollToBottomEnabled=false` (#2652)
-- Fixed TypeScript type inconsistencies and ESLint errors (#2653)
-- Fixed automatic scroll to bottom issues (#2630, #2621, #2644)
-- Fixed DayAnimated test import and added proper test coverage for renderDay prop
-- Fixed not passed `isDayAnimationEnabled` prop
-- Fixed MessageContainer scroll to bottom press on Android
-- Fixed safer change ScrollToBottomWrapper visibility
-- Fixed dependency cycles in imports
-- Fixed MessageText container style
-- Fixed reanimated issue in MessageContainer
-- Fixed construct messages on send in example
-- Fixed web support in example
-- Fixed #2659 (memoization issues)
-- Fixed #2640 (various bug fixes)
-- Fixed show location in example
-- Fixed errors in keyboard handling
-- Fixed load earlier messages functionality
-- Fixed Bubble type parameter to re-enable generics on message prop (#2639)
-- Fixed listViewProps typing with Partial<FlatListProps> (#2628)
-- Fixed MessageContainer to add renderDay prop and insert DayAnimated Component (#2632)
-- Fixed dateFormatCalendar default value in README
-
-### 🔧 Improvements
-
-#### Performance
-- Memoized values & functions for better performance
-- Better scroll performance with throttled callbacks
-- Optimized re-renders
-
-#### Code Quality
-- Added ESLint with import sorting
-- Fixed all examples with ESLint
-- Improved code structure and organization
-- Better error handling
-- Cleaner prop passing and component structure
-
-#### Testing
-- All tests converted to TypeScript
-- Updated snapshots for new components
-- Run tests in correct timezone (Europe/Paris)
-- Improved test coverage
-- Added comprehensive copilot instructions with validated commands
-
-#### Documentation
-- Improved README structure and formatting
-- Better prop documentation and grouping
-- Added matchers example
-- Added working Expo Snack link
-- Better feature documentation
-- Added maintainer section
-- Improved previews and images
-- Added export documentation
-- Fixed formatting issues and typos
-- Better keyboard props documentation
-
-#### Example App
-- Updated to latest React Native and Expo
-- Added tabs with different chat examples
-- Added working link to Expo Snack
-- Better example organization
-- Added dark theme support
-- Removed padding from bottom of toolbar
-- Added custom phone matcher example
-- Switch to dev build in README
-- Android: transparent navigation & status bars by default
-- Better project structure with multiple example types
-
-#### Build & Development
-- Better dependency management
-- Updated to Node.js >= 20
-- Yarn 1.22.22+ as package manager
-- Added stale workflow for issue management
-- Script to rebuild native dependencies
-- Improved local development setup
-
-### 📦 Dependencies
-
-#### Added
-- `@expo/react-native-action-sheet`: ^4.1.1
-- `@types/lodash.isequal`: ^4.5.8
-- `dayjs`: ^1.11.19
-- `lodash.isequal`: ^4.5.0
-- `react-native-zoom-reanimated`: ^1.4.10
-
-#### Peer Dependencies (now required)
-- `react`: >=18.0.0
-- `react-native`: *
-- `react-native-gesture-handler`: >=2.0.0
-- `react-native-keyboard-controller`: >=1.0.0
-- `react-native-reanimated`: >=3.0.0 || ^4.0.0
-- `react-native-safe-area-context`: >=5.0.0
-
-### 🔄 Migration Guide
-
-#### Update Prop Names
-```javascript
-// Before (v2.8.1)
-<GiftedChat
-  messages={messages}
-  onInputTextChanged={handleTextChange}
-  alwaysShowSend={true}
-  onPress={handlePress}
-  onLongPress={handleLongPress}
-  options={{ 'Option 1': action1, 'Option 2': action2 }}
-  optionTintColor="#007AFF"
-  bottomOffset={100}
-  placeholder="Type a message..."
-  maxInputLength={1000}
-  renderUsernameOnMessage={true}
-  showUserAvatar={false}
-  showAvatarForEveryMessage={false}
-  renderAvatarOnTop={false}
-  alignTop={false}
-  inverted={true}
-  loadEarlier={true}
-  isLoadingEarlier={false}
-  onLoadEarlier={handleLoadEarlier}
-/>
-
-// After (v3.0.0)
-<GiftedChat
-  messages={messages}
-  textInputProps={{
-    onChangeText: handleTextChange,
-    placeholder: "Type a message...",
-    maxLength: 1000
-  }}
-  isSendButtonAlwaysVisible={true}
-  onPressMessage={handlePress}
-  onLongPressMessage={handleLongPress}
-  actions={[
-    { title: 'Option 1', action: action1 },
-    { title: 'Option 2', action: action2 }
-  ]}
-  actionSheetOptionTintColor="#007AFF"
-  keyboardAvoidingViewProps={{ keyboardVerticalOffset: 100 }}
-  isUsernameVisible={true}
-  isUserAvatarVisible={false}
-  isAvatarVisibleForEveryMessage={false}
-  isAvatarOnTop={false}
-  isAlignedTop={false}
-  isInverted={true}
-  loadEarlierMessagesProps={{
-    isAvailable: true,
-    isLoading: false,
-    onPress: handleLoadEarlier
-  }}
-/>
-```
-
-#### Install Peer Dependencies
-```bash
-npm install react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context
-# or
-yarn add react-native-gesture-handler react-native-keyboard-controller react-native-reanimated react-native-safe-area-context
-```
-
-#### Update Image Lightbox
-The library now uses a custom Modal implementation instead of react-native-lightbox-v2. If you were customizing the lightbox, you'll need to update your customization approach.
-
-### 📝 Notes
-
-- This version includes 170+ commits since v2.8.1
-- Full TypeScript support with improved type definitions
-- Better React Native compatibility (tested with RN 0.81.5)
-- Improved React 19 support
-- Better Expo integration
-
-### 👥 Contributors
-
-Special thanks to all contributors who made this release possible, including fixes and improvements from the community.
-
----
-
-For detailed commit history, see: https://github.com/FaridSafi/react-native-gifted-chat/compare/2.8.1...3.0.0

package/src/reanimatedCompat.ts

@@ -1,27 +0,0 @@
-/**
- * Compatibility layer for react-native-reanimated v3 and v4
- *
- * In v3, types are exported from 'react-native-reanimated/lib/typescript/hook/commonTypes'
- * In v4, the type structure changed - we define a compatible type that works with both
- */
-
-import type { NativeScrollEvent } from 'react-native'
-
-/**
- * Compatible type for scroll events from useAnimatedScrollHandler
- * Works with both react-native-reanimated v3 and v4
- */
-export type ReanimatedScrollEvent = Readonly<{
-  contentOffset: {
-    x: number
-    y: number
-  }
-  contentSize: {
-    height: number
-    width: number
-  }
-  layoutMeasurement: {
-    height: number
-    width: number
-  }
-}> & Readonly<NativeScrollEvent>