@kesha-antonov/react-native-chat 6.0.1 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/README.md +36 -4
  2. package/lib/Actions.d.ts.map +1 -1
  3. package/lib/Actions.js +33 -27
  4. package/lib/Actions.js.map +1 -1
  5. package/lib/Chat/Chat.d.ts.map +1 -1
  6. package/lib/Chat/Chat.js +253 -203
  7. package/lib/Chat/Chat.js.map +1 -1
  8. package/lib/Chat/ChatMessageList.d.ts.map +1 -1
  9. package/lib/Chat/ChatMessageList.js +4 -0
  10. package/lib/Chat/ChatMessageList.js.map +1 -1
  11. package/lib/Chat/index.d.ts +9 -1
  12. package/lib/Chat/index.d.ts.map +1 -1
  13. package/lib/Chat/index.js +14 -1
  14. package/lib/Chat/index.js.map +1 -1
  15. package/lib/Chat/types.d.ts +29 -0
  16. package/lib/Chat/types.d.ts.map +1 -1
  17. package/lib/Chat/types.js.map +1 -1
  18. package/lib/Chat/useMessageActions.d.ts +1 -0
  19. package/lib/Chat/useMessageActions.d.ts.map +1 -1
  20. package/lib/Chat/useMessageActions.js +97 -89
  21. package/lib/Chat/useMessageActions.js.map +1 -1
  22. package/lib/ChatHeader.d.ts +50 -0
  23. package/lib/ChatHeader.d.ts.map +1 -0
  24. package/lib/ChatHeader.js +356 -0
  25. package/lib/ChatHeader.js.map +1 -0
  26. package/lib/ChatList/ChatListCell.d.ts +1 -1
  27. package/lib/ChatList/ChatListCell.d.ts.map +1 -1
  28. package/lib/ChatList/ChatListCell.js +42 -11
  29. package/lib/ChatList/ChatListCell.js.map +1 -1
  30. package/lib/ChatList/index.js +332 -323
  31. package/lib/ChatList/index.js.map +1 -1
  32. package/lib/ChatList/types.d.ts +17 -1
  33. package/lib/ChatList/types.d.ts.map +1 -1
  34. package/lib/ChatList/types.js.map +1 -1
  35. package/lib/ChatList/utils.d.ts +4 -1
  36. package/lib/ChatList/utils.d.ts.map +1 -1
  37. package/lib/ChatList/utils.js +3 -2
  38. package/lib/ChatList/utils.js.map +1 -1
  39. package/lib/Composer.js +5 -1
  40. package/lib/Composer.js.map +1 -1
  41. package/lib/InputToolbar/fragments.d.ts +1 -1
  42. package/lib/InputToolbar/fragments.d.ts.map +1 -1
  43. package/lib/InputToolbar/fragments.js +9 -7
  44. package/lib/InputToolbar/fragments.js.map +1 -1
  45. package/lib/InputToolbar/index.d.ts.map +1 -1
  46. package/lib/InputToolbar/index.js +3 -2
  47. package/lib/InputToolbar/index.js.map +1 -1
  48. package/lib/InputToolbar/types.d.ts +6 -0
  49. package/lib/InputToolbar/types.d.ts.map +1 -1
  50. package/lib/InputToolbar/types.js.map +1 -1
  51. package/lib/InputToolbar/useActionsFragment.d.ts.map +1 -1
  52. package/lib/InputToolbar/useActionsFragment.js +83 -59
  53. package/lib/InputToolbar/useActionsFragment.js.map +1 -1
  54. package/lib/InputToolbar/useKeyboardInset.d.ts +1 -1
  55. package/lib/InputToolbar/useKeyboardInset.d.ts.map +1 -1
  56. package/lib/InputToolbar/useKeyboardInset.js +2 -2
  57. package/lib/InputToolbar/useKeyboardInset.js.map +1 -1
  58. package/lib/MessageText.d.ts.map +1 -1
  59. package/lib/MessageText.js +39 -33
  60. package/lib/MessageText.js.map +1 -1
  61. package/lib/MessagesContainer/index.d.ts.map +1 -1
  62. package/lib/MessagesContainer/index.js +113 -94
  63. package/lib/MessagesContainer/index.js.map +1 -1
  64. package/lib/MessagesContainer/types.d.ts +5 -2
  65. package/lib/MessagesContainer/types.d.ts.map +1 -1
  66. package/lib/MessagesContainer/types.js.map +1 -1
  67. package/lib/MessagesContainer/useChained.d.ts +6 -0
  68. package/lib/MessagesContainer/useChained.d.ts.map +1 -0
  69. package/lib/MessagesContainer/useChained.js +38 -0
  70. package/lib/MessagesContainer/useChained.js.map +1 -0
  71. package/lib/MessagesContainer/useListChrome.d.ts.map +1 -1
  72. package/lib/MessagesContainer/useListChrome.js +1 -1
  73. package/lib/MessagesContainer/useListChrome.js.map +1 -1
  74. package/lib/Models.d.ts +2 -1
  75. package/lib/Models.d.ts.map +1 -1
  76. package/lib/Models.js.map +1 -1
  77. package/lib/Send.d.ts.map +1 -1
  78. package/lib/Send.js +18 -13
  79. package/lib/Send.js.map +1 -1
  80. package/lib/Theme.d.ts +11 -0
  81. package/lib/Theme.d.ts.map +1 -1
  82. package/lib/Theme.js +17 -1
  83. package/lib/Theme.js.map +1 -1
  84. package/lib/attachments/AttachmentButton.js +17 -15
  85. package/lib/attachments/AttachmentButton.js.map +1 -1
  86. package/lib/attachments/AttachmentMenu/GalleryGrid.d.ts +3 -1
  87. package/lib/attachments/AttachmentMenu/GalleryGrid.d.ts.map +1 -1
  88. package/lib/attachments/AttachmentMenu/GalleryGrid.js +69 -68
  89. package/lib/attachments/AttachmentMenu/GalleryGrid.js.map +1 -1
  90. package/lib/attachments/AttachmentMenu/TabPanel.d.ts +3 -1
  91. package/lib/attachments/AttachmentMenu/TabPanel.d.ts.map +1 -1
  92. package/lib/attachments/AttachmentMenu/TabPanel.js +23 -21
  93. package/lib/attachments/AttachmentMenu/TabPanel.js.map +1 -1
  94. package/lib/attachments/AttachmentMenu/index.d.ts +6 -2
  95. package/lib/attachments/AttachmentMenu/index.d.ts.map +1 -1
  96. package/lib/attachments/AttachmentMenu/index.js +259 -247
  97. package/lib/attachments/AttachmentMenu/index.js.map +1 -1
  98. package/lib/attachments/buildMessages.d.ts +4 -4
  99. package/lib/attachments/buildMessages.d.ts.map +1 -1
  100. package/lib/attachments/buildMessages.js +9 -8
  101. package/lib/attachments/buildMessages.js.map +1 -1
  102. package/lib/attachments/types.d.ts +19 -0
  103. package/lib/attachments/types.d.ts.map +1 -1
  104. package/lib/attachments/types.js.map +1 -1
  105. package/lib/components/TouchableOpacity.d.ts +5 -0
  106. package/lib/components/TouchableOpacity.d.ts.map +1 -1
  107. package/lib/components/TouchableOpacity.js +59 -54
  108. package/lib/components/TouchableOpacity.js.map +1 -1
  109. package/lib/components/defaultMessageActions.d.ts +3 -1
  110. package/lib/components/defaultMessageActions.d.ts.map +1 -1
  111. package/lib/components/defaultMessageActions.js +9 -1
  112. package/lib/components/defaultMessageActions.js.map +1 -1
  113. package/lib/components/textHighlight.d.ts +14 -0
  114. package/lib/components/textHighlight.d.ts.map +1 -0
  115. package/lib/components/textHighlight.js +39 -0
  116. package/lib/components/textHighlight.js.map +1 -0
  117. package/lib/hooks/useKeyboardVerticalOffset.d.ts +6 -0
  118. package/lib/hooks/useKeyboardVerticalOffset.d.ts.map +1 -1
  119. package/lib/hooks/useKeyboardVerticalOffset.js +35 -13
  120. package/lib/hooks/useKeyboardVerticalOffset.js.map +1 -1
  121. package/lib/i18n.d.ts +2 -0
  122. package/lib/i18n.d.ts.map +1 -1
  123. package/lib/i18n.js +1 -0
  124. package/lib/i18n.js.map +1 -1
  125. package/lib/index.d.ts +3 -1
  126. package/lib/index.d.ts.map +1 -1
  127. package/lib/index.js +1 -0
  128. package/lib/index.js.map +1 -1
  129. package/lib/linkParser.d.ts +4 -1
  130. package/lib/linkParser.d.ts.map +1 -1
  131. package/lib/linkParser.js +115 -78
  132. package/lib/linkParser.js.map +1 -1
  133. package/lib/locales/ar.d.ts.map +1 -1
  134. package/lib/locales/ar.js +1 -0
  135. package/lib/locales/ar.js.map +1 -1
  136. package/lib/locales/de.d.ts.map +1 -1
  137. package/lib/locales/de.js +1 -0
  138. package/lib/locales/de.js.map +1 -1
  139. package/lib/locales/es.d.ts.map +1 -1
  140. package/lib/locales/es.js +1 -0
  141. package/lib/locales/es.js.map +1 -1
  142. package/lib/locales/fr.d.ts.map +1 -1
  143. package/lib/locales/fr.js +1 -0
  144. package/lib/locales/fr.js.map +1 -1
  145. package/lib/locales/hi.d.ts.map +1 -1
  146. package/lib/locales/hi.js +1 -0
  147. package/lib/locales/hi.js.map +1 -1
  148. package/lib/locales/id.d.ts.map +1 -1
  149. package/lib/locales/id.js +1 -0
  150. package/lib/locales/id.js.map +1 -1
  151. package/lib/locales/it.d.ts.map +1 -1
  152. package/lib/locales/it.js +1 -0
  153. package/lib/locales/it.js.map +1 -1
  154. package/lib/locales/ja.d.ts.map +1 -1
  155. package/lib/locales/ja.js +1 -0
  156. package/lib/locales/ja.js.map +1 -1
  157. package/lib/locales/ko.d.ts.map +1 -1
  158. package/lib/locales/ko.js +1 -0
  159. package/lib/locales/ko.js.map +1 -1
  160. package/lib/locales/nl.d.ts.map +1 -1
  161. package/lib/locales/nl.js +1 -0
  162. package/lib/locales/nl.js.map +1 -1
  163. package/lib/locales/pl.d.ts.map +1 -1
  164. package/lib/locales/pl.js +1 -0
  165. package/lib/locales/pl.js.map +1 -1
  166. package/lib/locales/pt.d.ts.map +1 -1
  167. package/lib/locales/pt.js +1 -0
  168. package/lib/locales/pt.js.map +1 -1
  169. package/lib/locales/ru.d.ts.map +1 -1
  170. package/lib/locales/ru.js +1 -0
  171. package/lib/locales/ru.js.map +1 -1
  172. package/lib/locales/tr.d.ts.map +1 -1
  173. package/lib/locales/tr.js +1 -0
  174. package/lib/locales/tr.js.map +1 -1
  175. package/lib/locales/zh.d.ts.map +1 -1
  176. package/lib/locales/zh.js +1 -0
  177. package/lib/locales/zh.js.map +1 -1
  178. package/llms.txt +1 -1
  179. package/package.json +1 -1
package/README.md CHANGED
@@ -127,6 +127,15 @@ That is the whole setup - everything below is optional.
127
127
 
128
128
  ## ✨ Features
129
129
 
130
+ <!-- chat-showcase:start -->
131
+ <p align="center">
132
+ <picture>
133
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/features-dark.gif" />
134
+ <img width="760" src="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/features-light.gif" alt="A chat with an assistant, opened on a big waving emoji and quick replies: a long press adds a heart reaction, a swipe quotes the message in the composer, the reply is sent and its ticks turn to read, the assistant's answer streams in word by word with a link preview, a held mic sends a voice note, a round video note is filmed and sent, a photo is picked from the attachment sheet, then the same chat switches to the dark theme. Beside it, the features list and the other built-in features" />
135
+ </picture>
136
+ </p>
137
+ <!-- chat-showcase:end -->
138
+
130
139
  - 💬 **[Chat list](#chat-list)** - the list of chats with search, selection actions, archive, swipe to archive and draggable pinned chats; plug in your backend
131
140
  - 🌗 **[Dark mode & theming](#theming--dark-mode)** - full light/dark token system, switchable at runtime
132
141
  - 🤖 **[Streaming AI messages](#streaming-ai-messages)** - token-by-token replies with a typing caret and stop control
@@ -620,6 +629,7 @@ Every group below is collapsed - open the one you need.
620
629
 
621
630
  - **`messagesContainerRef`** _(`LegendListRef`)_ - Ref to the message list, a [Legend List](https://legendapp.com/open-source/list/) ref: `scrollToEnd`, `scrollToKey` (keys are message `_id`s as strings), `scrollToIndex`, `getState`. Indexes count from the oldest message
622
631
  - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
632
+ - **`chatRef`** _(`ChatHandle` ref)_ - `chatRef.current.scrollToMessage(id, { animated, viewPosition, isHighlighted })` scrolls to a message, also one far up the history, and with `isHighlighted` flashes it the way a tapped quote does. For a search result or a deep link
623
633
 
624
634
  </details>
625
635
 
@@ -628,6 +638,7 @@ Every group below is collapsed - open the one you need.
628
638
 
629
639
  ### Keyboard & Layout
630
640
 
641
+ - **`bottomInset`** _(Number)_ - The composer's space for the home indicator; measured by default. Pass it when the host already knows it, e.g. a chat inside a sliding panel whose own inset arrives late. It is still given up while the keyboard or the emoji panel covers it
631
642
  - **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling. No defaults are applied - in particular Chat does **not** set `statusBarTranslucent` / `navigationBarTranslucent`, because on Android those change the *activity window* and the change outlives the chat screen ([#2755](https://github.com/FaridSafi/react-native-gifted-chat/issues/2755)). `react-native-keyboard-controller` turns them on by itself when the app is genuinely edge-to-edge, so there is nothing to set in a normal app.
632
643
 
633
644
  Only used when Chat mounts the provider itself. If your app already mounts a `KeyboardProvider` (the setup `react-native-keyboard-controller` recommends - once, at the root), Chat detects it and reuses it instead of nesting a second one, and this prop is ignored. Configure the provider where you mount it.
@@ -663,7 +674,7 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
663
674
  - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override Chat's internal state. Useful for managing text state outside of Chat (e.g. with Redux). Don't forget to implement `textInputProps.onChangeText` to update the text state.
664
675
  - **`initialText`** _(String)_ - Initial text to display in the input field
665
676
  - **`onDraftChange`** _(Function)_ - `(draft: string) => void`, the user's unsent text as it changes (`''` once sent). Editing a message sets the draft aside and brings it back afterwards, without reporting the edited text. Save it with the chat and pass it back as `initialText`
666
- - **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty
677
+ - **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer, disabled while there is nothing to send. By default it shows only with text when voice or video notes can be recorded (their button takes the slot while the composer is empty), and always when neither can
667
678
  - **`isTextOptional`** _(Bool)_ - Allow sending messages without text (useful for media-only messages); default `false`. Use with `isSendButtonAlwaysVisible` for media attachments.
668
679
  - **`isMultiline`** _(Bool)_ - Whether the composer accepts multiple lines; default `true`. With `true` the return key inserts a newline and you send with the send button. Set `false` for a single-line composer whose **return key sends the message** (the keyboard's return key becomes "send" and stays open afterwards).
669
680
  - **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container
@@ -682,7 +693,7 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
682
693
 
683
694
  ### Actions & Action Sheet
684
695
 
685
- - **`attachments`** _(Bool | Object)_ - The built-in attachment menu behind the composer's paperclip, on by default; the paperclip shows when at least one tab's peer is installed. Tabs: `gallery` (an in-sheet grid with `expo-media-library`, the system picker with `expo-image-picker` otherwise), `camera` (`expo-image-picker`; a tab of its own only without the grid, which has a camera tile), `file` (`expo-document-picker`) and `location` (`expo-location`). Picks are sent through `onSend`: one `image` / `video` message per photo or video with the caption on the first, a `file` message per document, a `location` message. `false` hides the paperclip. An object configures it: `{ isEnabled?, tabs?, onPick?, renderAttachmentMenu? }` - `tabs` picks and orders them; `onPick(attachments, { caption })` intercepts the picks (`PickedAttachment[]`) and returns the messages to send, `null` to send nothing, or nothing for the default; `renderAttachmentMenu({ visible, onClose, tabs, onSend })` draws your own menu. Colors live in `theme.attachments`. `actions`, `onPressActionButton` and `renderActions` take precedence. See [Emoji keyboard and attachment menu](#emoji-keyboard-and-attachment-menu) for the permissions each peer needs.
696
+ - **`attachments`** _(Bool | Object)_ - The built-in attachment menu behind the composer's paperclip, on by default; the paperclip shows when at least one tab's peer is installed. Tabs: `gallery` (an in-sheet grid with `expo-media-library`, the system picker with `expo-image-picker` otherwise), `camera` (`expo-image-picker`; a tab of its own only without the grid, which has a camera tile), `file` (`expo-document-picker`) and `location` (`expo-location`). Picks are sent through `onSend`: one `image` / `video` message per photo or video with the caption on the first, a `file` message per document, a `location` message. `false` hides the paperclip. An object configures it: `{ isEnabled?, tabs?, pickers?, onPick?, renderAttachmentMenu? }` - `tabs` picks and orders them; `pickers` (`{ gallery?, camera?, file? }`, each an `async () => PickedAttachment[]` that returns `[]` on cancel) replaces the Expo pickers with your own, for an app that picks with other libraries, and shows that tab without its Expo peer; `isGalleryGridEnabled: false` leaves Gallery to the system picker instead of the in-sheet grid, for an app without Android's `READ_MEDIA_IMAGES` / `READ_MEDIA_VIDEO`; `onPick(attachments, { caption })` intercepts the picks (`PickedAttachment[]`) and returns the messages to send, `null` to send nothing, or nothing for the default; `renderAttachmentMenu({ visible, onClose, tabs, onSend })` draws your own menu. Colors live in `theme.attachments`. `actions`, `onPressActionButton` and `renderActions` take precedence. See [Emoji keyboard and attachment menu](#emoji-keyboard-and-attachment-menu) for the permissions each peer needs.
686
697
  - **`actions`** _(Array)_ - Action options for the composer "+" button. Array of `{ title, action }`; add `icon` (and optional `color`) to an action to render an attachment **grid** (tiles) instead of a list. Opens the built-in themed `AttachmentSheet` - no extra dependency.
687
698
  - **`onPressActionButton`** _(Function)_ - Callback when the "+" button is pressed (if set, the built-in `AttachmentSheet` is not shown)
688
699
  - **`actionSheet`** _(Function)_ - Escape hatch for a custom system action sheet. **The bundled `@expo/react-native-action-sheet` dependency was removed**, so `context.actionSheet()` defaults to a no-op; pass your own implementation (with `ActionSheetProvider` in your tree) if you relied on it.
@@ -705,7 +716,7 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
705
716
  - **`firstUnreadMessageId`** _(String | Number | null)_ - The first message the user has not read. A full-width "Unread Messages" bar is drawn above it and the chat opens scrolled so the bar is at the top. Keep it fixed while the chat is open (the bar stays until you leave), e.g. computed once from the unread count when the screen mounts.
706
717
  - **`renderUnreadSeparator`** _(Function | null)_ - Custom "Unread Messages" bar, or `null` to only scroll to the first unread message. The default is exported as `UnreadSeparator`.
707
718
  - **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)
708
- - **`listProps`** _(Object)_ - Extra props for the message list, an [`AnimatedLegendList`](https://legendapp.com/open-source/list/api/props/) (e.g. `drawDistance`, `maintainScrollAtEnd`, `onViewableItemsChanged`). The list renders oldest first, not inverted, so `onEndReached` fires at the newest message.
719
+ - **`listProps`** _(Object)_ - Extra props for the message list, an [`AnimatedLegendList`](https://legendapp.com/open-source/list/api/props/) (e.g. `drawDistance`, `maintainScrollAtEnd`, `onViewableItemsChanged`). The list renders oldest first, not inverted, so `onEndReached` fires at the newest message. Handlers the list uses itself (`onScrollBeginDrag` / `onScrollEndDrag`, `onMomentumScrollBegin` / `onMomentumScrollEnd`, `onContentSizeChange`, `onItemSizeChanged`, `onMetricsChange`, `onLayout`, the viewability callbacks) run after its own, and `contentContainerStyle` goes on top of its padding.
709
720
 
710
721
  ### Message Bubbles & Content
711
722
 
@@ -720,6 +731,8 @@ If you do, sanity-check it on device: a toolbar behind the keyboard means the va
720
731
  - **`defaultMessageActions`** _(Bool | `MessageActionKey[]`)_ - The built-in actions, in this order: `reply`, `copy`, `forward`, `pin`, `edit`, `select`, `delete`. Default `true` (all that can work); an array picks and orders them; `false` turns them off. Each shows only when it can work: Reply when `reply.isEnabled` is not `false`; Copy for messages with text when `expo-clipboard` or `@react-native-clipboard/clipboard` is installed; Edit on your own text messages when `onEditMessage` is set; Forward / Pin / Delete when their callbacks are set; Select when a selection can be acted on (a clipboard, Forward or Delete). They are also off when `onLongPressMessage` is set and `messageActions` is not, so an app that handles long-press itself keeps doing so.
721
732
  - **`onEditMessage`** _(Function(`message`, `text`))_ - Turns on the "Edit" action for your own text messages. Edit puts the text in the composer under an "Editing" banner; sending then calls this instead of `onSend`. Closing the banner cancels the edit.
722
733
  - **`onDeleteMessage`** _(Function(`message`))_ - Turns on the "Delete" action (not red).
734
+ - **`onRetryMessage`** _(Function(`message`))_ - Turns on "Retry" for your own messages that failed to send (`isFailed`), first in their menu above Delete, whatever `defaultMessageActions` lists.
735
+ - **`highlightText`** _(String)_ / **`highlightTextStyle`** _(TextStyle)_ - Words to mark in every message's text, links included (case-insensitive), e.g. the query of a search in the chat; yellow behind black text by default.
723
736
  - **`onForwardMessage`** _(Function(`message`))_ - Turns on the "Forward" action.
724
737
  - **`onForwardMessages`** _(Function(`messages`))_ - Forwards the messages checked in selection mode, oldest first (also turns on "Forward"). Without it the selection bar's Forward calls `onForwardMessage` once per message.
725
738
  - **`onDeleteMessages`** _(Function(`messages`))_ - Deletes the messages checked in selection mode, oldest first (also turns on "Delete"). Without it the selection bar's Delete calls `onDeleteMessage` once per message.
@@ -869,7 +882,7 @@ Avatars and sender names show in group chats only: a one-to-one chat has neither
869
882
  - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use `renderFooter` it will override this.
870
883
  - **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component
871
884
  - **`typingIndicatorStyle`** _(StyleProp<ViewStyle>)_ - Custom style for the TypingIndicator component.
872
- - **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedRenderingExample.tsx](example/components/chat-examples/CustomizedRenderingExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.
885
+ - **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedRenderingExample.tsx](example/components/chat-examples/CustomizedRenderingExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true; the indicator comes as the second argument, `renderFooter(props, typingIndicator)`, to keep it next to your own footer.
873
886
  - **`TypingStatus`** _(Component)_ - The messenger way to show it: in your chat header, three dots that swell in turn before "typing" (waves for a recording, arrows for an upload). `<TypingStatus users={typingUsers} action='recordingVoice' isGroup color={accent} />` reads "typing", "Anna is typing", "Anna and Max are typing", "recording a voice message"... `ChatList` rows use it for `typingUsers` / `typingAction`, and `getTypingText` gives the text alone
874
887
 
875
888
  ### Quick Replies
@@ -963,6 +976,8 @@ const list = useChatList(initialChats)
963
976
  | `isSortEnabled` | Pinned first, then by newest message (default `true`) |
964
977
  | `isDeleteConfirmed` / `isSwipeEnabled` | Ask before deleting; swipe to archive (both default `true`) |
965
978
  | `isHeaderVisible` / `title` / `renderHeaderRight` / `isTopInsetApplied` | The built-in header (hide it to use your navigator's) |
979
+ | `headerRightPosition` | `renderHeaderRight` before the search button (default) or `'afterSearch'`, e.g. for a close button |
980
+ | `timeFormat` / `dateFormat` | dayjs formats for a row's time today (`'HH:mm'` for a 24-hour clock) and its date before this week (`'DD.MM.YY'`) |
966
981
  | `isSearchEnabled` / `filterChat` / `onSearchChange` | Search; a custom match; a server-side search |
967
982
  | `isArchiveOpen` / `onArchiveOpenChange` | Control which list shows |
968
983
  | `renderChat` / `renderEmpty` / `listProps` / `style` | A custom row (`ChatListCell` is the built-in one), the empty text, FlatList props (`onEndReached`, `refreshControl`...) |
@@ -970,6 +985,21 @@ const list = useChatList(initialChats)
970
985
 
971
986
  `ChatListCell`, `ChatListAvatar`, `ChatListShimmer`, `sortChats`, `getChatPreview` and `formatChatListDate` are exported for building your own row or screen.
972
987
 
988
+ `ChatHeader` is the chat screen's bar to match: back arrow, a 42 avatar, the name with a status line under it ("online" and "typing" in the accent color) and your buttons at the end, in `theme.chatList`'s header colors.
989
+
990
+ ```tsx
991
+ <ChatHeader
992
+ title='Anna Petrova'
993
+ subtitle={isOnline ? 'online' : 'last seen recently'}
994
+ isSubtitleActive={isOnline}
995
+ typingUsers={typingUsers}
996
+ avatar={{ id: chat.id, uri: chat.avatar }}
997
+ onBack={navigation.goBack}
998
+ onPressTitle={openProfile}
999
+ renderRight={() => <CallButton />}
1000
+ />
1001
+ ```
1002
+
973
1003
  ### Reply to Messages
974
1004
 
975
1005
  <details>
@@ -1385,6 +1415,8 @@ Token groups: `colors`, `radii`, `spacing`, `typography`, `avatar`, `sendButton`
1385
1415
  - **`wallpaper`** - `isEnabled`, `colors` (three or four, for the swirl gradient), `isAnimated` (one step per outgoing message), `pattern` (an image tiled over the gradient; no pattern is bundled), `patternOpacity`, `patternColor`. Off, the chat shows `colors.background`. Replace it entirely with the `renderWallpaper` prop, or draw it elsewhere with the exported `ChatWallpaper` component.
1386
1416
  - **`nameColors`** - the seven sender-name colors, picked per user id. Empty uses `colors.senderName`.
1387
1417
  - **`avatar.palette` / `avatar.paletteEnd`** - initials avatar gradient stops, picked per user id. An empty `paletteEnd` draws flat colors.
1418
+ - **`textScale`** - the text size the user picked, a multiplier of every `typography` size (1 by default): messages, times, names, day and service pills, quotes and the composer grow together, e.g. `theme={{ textScale: 1.2 }}`.
1419
+ - **`chatList.headerSubtitle` / `chatList.headerSubtitleActive`** - `ChatHeader`'s status line, grey and in the accent color.
1388
1420
 
1389
1421
  A few behaviours follow from the tokens: setting `colors.outgoingBubble` turns the gradient off, setting `colors.senderName` empties `nameColors`, and setting `avatar.palette` without `paletteEnd` draws flat avatars - so an app that picks its own colors keeps seeing them. Bubbles in a run (same sender, at most five minutes apart, `utils.isSameGroup`) share one tail and one name, 2pt apart (`spacing.withinGroup`), with 6pt between runs (`spacing.betweenGroups`).
1390
1422
 
@@ -1 +1 @@
1
- {"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAC/D,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EAAE,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,8BAA8B,CAAA;AAShF,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oFAAoF;IACpF,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAA0B,EAC1B,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBAmDd"}
1
+ {"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAA;AAC/D,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EAAE,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,8BAA8B,CAAA;AAShF,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oFAAoF;IACpF,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAA0B,EAC1B,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBAqDd"}
package/lib/Actions.js CHANGED
@@ -9,7 +9,7 @@ import { useLabels } from './hooks/useLabels';
9
9
  import { useThemedStyles } from './hooks/useTheme';
10
10
  import stylesCommon from './styles';
11
11
  export function Actions(t0) {
12
- const $ = _c(26);
12
+ const $ = _c(27);
13
13
  const {
14
14
  actions,
15
15
  actionSheetOptionTintColor,
@@ -67,47 +67,49 @@ export function Actions(t0) {
67
67
  } else {
68
68
  t5 = $[9];
69
69
  }
70
- let t6;
70
+ const t6 = styles.ripple;
71
+ let t7;
71
72
  if ($[10] !== renderIcon) {
72
- t6 = renderIcon();
73
+ t7 = renderIcon();
73
74
  $[10] = renderIcon;
74
- $[11] = t6;
75
+ $[11] = t7;
75
76
  } else {
76
- t6 = $[11];
77
+ t7 = $[11];
77
78
  }
78
- let t7;
79
- if ($[12] !== handlePress || $[13] !== labels.attachButton || $[14] !== t5 || $[15] !== t6) {
80
- t7 = <TouchableOpacity onPress={handlePress} hitSlop={8} accessibilityRole="button" accessibilityLabel={t4} style={t5}>{t6}</TouchableOpacity>;
79
+ let t8;
80
+ if ($[12] !== handlePress || $[13] !== labels.attachButton || $[14] !== styles.ripple || $[15] !== t5 || $[16] !== t7) {
81
+ t8 = <TouchableOpacity onPress={handlePress} hitSlop={8} accessibilityRole="button" accessibilityLabel={t4} style={t5} buttonStyle={t6}>{t7}</TouchableOpacity>;
81
82
  $[12] = handlePress;
82
83
  $[13] = labels.attachButton;
83
- $[14] = t5;
84
- $[15] = t6;
84
+ $[14] = styles.ripple;
85
+ $[15] = t5;
85
86
  $[16] = t7;
87
+ $[17] = t8;
86
88
  } else {
87
- t7 = $[16];
89
+ t8 = $[17];
88
90
  }
89
- let t8;
90
- if ($[17] !== actionSheetOptionTintColor || $[18] !== actions || $[19] !== isSheetVisible || $[20] !== onPressActionButton) {
91
- t8 = !onPressActionButton && !!actions?.length && <AttachmentSheet visible={isSheetVisible} actions={actions} onClose={() => setIsSheetVisible(false)} tintColor={actionSheetOptionTintColor} />;
92
- $[17] = actionSheetOptionTintColor;
93
- $[18] = actions;
94
- $[19] = isSheetVisible;
95
- $[20] = onPressActionButton;
96
- $[21] = t8;
91
+ let t9;
92
+ if ($[18] !== actionSheetOptionTintColor || $[19] !== actions || $[20] !== isSheetVisible || $[21] !== onPressActionButton) {
93
+ t9 = !onPressActionButton && !!actions?.length && <AttachmentSheet visible={isSheetVisible} actions={actions} onClose={() => setIsSheetVisible(false)} tintColor={actionSheetOptionTintColor} />;
94
+ $[18] = actionSheetOptionTintColor;
95
+ $[19] = actions;
96
+ $[20] = isSheetVisible;
97
+ $[21] = onPressActionButton;
98
+ $[22] = t9;
97
99
  } else {
98
- t8 = $[21];
100
+ t9 = $[22];
99
101
  }
100
- let t9;
101
- if ($[22] !== styles.container || $[23] !== t7 || $[24] !== t8) {
102
- t9 = <View style={t3}>{t7}{t8}</View>;
103
- $[22] = styles.container;
104
- $[23] = t7;
102
+ let t10;
103
+ if ($[23] !== styles.container || $[24] !== t8 || $[25] !== t9) {
104
+ t10 = <View style={t3}>{t8}{t9}</View>;
105
+ $[23] = styles.container;
105
106
  $[24] = t8;
106
107
  $[25] = t9;
108
+ $[26] = t10;
107
109
  } else {
108
- t9 = $[25];
110
+ t10 = $[26];
109
111
  }
110
- return t9;
112
+ return t10;
111
113
  }
112
114
  const createStyles = theme => StyleSheet.create({
113
115
  container: {
@@ -121,6 +123,10 @@ const createStyles = theme => StyleSheet.create({
121
123
  alignItems: 'center',
122
124
  justifyContent: 'center'
123
125
  },
126
+ ripple: {
127
+ borderRadius: 22,
128
+ overflow: 'hidden'
129
+ },
124
130
  // Inset attachment icon: borderless, in the island's icon color (`glass_defaultIcon`).
125
131
  iconText: {
126
132
  color: theme.colors.composerIcon,
@@ -1 +1 @@
1
- {"version":3,"file":"Actions.js","names":["React","useCallback","useState","StyleSheet","View","AttachmentSheet","Icon","PaperclipIcon","TouchableOpacity","useLabels","useThemedStyles","stylesCommon","Actions","t0","$","_c","actions","actionSheetOptionTintColor","icon","wrapperStyle","onPressActionButton","buttonStyle","styles","createStyles","labels","isSheetVisible","setIsSheetVisible","t1","length","handlePress","t2","iconText","size","fontSize","centerItems","color","renderIcon","t3","container","t4","attachButton","t5","button","t6","t7","t8","t9","theme","create","alignItems","justifyContent","width","height","composer","minHeight","colors","composerIcon","fontWeight","lineHeight"],"sources":["../src/Actions.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useState } from 'react'\nimport {\n StyleSheet,\n View,\n StyleProp,\n ViewStyle,\n TextStyle } from 'react-native'\nimport { AttachmentAction, AttachmentSheet } from './components/AttachmentSheet'\nimport { Icon } from './components/Icon'\nimport { PaperclipIcon } from './components/MediaControls'\nimport { TouchableOpacity } from './components/TouchableOpacity'\nimport { useLabels } from './hooks/useLabels'\nimport { useThemedStyles } from './hooks/useTheme'\nimport stylesCommon from './styles'\nimport { ChatTheme } from './Theme'\n\nexport interface ActionsProps {\n /** Actions shown in the attachment sheet. Add `icon`/`color` for a grid layout. */\n actions?: AttachmentAction[]\n /** Tint color for the action labels in the sheet (defaults to the theme accent). */\n actionSheetOptionTintColor?: string\n icon?: () => ReactNode\n wrapperStyle?: StyleProp<ViewStyle>\n iconTextStyle?: StyleProp<TextStyle>\n buttonStyle?: StyleProp<ViewStyle>\n onPressActionButton?(): void\n}\n\nexport function Actions ({\n actions,\n actionSheetOptionTintColor,\n icon,\n wrapperStyle,\n onPressActionButton,\n buttonStyle,\n}: ActionsProps) {\n const styles = useThemedStyles(createStyles)\n const labels = useLabels()\n const [isSheetVisible, setIsSheetVisible] = useState(false)\n\n const handlePress = useCallback(() => {\n if (onPressActionButton) {\n onPressActionButton()\n return\n }\n\n if (actions?.length)\n setIsSheetVisible(true)\n }, [actions, onPressActionButton])\n\n const renderIcon = useCallback(() => {\n if (icon)\n return icon()\n\n const size = styles.iconText.fontSize\n return (\n <View style={[stylesCommon.centerItems, wrapperStyle]}>\n <Icon name='paperclip' color={styles.iconText.color} size={size} fallback={<PaperclipIcon color={styles.iconText.color} size={size} />} />\n </View>\n )\n }, [icon, wrapperStyle, styles])\n\n return (\n <View style={styles.container}>\n <TouchableOpacity\n onPress={handlePress}\n hitSlop={8}\n accessibilityRole='button'\n accessibilityLabel={labels.attachButton}\n style={[styles.button, buttonStyle]}\n >\n {renderIcon()}\n </TouchableOpacity>\n {/* The sheet only serves `actions`. With a press handler (the built-in attachment menu) it\n can never open, and a native sheet mounted in every composer for nothing slowed each\n chat opening. */}\n {!onPressActionButton && !!actions?.length && (\n <AttachmentSheet\n visible={isSheetVisible}\n actions={actions}\n onClose={() => setIsSheetVisible(false)}\n tintColor={actionSheetOptionTintColor}\n />\n )}\n </View>\n )\n}\n\nconst createStyles = (theme: ChatTheme) => StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n // The paperclip takes a 44 cell inside the composer island.\n button: {\n width: 44,\n height: theme.composer.minHeight,\n alignItems: 'center',\n justifyContent: 'center',\n },\n // Inset attachment icon: borderless, in the island's icon color (`glass_defaultIcon`).\n iconText: {\n color: theme.colors.composerIcon,\n fontWeight: 'bold',\n fontSize: 24,\n lineHeight: 24,\n },\n})\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Actions.js","names":["React","useCallback","useState","StyleSheet","View","AttachmentSheet","Icon","PaperclipIcon","TouchableOpacity","useLabels","useThemedStyles","stylesCommon","Actions","t0","$","_c","actions","actionSheetOptionTintColor","icon","wrapperStyle","onPressActionButton","buttonStyle","styles","createStyles","labels","isSheetVisible","setIsSheetVisible","t1","length","handlePress","t2","iconText","size","fontSize","centerItems","color","renderIcon","t3","container","t4","attachButton","t5","button","t6","ripple","t7","t8","t9","t10","theme","create","alignItems","justifyContent","width","height","composer","minHeight","borderRadius","overflow","colors","composerIcon","fontWeight","lineHeight"],"sources":["../src/Actions.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useState } from 'react'\nimport {\n StyleSheet,\n View,\n StyleProp,\n ViewStyle,\n TextStyle } from 'react-native'\nimport { AttachmentAction, AttachmentSheet } from './components/AttachmentSheet'\nimport { Icon } from './components/Icon'\nimport { PaperclipIcon } from './components/MediaControls'\nimport { TouchableOpacity } from './components/TouchableOpacity'\nimport { useLabels } from './hooks/useLabels'\nimport { useThemedStyles } from './hooks/useTheme'\nimport stylesCommon from './styles'\nimport { ChatTheme } from './Theme'\n\nexport interface ActionsProps {\n /** Actions shown in the attachment sheet. Add `icon`/`color` for a grid layout. */\n actions?: AttachmentAction[]\n /** Tint color for the action labels in the sheet (defaults to the theme accent). */\n actionSheetOptionTintColor?: string\n icon?: () => ReactNode\n wrapperStyle?: StyleProp<ViewStyle>\n iconTextStyle?: StyleProp<TextStyle>\n buttonStyle?: StyleProp<ViewStyle>\n onPressActionButton?(): void\n}\n\nexport function Actions ({\n actions,\n actionSheetOptionTintColor,\n icon,\n wrapperStyle,\n onPressActionButton,\n buttonStyle,\n}: ActionsProps) {\n const styles = useThemedStyles(createStyles)\n const labels = useLabels()\n const [isSheetVisible, setIsSheetVisible] = useState(false)\n\n const handlePress = useCallback(() => {\n if (onPressActionButton) {\n onPressActionButton()\n return\n }\n\n if (actions?.length)\n setIsSheetVisible(true)\n }, [actions, onPressActionButton])\n\n const renderIcon = useCallback(() => {\n if (icon)\n return icon()\n\n const size = styles.iconText.fontSize\n return (\n <View style={[stylesCommon.centerItems, wrapperStyle]}>\n <Icon name='paperclip' color={styles.iconText.color} size={size} fallback={<PaperclipIcon color={styles.iconText.color} size={size} />} />\n </View>\n )\n }, [icon, wrapperStyle, styles])\n\n return (\n <View style={styles.container}>\n <TouchableOpacity\n onPress={handlePress}\n hitSlop={8}\n accessibilityRole='button'\n accessibilityLabel={labels.attachButton}\n style={[styles.button, buttonStyle]}\n // Android's press ripple takes the button's shape: a circle around the icon\n buttonStyle={styles.ripple}\n >\n {renderIcon()}\n </TouchableOpacity>\n {/* The sheet only serves `actions`. With a press handler (the built-in attachment menu) it\n can never open, and a native sheet mounted in every composer for nothing slowed each\n chat opening. */}\n {!onPressActionButton && !!actions?.length && (\n <AttachmentSheet\n visible={isSheetVisible}\n actions={actions}\n onClose={() => setIsSheetVisible(false)}\n tintColor={actionSheetOptionTintColor}\n />\n )}\n </View>\n )\n}\n\nconst createStyles = (theme: ChatTheme) => StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n // The paperclip takes a 44 cell inside the composer island.\n button: {\n width: 44,\n height: theme.composer.minHeight,\n alignItems: 'center',\n justifyContent: 'center',\n },\n ripple: {\n borderRadius: 22,\n overflow: 'hidden',\n },\n // Inset attachment icon: borderless, in the island's icon color (`glass_defaultIcon`).\n iconText: {\n color: theme.colors.composerIcon,\n fontWeight: 'bold',\n fontSize: 24,\n lineHeight: 24,\n },\n})\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AAOd,OAAO,EAAE,QAAQ,EAAQ,MAAM,WAAW,CAAA;AAS1C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAYnC,wBAAgB,IAAI,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACvD,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,qBA+M3B"}
1
+ {"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../src/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAA;AAQd,OAAO,EAAE,QAAQ,EAAQ,MAAM,WAAW,CAAA;AAS1C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAYnC,wBAAgB,IAAI,CAAC,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EACvD,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,qBAoO3B"}