react-native-gifted-chat 3.0.0-alpha.1 → 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,295 @@
+# Changelog
+
+## [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-autolink`: ^4.2.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

@@ -53,6 +53,8 @@
 - System message
 - Quick Reply messages (bot)
 - Typing indicator
+- Ticks indicator to display message status ( delivered, read )
+- Scroll to bottom button
 - react-native-web [web configuration](#react-native-web)
 
 ## Sponsor
@@ -143,6 +145,7 @@ Follow guide: [react-native-reanimated](https://docs.swmansion.com/react-native-
 
 ```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'
 
@@ -152,7 +155,8 @@ export function Example() {
 
   // If you have a tab bar, include its height
   const tabbarHeight = 50
-  const keyboardVerticalOffset = insets.bottom + tabbarHeight
+  const keyboardTopToolbarHeight = Platform.select({ ios: 44, default: 0 })
+  const keyboardVerticalOffset = insets.bottom + tabbarHeight + keyboardTopToolbarHeight
 
   useEffect(() => {
     setMessages([
@@ -209,7 +213,7 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 
 ### Refs
 
-- **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
+- **`messagesContainerRef`** _(FlatList ref)_ - Ref to the flatlist
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 
 ### Keyboard & Layout
@@ -232,7 +236,7 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 - **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
 - **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer
-- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput.html).
+- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput).
 
 ### Actions & Action Sheet
 
@@ -247,22 +251,21 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 - **`renderMessage`** _(Component | Function)_ - Custom message container
 - **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing
 - **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty
-- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessageContainer (separate from the ListView)
-- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
+- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)
+- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist)
 
 ### Message Bubbles & Content
 
-- **`renderBubble`** _(Component | Function)_ - Custom message bubble
+- **`renderBubble`** _(Component | Function(`props: BubbleProps`))_ - Custom message bubble. Receives [BubbleProps](src/Bubble/types.ts) as parameter.
 - **`renderMessageText`** _(Component | Function)_ - Custom message text
 - **`renderMessageImage`** _(Component | Function)_ - Custom message image
 - **`renderMessageVideo`** _(Component | Function)_ - Custom message video
 - **`renderMessageAudio`** _(Component | Function)_ - Custom message audio
 - **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
-- **`renderTicks`** _(Component | Function(`message`))_ - Custom ticks indicator to display message status
 - **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
 - **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; you can use this to show action sheets (e.g., copy, delete, reply)
-- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
+- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
 - **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
@@ -344,6 +347,7 @@ See full example in [LinksExample](example/components/chat-examples/LinksExample
 - **`renderDay`** _(Component | Function)_ - Custom day above a message
 - **`renderTime`** _(Component | Function)_ - Custom time inside a message
 - **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
+- **`isDayAnimationEnabled`** _(Bool)_ - Enable animated day label that appears on scroll; default is `true`
 
 ### System Messages
 
@@ -417,30 +421,8 @@ If you are using Create React Native App / Expo, no Android specific installatio
 </View>
 ```
 
-If you use React Navigation, additional handling may be required to account for navigation headers and tabs. `KeyboardAvoidingView`'s `keyboardVerticalOffset` property can be set to the height of the navigation header and [`tabBarOptions.keyboardHidesTabBar`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html#bottomtabnavigatorconfig) can be set to keep the tab bar from being shown when the keyboard is up. Due to a [bug with calculating height on Android phones with notches](facebook/react-native#23693), `KeyboardAvoidingView` is recommended over other solutions that involve calculating the height of the window.
-
-- adding an opaque background status bar on app.json (even though `android:windowSoftInputMode="adjustResize"` is set internally on Expo's Android apps, the translucent status bar causes it not to work): https://docs.expo.io/versions/latest/guides/configuration.html#androidstatusbar
-
-- If you plan to use `GiftedChat` inside a `Modal`, see [#200](https://github.com/FaridSafi/react-native-gifted-chat/issues/200).
-
 ## Notes for local development
 
-### Native
-
-1. Install `yarn global add expo-cli`
-2. Install dependencies`yarn install`
-3. `expo start`
-
-### react-native-web
-
-#### With expo
-
-1. Install `yarn global add expo-cli`
-2. Install dependencies`yarn install`
-3. `expo start -w`
-
-[Upgrade snack version](https://snackager.expo.io/bundle/react-native-gifted-chat@0.15.0?bypassCache=true)
-
 #### With create-react-app
 
 1. `yarn add -D react-app-rewired`

package/package.json

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

package/src/Actions.tsx

@@ -19,7 +19,7 @@ export interface ActionsProps {
   icon?: () => ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
   iconTextStyle?: StyleProp<TextStyle>
-  containerStyle?: StyleProp<ViewStyle>
+  buttonStyle?: StyleProp<ViewStyle>
   onPressActionButton?(): void
 }
 
@@ -30,11 +30,16 @@ export function Actions ({
   wrapperStyle,
   iconTextStyle,
   onPressActionButton,
-  containerStyle,
+  buttonStyle,
 }: ActionsProps) {
   const { actionSheet } = useChatContext()
 
-  const onActionsPress = useCallback(() => {
+  const handlePress = useCallback(() => {
+    if (onPressActionButton) {
+      onPressActionButton()
+      return
+    }
+
     if (!actions?.length)
       return
 
@@ -54,47 +59,51 @@ export function Actions ({
         item.action?.()
       }
     )
-  }, [actionSheet, actions, actionSheetOptionTintColor])
+  }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton])
 
   const renderIcon = useCallback(() => {
     if (icon)
       return icon()
 
     return (
-      <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
+      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
         <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
       </View>
     )
   }, [icon, iconTextStyle, wrapperStyle])
 
   return (
-    <TouchableOpacity
-      style={[styles.container, containerStyle]}
-      onPress={onPressActionButton || onActionsPress}
-    >
-      {renderIcon()}
-    </TouchableOpacity>
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={handlePress}
+        style={[styles.button, buttonStyle]}
+      >
+        {renderIcon()}
+      </TouchableOpacity>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    width: 26,
-    height: 26,
-    marginLeft: 10,
-    marginBottom: 10,
+    alignItems: 'flex-end',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 7,
   },
+
   wrapper: {
-    borderRadius: 13,
     borderColor: Color.defaultColor,
     borderWidth: 2,
+    width: 26,
+    height: 26,
+    borderRadius: 13,
   },
   iconText: {
     color: Color.defaultColor,
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: 16,
-    backgroundColor: Color.backgroundTransparent,
-    textAlign: 'center',
   },
 })