React Native Gifted Chat
ActiveDescription
React Native Gifted Chat is the most complete chat UI library for React Native, with iOS, Android, and Web support and highly customizable message components.
Key Features
- Cross-platform — supports iOS, Android, Web (via react-native-web), and Expo projects
- Fully customizable — any component can be overridden with a custom implementation
- Complete messaging features — attachments, reply threading, load earlier, copy, smart link parsing
- Smart interactions — quick replies, typing indicator, sent/delivered/read ticks, scroll-to-bottom
- TypeScript native — full TypeScript typings included
- Localized dates — full i18n via Day.js
Use Cases
💡 Quickly integrating chat UI into React Native mobile apps
💡 Reusing the same chat components on Web via react-native-web
💡 Building AI chat apps with typing indicators and read receipts on top of an LLM API
💡 Replacing in-house chat components to cut maintenance cost
💡 Customizing to Slack-style or Messenger-style layouts by overriding components
Categories
Quick Start
# In an Expo project
npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler
# In a bare React Native project
npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler
npx pod-install
# Use GiftedChat in a React component
import { GiftedChat } from 'react-native-gifted-chat'
import { useState, useCallback, useEffect } from 'react'
export function ChatScreen() {
const [messages, setMessages] = useState([])
useEffect(() => {
setMessages([{ _id: 1, text: 'Hello!', createdAt: new Date(), user: { _id: 2 } }])
}, [])
const onSend = useCallback((msgs = []) => setMessages(p => GiftedChat.append(p, msgs)), [])
return <GiftedChat messages={messages} onSend={onSend} user={{ _id: 1 }} />
}