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

package/README.md

@@ -136,34 +136,7 @@ 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?
-
-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
+## Simple example
 
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
@@ -212,222 +185,83 @@ export function Example() {
 }
 ```
 
-## Advanced example
+## Different 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
+- **`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`
+- **`shouldFocusInputOnKeyboardOpen`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
+- **`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 +271,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 +470,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,6 +502,13 @@ 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)
 
+## 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
+
 ## License
 
 - [MIT](LICENSE)
@@ -609,4 +528,6 @@ Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/Fa
 
 ## Hire an expert!
 
-Looking for a ReactNative freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!
+Looking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!
+
+Need expert help with React Native Gifted Chat? Reach out to [Kesha Antonov](mailto:innokenty.longway@gmail.com)

package/package.json

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

package/src/Avatar.tsx

@@ -7,7 +7,7 @@ import {
   ViewStyle,
 } from 'react-native'
 import { GiftedAvatar } from './GiftedAvatar'
-import { IMessage, LeftRightStyle, User } from './types'
+import { IMessage, LeftRightStyle, User } from './Models'
 import { isSameUser, isSameDay } from './utils'
 
 interface Styles {
@@ -57,8 +57,8 @@ export interface AvatarProps<TMessage extends IMessage> {
   previousMessage?: TMessage
   nextMessage?: TMessage
   position: 'left' | 'right'
-  renderAvatarOnTop?: boolean
-  showAvatarForEveryMessage?: boolean
+  isAvatarOnTop?: boolean
+  isAvatarVisibleForEveryMessage?: boolean
   imageStyle?: LeftRightStyle<ImageStyle>
   containerStyle?: LeftRightStyle<ViewStyle>
   textStyle?: TextStyle
@@ -71,8 +71,8 @@ export function Avatar<TMessage extends IMessage = IMessage> (
   props: AvatarProps<TMessage>
 ) {
   const {
-    renderAvatarOnTop,
-    showAvatarForEveryMessage,
+    isAvatarOnTop,
+    isAvatarVisibleForEveryMessage,
     containerStyle,
     position,
     currentMessage,
@@ -84,13 +84,13 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     onLongPressAvatar,
   } = props
 
-  const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage
+  const messageToCompare = isAvatarOnTop ? previousMessage : nextMessage
 
   const renderAvatarComponent = useCallback(() => {
     if (renderAvatar)
       return renderAvatar({
-        renderAvatarOnTop,
-        showAvatarForEveryMessage,
+        isAvatarOnTop,
+        isAvatarVisibleForEveryMessage,
         containerStyle,
         position,
         currentMessage,
@@ -117,8 +117,8 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     return null
   }, [
     renderAvatar,
-    renderAvatarOnTop,
-    showAvatarForEveryMessage,
+    isAvatarOnTop,
+    isAvatarVisibleForEveryMessage,
     containerStyle,
     position,
     currentMessage,
@@ -133,7 +133,7 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     return null
 
   if (
-    !showAvatarForEveryMessage &&
+    !isAvatarVisibleForEveryMessage &&
     currentMessage &&
     messageToCompare &&
     isSameUser(currentMessage, messageToCompare) &&
@@ -159,7 +159,7 @@ export function Avatar<TMessage extends IMessage = IMessage> (
     <View
       style={[
         styles[position].container,
-        renderAvatarOnTop && styles[position].onTop,
+        isAvatarOnTop && styles[position].onTop,
         containerStyle?.[position],
       ]}
     >

package/src/Bubble/index.tsx

@@ -10,11 +10,11 @@ import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
 import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
+import { IMessage } from '../Models'
 import { QuickReplies } from '../QuickReplies'
 import stylesCommon from '../styles'
 
 import { Time } from '../Time'
-import { IMessage } from '../types'
 import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
 
 import styles from './styles'
@@ -284,7 +284,7 @@ export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<
       renderUsername,
     } = props
 
-    if (props.renderUsernameOnMessage && currentMessage) {
+    if (props.isUsernameVisible && currentMessage) {
       if (user && currentMessage.user._id === user._id)
         return null