@kesha-antonov/react-native-chat 4.1.0 → 4.3.0

package/README.md

@@ -1,6 +1,8 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm version" src="https://badge.fury.io/js/@kesha-antonov%2Freact-native-chat.svg"/></a>
   <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@kesha-antonov%2Freact-native-chat.svg"/></a>
+  <a href="https://npm-stat.com/charts.html?package=%40kesha-antonov%2Freact-native-chat&from=2015-01-01"><img alt="total npm downloads" src="https://img.shields.io/badge/total%20downloads-466-blue.svg"/></a>
+  <a href="https://www.npmjs.com/package/@kesha-antonov/react-native-chat"><img alt="npm downloads (last 18 months)" src="https://img.shields.io/npm/dt/@kesha-antonov%2Freact-native-chat.svg?label=18-months%20downloads"/></a>
   <a href="https://github.com/kesha-antonov/react-native-chat/actions/workflows/main.yml"><img src="https://github.com/kesha-antonov/react-native-chat/actions/workflows/main.yml/badge.svg" alt="build"></a>
   <img src="https://img.shields.io/badge/platforms-iOS%20%7C%20Android%20%7C%20Web-lightgrey.svg" alt="platforms">
   <img src="https://img.shields.io/badge/TypeScript-supported-blue.svg" alt="TypeScript">
@@ -13,17 +15,34 @@
   The most complete chat UI for React Native & Web
 </p>
 
+<p align="center">
+  <img width="300" src="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/streaming-demo.gif" alt="Streaming AI reply rendering markdown token by token" />
+</p>
+
 <p align="center">
   <a href="https://snack.expo.dev/@kesha-antonov/react-native-chat-playground" target="_blank">
     <img src="https://img.shields.io/badge/▶️_Try_in_Browser-4630EB?style=for-the-badge&logo=expo&logoColor=white" alt="Try Chat on Expo Snack"/>
   </a>
 </p>
 
+<p align="center">
+  <strong>Coming from <code>react-native-gifted-chat</code>?</strong> This is a drop-in replacement -
+  same <code>IMessage</code>, same props, a few renamed exports.
+  <br/>
+  <a href="docs/MIGRATION.md">Migrate in one command with the codemod →</a>
+</p>
+
 ---
 
 ## ✨ Features
 
+> Actively maintained, New Architecture ready, and built for the latest Reanimated/Gesture Handler. A modern, themeable, drop-in successor to `react-native-gifted-chat`. **[See what is new ▸](#-whats-new-vs-react-native-gifted-chat)**
+
+- 🌗 **[Modern UI, Dark Mode & Theming](#-whats-new-vs-react-native-gifted-chat)** - A clean, modern default look with a full light/dark theme system, runtime theme switching, and every token overridable
 - 🤖 **[Streaming (AI) Messages](#streaming-ai-messages)** - Token-by-token streamed replies with a typing cursor and stop control
+- 🎥 **[Video & Audio Messages](#-whats-new-vs-react-native-gifted-chat)** - Real inline playback (optional `expo-video` / `expo-audio`) with a graceful tappable fallback - no more "implement it yourself"
+- 🎙️ **[Voice & Video Recording](#-whats-new-vs-react-native-gifted-chat)** - Telegram-style hold-to-record voice notes and camera video messages (optional, opt-in)
+- 📍 **[Location Messages](#-whats-new-vs-react-native-gifted-chat)** - Map card that opens the system maps app on tap
 - 🎨 **[Fully Customizable](#-props-reference)** - Override any component with your own implementation
 - 📎 **[Composer Actions](#actions--action-sheet)** - Attach photos, files, or trigger custom actions
 - ↩️ **[Reply to Messages](#reply-to-messages)** - Swipe-to-reply with reply preview and message threading
@@ -53,6 +72,75 @@
 
 ---
 
+## 🆕 What's new vs react-native-gifted-chat
+
+This library is kept in sync with upstream [`react-native-gifted-chat`](https://github.com/FaridSafi/react-native-gifted-chat)'s latest `master`, so you **keep everything it already has** - New Architecture support, the animated sticky day header, Reanimated 3/4, Gesture Handler, TypeScript - and the same `IMessage` model and prop names. **Moving over is a package swap plus a rename** (see [Migrating](#-migrating-from-react-native-gifted-chat)).
+
+On top of that, this fork adds the features people kept asking upstream for, plus a modern look out of the box:
+
+| Added in this fork | react-native-gifted-chat | @kesha-antonov/react-native-chat |
+| --- | :---: | :---: |
+| Active maintenance | 💤 sporadic | ✅ active |
+| Modern default UI (Telegram-inspired) | dated 2020 look | ✅ modern, fully overridable |
+| Light/Dark **theme system** | per-component color props | ✅ `theme` / `darkTheme` tokens, runtime switch |
+| Streaming (AI) messages | ❌ | ✅ token-by-token + typing cursor |
+| Emoji reactions | ❌ | ✅ long-press picker + reaction pills |
+| Swipe-to-reply + reply preview | ❌ | ✅ built in |
+| **Video / audio messages** | "not implemented, render your own" | ✅ inline players + tappable fallback |
+| **Voice notes** (hold-to-record + waveform) | ❌ | ✅ optional, Telegram-style |
+| **Video messages** (round camera notes) | ❌ | ✅ optional, Telegram-style |
+| **Location messages** | ❌ ignored | ✅ map card → opens system maps |
+| Bubble tails + tighter message grouping | flat bubbles | ✅ |
+
+Everything new is **non-breaking and opt-in**: keep passing the same props you do today and you simply get the modern look and the extra features for free. The media/recording features only activate when you install their optional peer deps and enable them - nobody is forced to add a single dependency.
+
+### Theming in one line
+
+```jsx
+// Modern defaults out of the box, or override any token (light + dark):
+<Chat
+  theme={{ colors: { accent: '#3390EC', outgoingBubble: '#EFFEDE' } }}
+  darkTheme={{ colors: { background: '#0E1621' } }}
+  {...props}
+/>
+```
+
+### Voice, video and location
+
+```jsx
+<Chat
+  audioRecording={{ isEnabled: true }}   // hold the mic to record a voice note (needs expo-audio)
+  videoRecording={{ isEnabled: true }}   // record a video message (needs expo-image-picker)
+  // location messages render automatically for any IMessage with a `location`
+  {...props}
+/>
+```
+
+```bash
+# Optional inline media playback + recording:
+npx expo install expo-video expo-audio expo-image-picker
+```
+
+### Custom icons (e.g. Lucide)
+
+Built-in icons are the official [Lucide](https://lucide.dev) glyphs, rendered via the optional `react-native-svg` peer when it is installed, or drawn with `View`s (no dependency) otherwise. Override any of them via the `icons` prop - for example with [`lucide-react-native`](https://lucide.dev/) - and the built-in icon is used for anything you don't override:
+
+```tsx
+import { Send, Mic } from 'lucide-react-native'
+
+<Chat
+  icons={{
+    send: ({ color, size }) => <Send color={color} size={size} />,
+    mic:  ({ color, size }) => <Mic color={color} size={size} />,
+  }}
+  {...props}
+/>
+```
+
+Overridable names: `send`, `mic`, `camera`, `play`, `pause`, `check`, `checkAll`, `clock`, `pin`, `plus`, `close`, `chevronLeft`, `chevronDown`, `emoji`, `paperclip`, `reply`, `pencil`, `lock`, `trash`.
+
+---
+
 <h3 align="center">Support This Project</h3>
 
 <p align="center">
@@ -68,6 +156,7 @@
 ## 📖 Table of Contents
 
 - [Features](#-features)
+- [What's new vs react-native-gifted-chat](#-whats-new-vs-react-native-gifted-chat)
 - [Requirements](#-requirements)
 - [Installation](#-installation)
 - [Migrating from react-native-gifted-chat](#-migrating-from-react-native-gifted-chat)
@@ -75,6 +164,7 @@
 - [Props Reference](#-props-reference)
 - [Data Structure](#-data-structure)
 - [Platform Notes](#-platform-notes)
+- [Performance](#-performance)
 - [Example App](#-example-app)
 - [Troubleshooting](#-troubleshooting)
 - [Contributing](#-contributing)
@@ -100,7 +190,7 @@
 ### Expo Projects
 
 ```bash
-npx expo install react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
+npx expo install @kesha-antonov/react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 ### Bare React Native Projects
@@ -109,12 +199,12 @@ npx expo install react-native-chat react-native-reanimated react-native-gesture-
 
 Using yarn:
 ```bash
-yarn add react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
+yarn add @kesha-antonov/react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 Using npm:
 ```bash
-npm install --save react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
+npm install --save @kesha-antonov/react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 **Step 2:** Install iOS pods
@@ -157,15 +247,10 @@ See the full guide (codemod included) in **[docs/MIGRATION.md](docs/MIGRATION.md
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
 import { Chat } from '@kesha-antonov/react-native-chat'
-import { useHeaderHeight } from '@react-navigation/elements'
 
 export function Example() {
   const [messages, setMessages] = useState([])
 
-  // keyboardVerticalOffset = distance from screen top to Chat container
-  // useHeaderHeight() returns status bar + navigation header height
-  const headerHeight = useHeaderHeight()
-
   useEffect(() => {
     setMessages([
       {
@@ -194,7 +279,6 @@ export function Example() {
       user={{
         _id: 1,
       }}
-      keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}
     />
   )
 }
@@ -269,6 +353,10 @@ interface User {
 - **`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'`)
 - **`colorScheme`** _('light' | 'dark')_ - Force color scheme (light/dark mode). When set to `'light'` or `'dark'`, it overrides the system color scheme. When `undefined`, it uses the system color scheme. Default is `undefined`.
+- **`theme`** _(Object)_ - Override the default light theme tokens (`colors` / `radii` / `spacing` / `typography` / `avatar` / `sendButton` / `composer` / `voice`). Deep-merged over `defaultLightTheme`; any subset is allowed. See [Theming & Dark Mode](#theming--dark-mode).
+- **`darkTheme`** _(Object)_ - Same as `theme`, applied when the resolved color scheme is dark (deep-merged over `defaultDarkTheme`).
+- **`icons`** _(Object)_ - Icon override registry. Supply a render function for any built-in icon to replace it (e.g. with `lucide-react-native`). See [Custom icons](#custom-icons-eg-lucide).
+- **`labels`** _(Object)_ - Override any UI string. See [Localization (i18n)](#localization-i18n).
 
 ### Refs
 
@@ -277,44 +365,29 @@ interface User {
 
 ### Keyboard & Layout
 
-- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling. Default values:
-  - `statusBarTranslucent: true` - Required on Android for correct keyboard height calculation when status bar is translucent (edge-to-edge mode)
-  - `navigationBarTranslucent: true` - Required on Android for correct keyboard height calculation when navigation bar is translucent (edge-to-edge mode)
+- **`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.
+
+  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.
+- **`disableKeyboardProvider`** _(Bool)_ - Skip the built-in `KeyboardProvider` entirely; default is `false`. You do **not** need this just because your app mounts its own provider - that case is detected and reused. Reach for it only to opt out completely, e.g. when the provider's edge-to-edge behavior causes layout shift or a header jump on Android/Expo.
 - **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view). See **keyboardVerticalOffset** below for proper keyboard handling.
-- **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
+- **`isAlignedTop`** _(`boolean | 'auto'`)_ - Where the bubbles sit **while the whole conversation fits on screen**; once it is taller than the list this has no effect. `false` (default) keeps the usual bottom-anchored chat, `true` pins the messages to the top, and `'auto'` pins them to the top while the keyboard is closed and re-anchors them to the bottom while it is open - so a short conversation starts under the header and moves above the keyboard when the composer is focused ([#2736](https://github.com/FaridSafi/react-native-gifted-chat/issues/2736)). Works with either `isInverted` setting; ignored when `isFlashListEnabled` is set, since FlashList positions its own items.
 - **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 
 #### Understanding `keyboardVerticalOffset`
 
-The [`keyboardVerticalOffset`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#keyboardverticaloffset) tells the KeyboardAvoidingView where its container starts relative to the top of the screen. This is essential when Chat is not positioned at the very top of the screen (e.g., when you have a navigation header).
-
-**Default value:** `insets.top` (status bar height from `useSafeAreaInsets()`). This works correctly only when Chat fills the entire screen without a navigation header. If you have a navigation header, you need to pass the correct offset via `keyboardAvoidingViewProps`.
+[`keyboardVerticalOffset`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#keyboardverticaloffset) tells the KeyboardAvoidingView how far down the screen its container starts. That distance depends on the navigation header and on anything else you render above the chat.
 
-**What the value means:** The offset equals the distance (in points) from the top of the screen to the top of your Chat container. This typically includes:
-- Status bar height
-- Navigation header height (on iOS, `useHeaderHeight()` already includes status bar)
+**You do not normally need to set it.** Chat measures its own position on screen and uses that, so the input toolbar sits on the keyboard whether the chat is full-screen or under a navigation header. The measurement comes from the `SafeAreaProvider` frame and updates on rotation and layout changes.
 
-**How to use:**
+Pass your own value only to add extra space above the keyboard - it replaces the measured one:
 
 ```jsx
-import { useHeaderHeight } from '@react-navigation/elements'
-
-function ChatScreen() {
-  // useHeaderHeight() returns status bar + navigation header height on iOS
-  const headerHeight = useHeaderHeight()
-
-  return (
-    <Chat
-      keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight }}
-      // ... other props
-    />
-  )
-}
+<Chat keyboardAvoidingViewProps={{ keyboardVerticalOffset: headerHeight + 16 }} />
 ```
 
-> **Note:** `useHeaderHeight()` requires your chat component to be rendered inside a proper navigation screen (not conditional rendering). If it returns `0`, ensure your chat screen is a real navigation screen with a visible header.
+If you do, sanity-check it on device: a toolbar behind the keyboard means the value is too small, a gap above the keyboard means it is too large. `useHeaderHeight()` is the usual source, but some navigator setups report a value that does not match the header you actually render.
 
-**Why this matters:** Without the correct offset, the keyboard may overlap the input field or leave extra space. The KeyboardAvoidingView uses this value to calculate how much to shift the content when the keyboard appears.
+> **Upgrading from 4.1.0 or earlier:** the default used to be `insets.top`, which could not account for a navigation header - so most apps passed `useHeaderHeight()` to compensate. That is no longer needed; drop it and let Chat measure, or the toolbar will float above the keyboard by the header height.
 
 ### Text Input & Composer
 
@@ -322,22 +395,25 @@ function ChatScreen() {
 - **`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
 - **`isTextOptional`** _(Bool)_ - Allow sending messages without text (useful for media-only messages); default `false`. Use with `isSendButtonAlwaysVisible` for media attachments.
-- **`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`
+- **`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).
 - **`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/kesha-antonov/react-native-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
+- **`onPressEmoji`** _(Function)_ - Callback for the optional emoji button on the left of the composer field. When omitted, the emoji button is hidden.
+- **`audioRecording`** _(Object)_ - Enable Telegram-style hold-to-record voice notes. `{ isEnabled, minDurationMs?, onError? }`. Requires the optional `expo-audio` peer (and `react-native-audio-api` for the playback waveform); the mic button is hidden when it is absent.
+- **`videoRecording`** _(Object)_ - Enable record-and-send video messages. `{ isEnabled, maxDuration?, onError? }`. Uses `react-native-vision-camera` for round camera notes, falling back to `expo-image-picker`'s system camera.
 - **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput).
 
+> **Composer height** - there are no height props. The composer starts one line tall and grows with its content. Constrain it through `textInputProps.style` (e.g. `{ maxHeight: 120 }`), which is applied after the measured height and wins.
+
 ### Actions & Action Sheet
 
-- **`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
+- **`actions`** _(Array)_ - Action options for the composer "+" button. Array of `{ title, action }`; add `icon` (and optional `color`) to an action to render a Telegram-style attachment **grid** (tiles) instead of a list. Opens the built-in themed `AttachmentSheet` - no extra dependency.
+- **`onPressActionButton`** _(Function)_ - Callback when the "+" button is pressed (if set, the built-in `AttachmentSheet` is not shown)
+- **`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.
+- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action labels in the attachment sheet
 
 ### Messages & Message Container
 
@@ -347,6 +423,7 @@ function ChatScreen() {
 - **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty
 - **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)
 - **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist). Supports all FlatList props including `maintainVisibleContentPosition` for keeping scroll position when new messages arrive (useful for AI chatbots).
+- **`isFlashListEnabled`** _(Bool)_ - Render messages with [`@shopify/flash-list`](https://shopify.github.io/flash-list/) v2 instead of `FlatList`; default is `false`. See [FlashList](#flashlist-opt-in).
 
 ### Message Bubbles & Content
 
@@ -355,10 +432,13 @@ function ChatScreen() {
 - **`renderMessageImage`** _(Component | Function)_ - Custom message image
 - **`renderMessageVideo`** _(Component | Function)_ - Custom message video
 - **`renderMessageAudio`** _(Component | Function)_ - Custom message audio
+- **`renderMessageLocation`** _(Component | Function)_ - Custom renderer for `IMessage.location`; defaults to a map card that opens the system maps app on tap
+- **`messageActions`** _(Array | Function(`message`))_ - Telegram-style long-press context menu. Each item is `{ label, icon?, onPress, destructive? }`. See [Message actions](#message-actions-long-press-context-menu).
 - **`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`
 - **`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)
+- **`isMessageGestureEnabled`** _(Bool | Function(`message`))_ - Whether the bubble itself is part of the row's tap / long-press surface that `reactions` and `messageActions` rely on; default is `true`. Pass `false`, or a predicate, for messages that render natively interactive content - the row beside the bubble stays pressable either way. See [Interactive content inside bubbles](#interactive-content-inside-bubbles-video-players-maps).
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`
 - **`imageStyle`** _(Object)_ - Custom style for message images
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
@@ -444,11 +524,19 @@ See full example in [LinksExample](example/components/chat-examples/LinksExample
 - **`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
-- **`dayProps`** _(Object)_ - Props to pass to the Day component:
-  - `containerStyle` - Custom style for the day container
-  - `wrapperStyle` - Custom style for the day wrapper
-  - `textProps` - Props to pass to the Text component (e.g., `style`, `allowFontScaling`, `numberOfLines`)
+- **`renderDay`** _(Component | Function)_ - Custom day above a message. This is also how the day label is styled - it receives `DayProps` (`createdAt`, `dateFormat`, `dateFormatCalendar`, `containerStyle`, `wrapperStyle`, `textProps`, `isAnimated`), so render the built-in `Day` with the styles you want:
+
+  ```tsx
+  import { Chat, Day, DayProps } from '@kesha-antonov/react-native-chat'
+
+  <Chat
+    renderDay={(props: DayProps) => (
+      <Day {...props} wrapperStyle={{ backgroundColor: '#eee' }} textProps={{ style: { color: '#333' } }} />
+    )}
+  />
+  ```
+
+  `isAnimated` is `true` for the floating header that sticks to the top while scrolling and `false` for the inline separators, so one function can style them differently.
 - **`renderTime`** _(Component | Function)_ - Custom time inside a message
 - **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)
 - **`isDayAnimationEnabled`** _(Bool)_ - Enable animated day label that appears on scroll; default is `true`
@@ -664,9 +752,14 @@ const [isScrolledUp, setIsScrolledUp] = useState(false)
 
 Render AI assistant replies token-by-token. The library batches incoming chunks with `requestAnimationFrame` (one render per frame, only the streaming bubble re-renders) and shows a blinking caret while a message is still streaming.
 
+<p align="center">
+  <img width="250" src="https://raw.githubusercontent.com/kesha-antonov/react-native-chat/main/media/ai-streaming-markdown.png" alt="AI reply streaming token-by-token and rendering as markdown, with a blinking caret and a Stop button in the composer" />
+</p>
+
+> The reply above streams in token-by-token (note the caret `▋`) and renders as **markdown** - bold, italics, lists, inline and fenced code - while the composer's send button turns into a **Stop** control mid-stream. See [Markdown rendering for AI replies](#markdown-rendering-for-ai-replies) to enable markdown.
+
 - **`IMessage.streaming`** - flag a message as streaming (shows the caret)
-- **`Chat.updateMessage(messages, id, patch)`** - immutable per-message update, cheap enough for per-token appends
-- **`useStreamingMessages(...)`** - owns the message list, rAF-batches `push()`, and supports stop via `AbortController`
+- **`useStreamingMessages(...)`** - owns the message list, rAF-batches `push()`, and supports stop via `AbortController`. It returns `{ messages, setMessages, append, startStream, isStreaming, stop }`; `setMessages` is there for anything the hook does not cover, so you can patch a message with a plain `map`.
 
 ```tsx
 import { useCallback } from 'react'
@@ -692,6 +785,33 @@ function Bot () {
 
 See **[docs/STREAMING.md](./docs/STREAMING.md)** for the full hook API and a real Claude streaming adapter (via a backend proxy). A runnable demo lives in `example/components/chat-examples/AIBotExample.tsx`.
 
+#### Markdown rendering for AI replies
+
+AI/LLM replies are usually markdown (bold, lists, fenced code). Enable markdown with `messageTextProps={{ markdown: true }}` (streamed messages auto-render as markdown unless you pass `markdown={false}`):
+
+```tsx
+// Force markdown for every message:
+<Chat messageTextProps={{ markdown: true }} {...props} />
+
+// Streamed messages auto-render as markdown; disable with markdown: false.
+```
+
+There are two renderers and you get the best available one automatically:
+
+- **Built-in, zero-dependency renderer** (default). Covers headings, bullet/ordered lists, blockquotes, fenced + inline code, bold/italic/strikethrough, and links. It handles streaming-incomplete markdown gracefully (a half-written `**bold` or an unclosed code fence renders as plain text until complete), so it's safe to feed token-by-token. Nothing to install. Exposed as `BasicMarkdown` if you want to use it directly.
+
+- **[`react-native-streamdown`](https://github.com/software-mansion-labs/react-native-streamdown)** (optional upgrade). When installed it's used instead, for richer streaming-safe markdown (tables, partial-table handling, etc.). It is a native module with its own peers - install the full set:
+
+  ```bash
+  npx expo install react-native-streamdown react-native-enriched-markdown remend katex
+  ```
+
+  It also requires `react-native-worklets >= 0.8.3` (i.e. `react-native-reanimated >= 4.3`), and `react-native-enriched-markdown` is a native module, so a dev build / prebuild is required (it does not work in Expo Go). Pass through Streamdown's own theming/rules via `markdownProps`:
+
+  ```tsx
+  <Chat messageTextProps={{ markdown: true, markdownProps: { /* ... */ } }} {...props} />
+  ```
+
 ### Emoji Reactions
 
 Long-press a message to open a quick emoji picker; selected reactions render as pills below the bubble and toggle on tap. The core ships a lightweight quick picker (built on `react-native-gesture-handler` and `react-native-reanimated`, no extra dependencies). A full emoji browser is optional and demonstrated in the example app via the `renderReactionPicker` override.
@@ -788,29 +908,86 @@ Message text is automatically scanned for URLs, emails, and phone numbers; hasht
 
 For full control, pass custom `matchers` (`{ type, pattern, getLinkUrl?, getLinkText?, renderLink?, onPress? }[]`) to add or override patterns. See the Links example in the [example app](#-example-app).
 
-### Copy to Clipboard
+### Message actions (long-press context menu)
 
-Long-press handling is exposed via `onLongPressMessage`. Chat wraps [`@expo/react-native-action-sheet`](https://github.com/expo/react-native-action-sheet), so you can show a "Copy Text" action sheet and copy with the clipboard library of your choice:
+Long-press a message to open a floating, themed **context menu** (Telegram style) anchored to the bubble. Provide the actions via `messageActions` - an array, or a function of the message - each `{ label, icon?, onPress, destructive? }`. When reactions are enabled, a reactions row is shown on top of the menu automatically.
 
 ```tsx
-import { useActionSheet } from '@expo/react-native-action-sheet'
 import { setStringAsync } from 'expo-clipboard'
+import { Copy, Trash2 } from 'lucide-react-native' // optional icons
 
-const { showActionSheetWithOptions } = useActionSheet()
+<Chat
+  messageActions={message => [
+    { label: 'Copy', icon: ({ color, size }) => <Copy color={color} size={size} />, onPress: () => setStringAsync(message.text) },
+    { label: 'Delete', destructive: true, onPress: () => deleteMessage(message) },
+  ]}
+/>
+```
+
+### Interactive content inside bubbles (video players, maps)
+
+When `reactions` or `messageActions` are enabled, the long-press surface spans the **whole message row** - the bubble *and* the empty space beside it, the way Telegram behaves on Android. (A tap gesture is added on top only when `onPressMessage` is set.) Those recognizers do not cancel touches on native subviews, so a `react-native-video` / `expo-video` player rendered through `renderMessageVideo` keeps its native `controls` interactive.
 
+If a message must own every touch that lands on it, set `isMessageGestureEnabled` to `false` for it. The gesture surface then drops *behind* the bubble: the bubble's content takes its touches, and long-pressing the row next to the bubble still opens the picker - so reactions are never lost for that message.
+
+```tsx
 <Chat
-  onLongPressMessage={(_context, message) => {
-    showActionSheetWithOptions(
-      { options: ['Copy Text', 'Cancel'], cancelButtonIndex: 1 },
-      buttonIndex => {
-        if (buttonIndex === 0)
-          setStringAsync(message.text)
-      }
-    )
+  reactions={{ isEnabled: true, onReactionPress }}
+  renderMessageVideo={props => <Video source={{ uri: props.currentMessage.video }} controls style={styles.video} />}
+  // the video owns its controls; long-press beside the bubble still reacts
+  isMessageGestureEnabled={message => !message.video}
+/>
+```
+
+> **Note:** This library no longer depends on `@expo/react-native-action-sheet`. Prefer `messageActions` above. If you specifically want a native action sheet, install it yourself, wrap your tree in `ActionSheetProvider`, and either call `useActionSheet()` in your own `onLongPressMessage` or pass an `actionSheet` prop - the `actionSheet` prop / `context.actionSheet()` escape hatch still works when you provide an implementation. The composer "+" actions use the built-in themed `AttachmentSheet` and need no setup.
+
+### Theming & Dark Mode
+
+The chat ships with a modern default look and a full token-based theme. Override any subset of tokens via `theme` (light) and `darkTheme` (dark); your overrides are deep-merged over `defaultLightTheme` / `defaultDarkTheme`, and the resolved theme switches at runtime with the color scheme (system, or forced via `colorScheme`). Explicit per-component style props still win over the theme.
+
+```tsx
+<Chat
+  theme={{
+    colors: { accent: '#3390EC', outgoingBubble: '#EFFEDE' },
+    radii: { bubble: 18 },
   }}
+  darkTheme={{ colors: { background: '#0E1621', incomingBubble: '#182533' } }}
+  // colorScheme="dark"   // optional: force a scheme instead of following the system
+  {...props}
 />
 ```
 
+Token groups: `colors`, `radii`, `spacing`, `typography`, `avatar`, `sendButton`, `composer`, `voice`. Build your own theme-aware components with the exported hooks:
+
+```tsx
+import { useTheme, useThemedStyles } from '@kesha-antonov/react-native-chat'
+import { StyleSheet } from 'react-native'
+
+const MyBadge = () => {
+  const theme = useTheme()
+  const styles = useThemedStyles(t => StyleSheet.create({
+    badge: { backgroundColor: t.colors.accent, borderRadius: t.radii.bubble },
+  }))
+  return <View style={styles.badge} />
+}
+```
+
+Also exported: `defaultLightTheme`, `defaultDarkTheme`, and the `ChatTheme` / `PartialChatTheme` types.
+
+### Localization (i18n)
+
+All built-in UI strings (composer placeholder, send/cancel, load earlier, today, voice/video/location labels, slide-to-cancel, reply/edit banner, camera-permission text) route through a label table. Built-in translations ship for `en`, `es`, `fr`, `de`, and `ru`, selected by the existing `locale` prop. Override any individual string with `labels`:
+
+```tsx
+<Chat
+  locale="fr"                       // pick a built-in translation
+  labels={{ placeholder: 'Votre message...' }}  // override any string
+  {...props}
+/>
+```
+
+Exported helpers: `ChatLabels` (type), `defaultLabels`, `translations`, `resolveLabels`, and the `useLabels` hook for reading the resolved labels in custom components.
+
 ### Message Status
 
 Set `sent`, `received`, or `pending` on a message to show its delivery status. By default these render as tick indicators next to the timestamp (`✓` sent, `✓✓` received, `🕓` pending):
@@ -922,6 +1099,73 @@ module.exports = function override(config, env) {
 
 ---
 
+## ⚡ Performance
+
+The chat is built for long lists, but a few habits on your side unlock the most:
+
+**Memoize your render props and config.** Each message row is wrapped in `React.memo` with a comparator that deep-compares the message and reference-compares every other prop. So an unchanged row only skips a re-render when the props you pass it are referentially stable. If you pass inline functions or objects, that row re-renders on every parent render:
+
+```jsx
+// ❌ New reference every render - the row can't skip
+<Chat renderBubble={props => <MyBubble {...props} />} reactions={{ isEnabled: true, onReactionPress }} />
+
+// ✅ Stable references - unchanged rows skip re-renders
+const renderBubble = useCallback(props => <MyBubble {...props} />, [])
+const reactions = useMemo(() => ({ isEnabled: true, onReactionPress }), [onReactionPress])
+const messageActions = useCallback(message => [{ label: 'Copy', onPress: () => copy(message.text) }], [copy])
+
+<Chat renderBubble={renderBubble} reactions={reactions} messageActions={messageActions} />
+```
+
+This applies to all render props (`renderBubble`, `renderMessageText`, `renderAvatar`, ...), the `reactions` / `audioRecording` / `videoRecording` / `messageActions` config objects, and any style objects.
+
+**Keep messages immutable.** Update messages by creating new arrays/objects (e.g. `Chat.append(...)`), never by mutating an existing message in place - the row comparator relies on value changes to detect updates.
+
+**Theme, icons and labels don't need drilling.** `theme` / `darkTheme`, `icons`, and `labels` are read from context (`useTheme`, `useIcons`, `useLabels`), so passing them once on `<Chat>` is enough; they don't cause per-row churn.
+
+**Tune virtualization if needed.** Sensible `FlatList` defaults ship out of the box (`removeClippedSubviews` on Android, `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, `updateCellsBatchingPeriod`). `windowSize` is measured in screen-heights (not messages); the default keeps a few screens of content mounted around the viewport. Override any of them via `listProps`:
+
+```jsx
+<Chat listProps={{ windowSize: 7, removeClippedSubviews: true }} {...props} />
+```
+
+### FlashList (opt-in)
+
+On long histories `FlatList` can log `VirtualizedList: You have a large list that is slow to update`. [FlashList](https://shopify.github.io/flash-list/) v2 recycles rows instead of keeping them mounted, which removes that class of stall. It is supported as an **optional** dependency - install it yourself and flip one prop:
+
+```bash
+yarn add @shopify/flash-list
+```
+
+```jsx
+<Chat messages={messages} user={user} isFlashListEnabled />
+```
+
+Everything else keeps working: `isInverted`, the floating day header, `loadEarlierMessagesProps` infinite scroll, the scroll-to-bottom button, and `listProps` (spread last, so it overrides the defaults below).
+
+The chat sets FlashList's `maintainVisibleContentPosition` for you - `startRenderingFromBottom` when `isInverted={false}`, plus `autoscrollToBottomThreshold: 0.2` so new messages follow the viewport only when you are already at the bottom. Override it through `listProps` if you want different thresholds:
+
+```jsx
+<Chat
+  isFlashListEnabled
+  listProps={{
+    maintainVisibleContentPosition: {
+      autoscrollToBottomThreshold: 0.1,
+      animateAutoScrollToBottom: false,
+    },
+  }}
+  {...props}
+/>
+```
+
+Notes:
+
+- FlashList v2 requires the **New Architecture**. On the old architecture it falls back to a slower JS path.
+- `FlatList`-only knobs (`windowSize`, `maxToRenderPerBatch`, `initialNumToRender`, `updateCellsBatchingPeriod`, `removeClippedSubviews`) are not forwarded to FlashList - it sizes its own render window.
+- If `@shopify/flash-list` is not installed, the prop is ignored, a warning is logged, and `FlatList` is used.
+
+---
+
 ## 🧪 Testing
 
 <details>
@@ -1068,7 +1312,7 @@ yarn prepublishOnly
 
 ## 👥 Authors
 
-Based on [FaridSafi/react-native-chat](https://github.com/FaridSafi/react-native-chat), which is no longer actively maintained.
+Based on [FaridSafi/react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat), which is no longer actively maintained.
 
 **Maintainer:** [Kesha Antonov](https://github.com/kesha-antonov)
 

package/lib/Actions.d.ts

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { AttachmentAction } from './components/AttachmentSheet';
 export interface ActionsProps {
-    actions?: Array<{
-        title: string;
-        action: () => void;
-    }>;
+    /** Actions shown in the attachment sheet. Add `icon`/`color` for a grid layout. */
+    actions?: AttachmentAction[];
+    /** Tint color for the action labels in the sheet (defaults to the theme accent). */
     actionSheetOptionTintColor?: string;
     icon?: () => ReactNode;
     wrapperStyle?: StyleProp<ViewStyle>;
@@ -12,5 +12,5 @@ export interface ActionsProps {
     buttonStyle?: StyleProp<ViewStyle>;
     onPressActionButton?(): void;
 }
-export declare function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, buttonStyle, }: ActionsProps): React.JSX.Element;
+export declare function Actions({ actions, actionSheetOptionTintColor, icon, wrapperStyle, onPressActionButton, buttonStyle, }: ActionsProps): React.JSX.Element;
 //# sourceMappingURL=Actions.d.ts.map

package/lib/Actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAA;AACrD,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAM5B,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAA;IACtD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,SAAS,CAAA;IACtB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAClC,mBAAmB,CAAC,IAAI,IAAI,CAAA;CAC7B;AAED,wBAAgB,OAAO,CAAE,EACvB,OAAO,EACP,0BAAkD,EAClD,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,WAAW,GACZ,EAAE,YAAY,qBAmDd"}
+{"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;AAQhF,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,qBA2Cd"}