React Native Chat

✨ Features

• 🌗 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
• 🎥 Video & audio messages - real inline playback, with a tappable fallback
• 🎙️ Voice & video recording - Telegram-style hold-to-record notes (opt-in)
• 📍 Location messages - map card that opens the system maps app
• ↩️ Swipe to reply - reply preview and message threading
• 📋 Long-press actions - themed context menu anchored to the bubble
• ⚡ 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.

         

---

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.

---