react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.1

package/README.md

@@ -1,11 +1,3 @@
-<p align="center">
-<p align="center">
-   <a href="https://reactnative.gallery/FaridSafi/gifted-chat">
-    <img alt="react-native-gifted-chat" src="https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif" width="260" height="510" />
- </a>
-
-</p>
-
 <h3 align="center">
   💬 Gifted Chat
 </h3>
@@ -16,26 +8,59 @@
   <a href="https://www.npmjs.com/package/react-native-gifted-chat">
   <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-gifted-chat.svg"/></a>
   <a href="https://www.npmjs.com/package/react-native-gifted-chat"><img alt="npm version" src="https://badge.fury.io/js/react-native-gifted-chat.svg"/></a>
+  <a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
 </p>
+
+---
+
+<h3 align="center">
+  🚀 Try it now in your browser!
+</h3>
 <p align="center">
-  <a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
-  <a title='License' href="https://github.com/FaridSafi/react-native-gifted-chat/blob/master/LICENSE" height="18">
-    <img src='https://img.shields.io/badge/license-MIT-blue.svg' />
+  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">
+    <img src="https://img.shields.io/badge/▶️_Try_GiftedChat_Playground-4630EB?style=for-the-badge&logo=expo&logoColor=white" alt="Try GiftedChat on Expo Snack"/>
   </a>
-  <a href="#hire-an-expert"><img src="https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen"/></a>
+</p>
+<p align="center">
+  <strong>No installation required • Interactive examples • Edit and run in real-time</strong>
 </p>
 
+<br />
+
+<!-- previews -->
+
 <p align="center">
-  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">Snack GiftedChat playground</a>
-  <img height="18" src="https://snack.expo.io/favicon.ico" />
+  <img width="200" src="https://github.com/user-attachments/assets/c9da88f5-0b20-471c-8cd7-373bdb767517" />
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <img width="200" src="https://github.com/user-attachments/assets/f72b17f1-6c2e-43b5-87e7-477011aa3b07" />
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <img width="200" src="https://github.com/user-attachments/assets/86711e73-ee3c-4527-b38d-e4dab47a44fe" />
 </p>
 
+---
+
+## Features
+
+- Fully customizable components
+- Composer actions (to attach photos, etc.)
+- Load earlier messages
+- Copy messages to clipboard
+- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
+- Avatar as user's initials
+- Localized dates
+- Multi-line TextInput
+- InputToolbar avoiding keyboard
+- System message
+- Quick Reply messages (bot)
+- Typing indicator
+- react-native-web [web configuration](#react-native-web)
+
 ## Sponsor
 
 <p align="center">
   <br/>
   <a href="https://www.lereacteur.io" target="_blank">
-    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png">
+    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png" height="60">
   </a>
   <br>
   <p align="center">
@@ -51,7 +76,7 @@
 <p align="center">
   <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">
-    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="50">
+    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="40">
   </a>
   <br>
   <p align="center">
@@ -65,7 +90,7 @@
 <p align="center">
   <br/>
   <a href="https://www.ethora.com" target="_blank">
-    <img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" width="300px">
+    <img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" height="60">
   </a>
   <br>
   <p align="center">
@@ -80,50 +105,26 @@
  <a href="https://amzn.to/3ZmTyb2" target="_blank">React Key Concepts: Consolidate your knowledge of React’s core features (2nd ed. Edition)</a>
 </p>
 
-## Features
-
-- Fully customizable components
-- Composer actions (to attach photos, etc.)
-- Load earlier messages
-- Copy messages to clipboard
-- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
-- Avatar as user's initials
-- Localized dates
-- Multi-line TextInput
-- InputToolbar avoiding keyboard
-- System message
-- Quick Reply messages (bot)
-- Typing indicator
-- react-native-web [web configuration](#react-native-web)
-
 # Getting started
 
-## 🚧👷 Important notice
-
-There's currently WIP going on to make the library more performant, modern in terms of chat UI and easier to maintain. If you have any issues, please report them. If you want to contribute, please do so.
-
-The most stable version is `2.6.5`. If you want to use the latest version, please be aware that it's a work in progress.
-
-Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-native-gifted-chat/blob/eebab3751fcbe07715135e6e7b2aa3f76a10d8ac/README.md)
-
 ## Installation
 
 ### Install dependencies
 
 Yarn:
 ```bash
-yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 Npm:
 
 ```bash
-npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 Expo
 ```bash
-npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 ### Non-expo users
@@ -136,34 +137,9 @@ npx pod-install
 
 Follow guide: [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin)
 
-## Testing
-`TEST_ID` is exported as constants that can be used in your testing library of choice
-
-Gifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests, you can run the following bits of code.
-
-```typescript
-const WIDTH = 200; // or any number
-const HEIGHT = 2000; // or any number
-
-const loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)
-fireEvent(loadingWrapper, 'layout', {
-  nativeEvent: {
-    layout: {
-      width: WIDTH,
-      height: HEIGHT,
-    },
-  },
-})
-```
-
-## You have a question?
+## Examples
 
-1. Please check this readme and may find a response
-1. Please ask on StackOverflow first: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
-1. Find response on existing issues
-1. Try to keep issues for issues
-
-## Example
+### Basic usage
 
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
@@ -176,7 +152,7 @@ export function Example() {
 
   // If you have a tab bar, include its height
   const tabbarHeight = 50
-  const keyboardBottomOffset = insets.bottom + tabbarHeight
+  const keyboardVerticalOffset = insets.bottom + tabbarHeight
 
   useEffect(() => {
     setMessages([
@@ -206,228 +182,89 @@ export function Example() {
       user={{
         _id: 1,
       }}
-      keyboardBottomOffset={keyboardBottomOffset}
+
+      keyboardAvoidingViewProps={{ keyboardVerticalOffset }}
     />
   )
 }
 ```
 
-## Advanced example
+### Other examples
 
-See [`examples`](example) for a working demo!
+Check out code of [`examples`](example)
 
-## "Slack" example
+## Data structure
 
-See the files in [`example/example-slack-message`](example/example-slack-message) for an example of how to override the default UI to make something that looks more like Slack -- with usernames displayed and all messages on the left.
+Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 
-## Message object
+## Props
 
-> e.g. Chat Message
+### Core Configuration
 
-```ts
-export interface IMessage {
-  _id: string | number
-  text: string
-  createdAt: Date | number
-  user: User
-  image?: string
-  video?: string
-  audio?: string
-  system?: boolean
-  sent?: boolean
-  received?: boolean
-  pending?: boolean
-  quickReplies?: QuickReplies
-}
-```
+- **`messages`** _(Array)_ - Messages to display
+- **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
+- **`onSend`** _(Function)_ - Callback when sending a message
+- **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to a simple random string generator.
+- **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
 
-```js
-{
-  _id: 1,
-  text: 'My message',
-  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
-  user: {
-    _id: 2,
-    name: 'React Native',
-    avatar: 'https://facebook.github.io/react/img/logo_og.png',
-  },
-  image: 'https://facebook.github.io/react/img/logo_og.png',
-  // You can also add a video prop:
-  video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-  // Mark the message as sent, using one tick
-  sent: true,
-  // Mark the message as received, using two tick
-  received: true,
-  // Mark the message as pending with a clock loader
-  pending: true,
-  // Any additional custom parameters are passed through
-}
-```
+### Refs
 
-> e.g. System Message
+- **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
+- **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 
-```js
-{
-  _id: 1,
-  text: 'This is a system message',
-  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
-  system: true,
-  // Any additional custom parameters are passed through
-}
-```
+### Keyboard & Layout
 
-> e.g. Chat Message with Quick Reply options
+- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling.
+- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-avoiding-view). The `behavior` prop defaults to `'padding'`.
+- **`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`
 
-See PR [#1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)
+### Text Input & Composer
 
-```ts
-interface Reply {
-  title: string
-  value: string
-  messageId?: number | string
-}
+- **`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.
+- **`initialText`** _(String)_ - Initial text to display in the input field
+- **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty
+- **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
+- **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
+- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
+- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
+- **`renderComposer`** _(Component | Function)_ - Custom text input message composer
+- **`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).
 
-interface QuickReplies {
-  type: 'radio' | 'checkbox'
-  values: Reply[]
-  keepIt?: boolean
-}
-```
+### Actions & Action Sheet
 
-```js
-  {
-    _id: 1,
-    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
-    createdAt: new Date(),
-    quickReplies: {
-      type: 'radio', // or 'checkbox',
-      keepIt: true,
-      values: [
-        {
-          title: '😋 Yes',
-          value: 'yes',
-        },
-        {
-          title: '📷 Yes, let me show you with a picture!',
-          value: 'yes_picture',
-        },
-        {
-          title: '😞 Nope. What?',
-          value: 'no',
-        },
-      ],
-    },
-    user: {
-      _id: 2,
-      name: 'React Native',
-    },
-  },
-  {
-    _id: 2,
-    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
-    createdAt: new Date(),
-    quickReplies: {
-      type: 'checkbox', // or 'radio',
-      values: [
-        {
-          title: 'Yes',
-          value: 'yes',
-        },
-        {
-          title: 'Yes, let me show you with a picture!',
-          value: 'yes_picture',
-        },
-        {
-          title: 'Nope. What?',
-          value: 'no',
-        },
-      ],
-    },
-    user: {
-      _id: 2,
-      name: 'React Native',
-    },
-  }
-```
+- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
+- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
+- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
 
-## Props
+### Messages & Message Container
 
-- **`messageContainerRef`** _(FlatList ref)_ - Ref to the flatlist
-- **`textInputRef`** _(TextInput ref)_ - Ref to the text input
-- **`messages`** _(Array)_ - Messages to display
 - **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container
-- **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
-- **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
-- **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
-- **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
-- **`initialText`** _(String)_ - Initial text to display in the input field
-- **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
-- **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
-- **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`
-- **`onSend`** _(Function)_ - Callback when sending a message
-- **`alwaysShowSend`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty
-- **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)
-- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
-- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
-- **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
-- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:
-  - `isAvailable` - Controls button visibility (default: false)
-  - `onPress` - Callback when button is pressed
-  - `isLoading` - Display loading indicator (default: false)
-  - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)
-  - `label` - Override the default "Load earlier messages" text
-  - `containerStyle` - Custom style for the button container
-  - `wrapperStyle` - Custom style for the button wrapper
-  - `textStyle` - Custom style for the button text
-  - `activityIndicatorStyle` - Custom style for the loading indicator
-  - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
-  - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
+- **`renderMessage`** _(Component | Function)_ - Custom message container
 - **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing
-- **`renderLoadEarlier`** _(Component | Function)_ - Custom "Load earlier messages" button
-- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
-- **`showUserAvatar`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
-- **`showAvatarForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`
-- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
-- **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed
-- **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
+- **`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
+
+### Message Bubbles & Content
+
 - **`renderBubble`** _(Component | Function)_ - Custom message bubble
-- **`renderTicks`** _(Component | Function(`message`))_ - Custom ticks indicator to display message status
-- **`renderSystemMessage`** _(Component | Function)_ - Custom system message
-- **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed
-- **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))
-- **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
-- **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
-- **`renderUsername`** _(Component | Function)_ - Custom Username container
-- **`renderMessage`** _(Component | Function)_ - Custom message container
 - **`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`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
-- **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
-- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble
-- **`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)
-- **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/example/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
-- **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component
-- **`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)
-- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
-- **`renderComposer`** _(Component | Function)_ - Custom text input message composer
-- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer
-- **`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))
-- **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer
-- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options
-- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties
-- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options
-- **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
-- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
-- **`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
-- **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput.html).
 - **`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:
   - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)
   - `linkStyle` - Custom style for links
@@ -437,63 +274,121 @@ interface QuickReplies {
 
 Example:
 
-```js
+```tsx
 <GiftedChat
   messageTextProps={{
+    phone: false, // Disable default phone number linking
     matchers: [
       {
-        pattern: /#(\w+)/g,
-        style: { color: '#0084ff', fontWeight: 'bold' },
-        onPress: (match) => console.log('Hashtag:', match.getAnchorText()),
-      },
-      {
-        pattern: /(?<![\.\w])@(?!__ELEMENT-)([\w-]+)/g,
-        style: { color: '#0084ff', fontWeight: 'bold' },
-        onPress: (match) => console.log('Mention:', match.getAnchorText()),
+        type: 'phone',
+        pattern: /\+?[1-9][0-9\-\(\) ]{7,}[0-9]/g,
+        getLinkUrl: (replacerArgs: ReplacerArgs): string => {
+          return replacerArgs[0].replace(/[\-\(\) ]/g, '')
+        },
+        getLinkText: (replacerArgs: ReplacerArgs): string => {
+          return replacerArgs[0]
+        },
+        style: styles.linkStyle,
+        onPress: (match: CustomMatch) => {
+          const url = match.getAnchorHref()
+
+          const options: {
+            title: string
+            action?: () => void
+          }[] = [
+            { title: 'Copy', action: () => setStringAsync(url) },
+            { title: 'Call', action: () => Linking.openURL(`tel:${url}`) },
+            { title: 'Send SMS', action: () => Linking.openURL(`sms:${url}`) },
+            { title: 'Cancel' },
+          ]
+
+          showActionSheetWithOptions({
+            options: options.map(o => o.title),
+            cancelButtonIndex: options.length - 1,
+          }, (buttonIndex?: number) => {
+            if (buttonIndex === undefined)
+              return
+
+            const option = options[buttonIndex]
+            option.action?.()
+          })
+        },
       },
     ],
     linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },
-    phone: false,
   }}
 />
 ```
 
-- **`matchers`** _(Array)_ - **Deprecated:** Use `messageTextProps.matchers` instead. Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers).
+See full example in [LinksExample](example/components/chat-examples/LinksExample.tsx)
 
-- **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
-- **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
-- **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
+### Avatars
 
-* **`isScrollToBottomEnabled`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)
-* **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
-* **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
-* **`scrollToBottomStyle`** _(Object)_ - Custom style for Bottom Component container
-* **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
-* **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
-* **`renderQuickReplies`** _(Function)_ - Custom all quick reply view
-* **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
-* **`quickReplyTextStyle`** _(StyleProp<TextStyle>)_ - Custom text style for quick reply buttons
-* **`quickReplyContainerStyle`** _(StyleProp<ViewStyle>)_ - Custom container style for quick replies
-* **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
-* **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.
-* **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
-* **`handleOnScroll`** _(Function)_ - Custom scroll event handler for the message list
-
-## Notes for [Redux](https://github.com/reactjs/redux)
-
-The `messages` prop should work out-of-the-box with Redux. In most cases, this is all you need.
-
-If you decide to specify a `text` prop, GiftedChat will no longer manage its own internal `text` state and will defer entirely to your prop.
-This is great for using a tool like Redux, but there's one extra step you'll need to take:
-simply implement `onInputTextChanged` to receive typing events and reset events (e.g. to clear the text `onSend`):
+- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message
+- **`isUserAvatarVisible`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users
+- **`isAvatarVisibleForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`
+- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped
+- **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed
+- **`isAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`
 
-```js
-<GiftedChat
-  text={customText}
-  onInputTextChanged={text => this.setCustomText(text)}
-  /* ... */
-/>
-```
+### Username
+
+- **`isUsernameVisible`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`
+- **`renderUsername`** _(Component | Function)_ - Custom Username container
+
+### Date & Time
+
+- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
+- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
+- **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))
+- **`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)
+
+### System Messages
+
+- **`renderSystemMessage`** _(Component | Function)_ - Custom system message
+
+### Load Earlier Messages
+
+- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:
+  - `isAvailable` - Controls button visibility (default: false)
+  - `onPress` - Callback when button is pressed
+  - `isLoading` - Display loading indicator (default: false)
+  - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)
+  - `label` - Override the default "Load earlier messages" text
+  - `containerStyle` - Custom style for the button container
+  - `wrapperStyle` - Custom style for the button wrapper
+  - `textStyle` - Custom style for the button text
+  - `activityIndicatorStyle` - Custom style for the loading indicator
+  - `activityIndicatorColor` - Color of the loading indicator (default: 'white')
+  - `activityIndicatorSize` - Size of the loading indicator (default: 'small')
+- **`renderLoadEarlier`** _(Component | Function)_ - Custom "Load earlier messages" button
+
+### Typing Indicator
+
+- **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
+- **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component
+- **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
+- **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedFeaturesExample.tsx](example/components/chat-examples/CustomizedFeaturesExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
+
+### Quick Replies
+
+See [Quick Replies example in messages.ts](example/example-expo/data/messages.ts)
+
+- **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
+- **`renderQuickReplies`** _(Function)_ - Custom all quick reply view
+- **`quickReplyStyle`** _(StyleProp<ViewStyle>)_ - Custom quick reply view style
+- **`quickReplyTextStyle`** _(StyleProp<TextStyle>)_ - Custom text style for quick reply buttons
+- **`quickReplyContainerStyle`** _(StyleProp<ViewStyle>)_ - Custom container style for quick replies
+- **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view
+
+### Scroll to Bottom
+
+- **`isScrollToBottomEnabled`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)
+- **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
+- **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
+- **`scrollToBottomStyle`** _(Object)_ - Custom style for Bottom Component container
 
 ## Notes for Android
 
@@ -578,6 +473,26 @@ module.exports = function override(config, env) {
 
 > Another example with **Gatsby** : [xcarpentier/clean-archi-boilerplate](https://github.com/xcarpentier/clean-archi-boilerplate/tree/develop/apps/web)
 
+## Testing
+`TEST_ID` is exported as constants that can be used in your testing library of choice
+
+Gifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests, you can run the following bits of code.
+
+```typescript
+const WIDTH = 200; // or any number
+const HEIGHT = 2000; // or any number
+
+const loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)
+fireEvent(loadingWrapper, 'layout', {
+  nativeEvent: {
+    layout: {
+      width: WIDTH,
+      height: HEIGHT,
+    },
+  },
+})
+```
+
 ## Questions
 
 - [How can I set Bubble color for each user?](https://github.com/FaridSafi/react-native-gifted-chat/issues/672)
@@ -590,23 +505,23 @@ module.exports = function override(config, env) {
 - [How to use renderLoading?](https://github.com/FaridSafi/react-native-gifted-chat/issues/298)
 - [Can I use MySql to save the message?](https://github.com/FaridSafi/react-native-gifted-chat/issues/738)
 
-## License
+## You have a question?
+
+1. Please check this readme and you might find a response
+1. Please ask on StackOverflow first: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
+1. Find responses in existing issues
+1. Try to keep issues for issues
 
-- [MIT](LICENSE)
+## Hire an expert
 
-## Author
+Looking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)
 
-Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi)! or [@xcapetir](https://www.twitter.com/xcapetir)!
+## Author
 
-## Contributors
+Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) or [@xcapetir](https://www.twitter.com/xcapetir)
 
-- Kevin Cooper [cooperka](https://github.com/cooperka)
-- Kfir Golan [kfiroo](https://github.com/kfiroo)
-- Bruno Cascio [brunocascio](https://github.com/brunocascio)
-- Xavier Carpentier [xcarpentier](https://github.com/xcarpentier)
-- Kesha Antonov [kesha-antonov](https://github.com/kesha-antonov)
-- [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)
+## Maintainer
 
-## Hire an expert!
+Have any questions? Reach out to [Kesha Antonov](https://github.com/kesha-antonov)
 
-Looking for a ReactNative freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!
+Please note that I'm maintaining this project in my free time for free. If you find any issues, feel free to open them, and I'll do my best to address them as time permits.