Skip to main content

React Native Chat

Chat list, photo viewer, reactions, swipe-to-reply, emoji keyboard, photo attachments, a voice note, a streamed AI reply and swipe-to-archive

✨ Features​

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

  • đŸ’Ŧ Chat list - the list of chats with search, selection actions, archive, swipe to archive and draggable pinned chats; plug in your backend
  • 🌗 Dark mode & theming - full light/dark token system, switchable at runtime
  • 🤖 Streaming AI messages - token-by-token replies with a typing caret and stop control
  • 😀 Emoji reactions - long-press picker and reaction pills
  • ⌨ī¸ Emoji keyboard - a full emoji panel in the keyboard's place, with search, recents and skin tones
  • 📎 Attachment menu - photo grid with numbered selection and a caption, files and location
  • đŸŽĨ Video & audio messages - real inline playback, with a tappable fallback
  • đŸ–ŧī¸ Photo viewer - tap a photo, then swipe through every photo in the chat; pinch or double-tap to zoom
  • 🎙ī¸ Voice & video recording - hold-to-record voice and round video notes, on once their peers are installed
  • 👋 Empty chat greeting - a "No messages here yet..." card with a tap-to-send 👋
  • 😍 Big emoji - emoji-only messages drop the bubble and draw large
  • đŸ”ĩ Unread bar - "Unread Messages" above the first unread message, opened scrolled to it
  • 🔗 Link previews - a web page block under the text
  • ☑ī¸ Multi-select - "Select" in the long-press menu: check circles, Copy / Forward / Delete bar
  • 📍 Location messages - map card that opens the system maps app
  • ↩ī¸ Swipe to reply - reply preview and message threading
  • 📋 Long-press actions - a context menu beside the finger, with a reactions bar
  • ⚡ Quick replies - bot-style reply buttons
  • 🔗 Smart link parsing - URLs, emails, phones, hashtags, mentions
  • 👤 Avatars - user initials or custom images
  • ✍ī¸ Typing indicator - show when someone is typing
  • ⏎ī¸ Load earlier messages - pagination and infinite scroll
  • âŦ‡ī¸ Scroll to bottom - quick jump back to the latest
  • ✅ Message status - ticks for sent, delivered and read
  • đŸ’Ŧ System messages - in-line notifications
  • 🌍 Localized dates & i18n - Day.js dates, translated UI strings
  • ⌨ī¸ Keyboard handling - smart avoidance on every platform
  • 🎨 Fully customizable - override any component with your own
  • 📱 Expo & 🌐 Web - works with Expo and react-native-web
  • 📝 TypeScript - complete definitions, generic over your message type

Actively maintained, New Architecture ready, built for the latest Reanimated / Gesture Handler.

Chat list with unread badges, pins, mutes and swipe-to-archive    Group chat with names, avatars, a photo, a file, a reply and reactions    The same group chat in the dark theme

Built-in emoji keyboard in place of the system keyboard    Attachment menu with the photo grid, two photos picked and a caption field    Link preview cards and an emoji-only message shown large

Chat list in the dark theme

Quick start​

npx expo install @kesha-antonov/react-native-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
import { useCallback, useState } from 'react'
import { Chat } from '@kesha-antonov/react-native-chat'

export function Example () {
  const [messages, setMessages] = useState([
    {
      _id: 1,
      text: 'Hello developer',
      createdAt: new Date(),
      user: { _id: 2, name: 'John Doe', avatar: 'https://placeimg.com/140/140/any' },
    },
  ])

  const onSend = useCallback((newMessages = []) => {
    setMessages(previous => Chat.append(previous, newMessages))
  }, [])

  return <Chat messages={messages} onSend={onSend} user={{ _id: 1 }} />
}

That is the whole setup - everything below is optional.