react-native-gifted-chat 3.3.2 → 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)
@@ -821,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"}