react-native-gifted-chat 3.3.0 → 3.3.3

package/CHANGELOG.md

@@ -0,0 +1,435 @@
+# Changelog
+
+## [3.3.2] - 2026-01-22
+
+### 🐛 Bug Fixes
+- Fixed `React.memo` and `React.forwardRef` components not rendering correctly when passed as render props
+  - `renderComponentOrElement` now properly handles components with `$$typeof` property
+- Fixed layout jump on initial render - content now renders with `opacity: 0` until initialized
+- Fixed keyboard vertical offset documentation and examples
+
+### 🔧 Improvements
+- Updated `keyboardVerticalOffset` documentation in README with clearer explanation
+- Added `hidden` style for smoother initial render transitions
+
+### 📝 Documentation
+- Improved `keyboardVerticalOffset` section explaining that it equals distance from screen top to container top
+- Added recommendation to use `useHeaderHeight()` from `@react-navigation/elements`
+
+## [3.3.0] - 2026-01-21
+
+### ✨ Features
+- **Swipe to Reply**: New swipe-to-reply functionality using `ReanimatedSwipeable` (based on #2692)
+  - Replaced deprecated `Swipeable` with `ReanimatedSwipeable` from react-native-gesture-handler
+  - Added `reply` prop to `GiftedChat` with grouped configuration options
+  - Swipe direction support: `'left'` (swipe left, icon on right) or `'right'` (swipe right, icon on left)
+  - Custom swipe action rendering via `renderAction`
+  - Built-in animated `ReplyIcon` component
+  - `ReplyPreview` component with smooth enter/exit animations
+  - Reply message display in `Bubble` component via `messageReply` prop
+- **New Props**:
+  - `scrollToBottomContentStyle` - style for scroll to bottom button content
+
+### 🐛 Bug Fixes
+- Fixed #2702 - typing issues
+- Fixed #2708 - component issues
+- Fixed #2607 - edge case handling
+- Fixed #2701 - rendering issues
+- Fixed #2691 - prop handling
+- Fixed #2688 - style issues
+- Fixed #2687 - component behavior
+- Fixed #2618 - scroll issues
+- Fixed #2677, #2682, #2602 - multiple fixes
+- Fixed #2684, #2686 - component issues
+- Fixed `onScroll` type definition
+- Fixed messages padding
+- Fixed SystemMessage styles
+- Added missing worklets for animations
+- Removed `ts-expect-error` for `requestAnimationFrame` (now properly typed for React Native)
+- Fixed two typing issues (#2698)
+
+### 🔧 Improvements
+- Grouped reply-related props into `ReplyProps` interface for cleaner API
+- Added `SwipeToReplyProps` for Message-level swipe configuration
+- Added `BubbleReplyProps` for Bubble-level reply message styling
+- Added example app to lint command with proper path alias support
+- Improved reply animations (enter/exit transitions)
+- Changes from #2705
+
+### 📝 Documentation
+- Updated README with swipe-to-reply feature documentation and examples
+- Updated license link
+- Added reply message implementation example (#2690)
+
+### 🧪 Testing
+- Updated test snapshots
+- Added tests for `MessageReply` component
+- Added tests for `ReplyPreview` component
+
+## [3.2.3] - 2025-12-XX
+
+### 🐛 Bug Fixes
+- Fixed `onScroll` type definition
+
+## [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/README.md

@@ -51,6 +51,34 @@
 
 ---
 
+<h3 align="center">Sponsors</h3>
+
+<table align="center" border="0" cellspacing="20">
+  <tr>
+    <td align="center" valign="middle">
+      <a href="https://www.lereacteur.io" target="_blank"><img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png" height="50"></a>
+    </td>
+    <td align="center" valign="middle">
+      <a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank"><img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="35"></a>
+    </td>
+    <td align="center" valign="middle">
+      <a href="https://www.ethora.com" target="_blank"><img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" height="50"></a>
+    </td>
+  </tr>
+</table>
+
+<p align="center">
+  <a href="https://www.lereacteur.io" target="_blank"><strong>Le Reacteur</strong></a> - Coding Bootcamp in Paris co-founded by Farid Safi
+  <br>
+  <a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank"><strong>Stream</strong></a> - Scalable chat API/Server written in Go (<a href="https://getstream.io/chat/get_started/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">API Tour</a> | <a href="https://dev.to/nickparsons/react-native-chat-with-chuck-norris-3h7m?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">Tutorial</a>)
+  <br>
+  <a href="https://www.ethora.com" target="_blank"><strong>Ethora</strong></a> - A complete app engine featuring GiftedChat (<a href="https://bit.ly/ethorachat" target="_blank">GitHub</a>)
+  <br><br>
+  📚 <a href="https://amzn.to/3ZmTyb2" target="_blank">React Key Concepts (2nd ed.)</a>
+</p>
+
+---
+
 ## 📖 Table of Contents
 
 - [Features](#-features)
@@ -120,18 +148,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 +186,7 @@ export function Example() {
       user={{
         _id: 1,
       }}
-
-      keyboardAvoidingViewProps={{ keyboardVerticalOffset }}
+      keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}
     />
   )
 }
@@ -227,10 +251,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.
@@ -793,11 +849,11 @@ yarn prepublishOnly
 
 **Original Author:** [Farid Safi](https://www.x.com/FaridSafi)
 
-**Co-maintainer:** [Xavier Carpentier](https://www.x.com/xcapetir) - [Hire Xavier](https://xaviercarpentier.com)
+**Co-author:** [Xavier Carpentier](https://www.x.com/xcapetir) - [Hire Xavier](https://xaviercarpentier.com)
 
 **Maintainer:** [Kesha Antonov](https://github.com/kesha-antonov)
 
-> Please note that this project is maintained in free time. If you find it helpful, please consider [becoming a sponsor](https://github.com/sponsors/kesha-antonov).
+> I've been maintaining this project for 2 years, completely in my free time and without any compensation. If you find it helpful, please consider [becoming a sponsor](https://github.com/sponsors/kesha-antonov) to support continued development. 💖
 
 ---
 

package/lib/Actions.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface ActionsProps {
+    actions?: Array<{
+        title: string;
+        action: () => void;
+    }>;
+    actionSheetOptionTintColor?: string;
+    icon?: () => ReactNode;
+    wrapperStyle?: StyleProp<ViewStyle>;
+    iconTextStyle?: StyleProp<TextStyle>;
+    buttonStyle?: StyleProp<ViewStyle>;
+    onPressActionButton?(): void;
+}
+export declare function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, buttonStyle, }: ActionsProps): React.JSX.Element;
+//# sourceMappingURL=Actions.d.ts.map

package/lib/Actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAA;AAQrB,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;IACtD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAAkD,EAClD,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBAmDd"}

package/lib/Actions.js

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import { StyleSheet, View, } from 'react-native';
+import { Text } from 'react-native-gesture-handler';
+import { Color } from './Color';
+import { TouchableOpacity } from './components/TouchableOpacity';
+import { useChatContext } from './GiftedChatContext';
+import stylesCommon from './styles';
+export function Actions({ actions, actionSheetOptionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, buttonStyle, }) {
+    const { actionSheet } = useChatContext();
+    const handlePress = useCallback(() => {
+        if (onPressActionButton) {
+            onPressActionButton();
+            return;
+        }
+        if (!actions?.length)
+            return;
+        const titles = actions.map(item => item.title);
+        actionSheet().showActionSheetWithOptions({
+            options: titles,
+            cancelButtonIndex: titles.length - 1,
+            tintColor: actionSheetOptionTintColor,
+        }, (buttonIndex) => {
+            if (buttonIndex === undefined)
+                return;
+            const item = actions[buttonIndex];
+            item.action?.();
+        });
+    }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton]);
+    const renderIcon = useCallback(() => {
+        if (icon)
+            return icon();
+        return (<View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
+        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
+      </View>);
+    }, [icon, iconTextStyle, wrapperStyle]);
+    return (<View style={styles.container}>
+      <TouchableOpacity onPress={handlePress} style={[styles.button, buttonStyle]}>
+        {renderIcon()}
+      </TouchableOpacity>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'flex-end',
+    },
+    button: {
+        paddingLeft: 10,
+        paddingRight: 4,
+        paddingVertical: 7,
+    },
+    wrapper: {
+        borderColor: Color.defaultColor,
+        borderWidth: 2,
+        width: 26,
+        height: 26,
+        borderRadius: 13,
+    },
+    iconText: {
+        color: Color.defaultColor,
+        fontWeight: 'bold',
+        fontSize: 16,
+        lineHeight: 16,
+    },
+});
+//# sourceMappingURL=Actions.js.map

package/lib/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"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"}

package/lib/Avatar.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { IMessage, LeftRightStyle, User } from './Models';
+export interface AvatarProps<TMessage extends IMessage> {
+    currentMessage: TMessage;
+    previousMessage?: TMessage;
+    nextMessage?: TMessage;
+    position: 'left' | 'right';
+    isAvatarOnTop?: boolean;
+    isAvatarVisibleForEveryMessage?: boolean;
+    imageStyle?: LeftRightStyle<ImageStyle>;
+    containerStyle?: LeftRightStyle<ViewStyle>;
+    textStyle?: TextStyle;
+    renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode;
+    onPressAvatar?: (user: User) => void;
+    onLongPressAvatar?: (user: User) => void;
+}
+export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): React.JSX.Element | null;
+//# sourceMappingURL=Avatar.d.ts.map

package/lib/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EACL,UAAU,EAEV,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AA6CzD,MAAM,WAAW,WAAW,CAAC,QAAQ,SAAS,QAAQ;IACpD,cAAc,EAAE,QAAQ,CAAA;IACxB,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8BAA8B,CAAC,EAAE,OAAO,CAAA;IACxC,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAA;IACvC,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,GAAG,SAAS,CAAA;IAC5E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CACzC;AAED,wBAAgB,MAAM,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACzD,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,4BAkG7B"}