Skip to content
Get packs

Gifted Chat

A ready-made chat screen component for React Native apps, with messages, replies, and reactions.FaridSafi/react-native-gifted-chat

GitHub Download 3.4.1
Stars
14.4k
Forks
3.6k
Licence
MIT
Language
TypeScript
Last update
18 days ago
Type
Library

What it is

React Native Gifted Chat is a TypeScript component library that gives app developers a complete chat screen: message list, input box, avatars, timestamps, and similar chat features. Developers drop it into an iOS, Android, or web app instead of building chat UI from scratch. The README says it is now in maintenance mode, and active development has moved to a maintained fork.

  • Add a one-to-one or group chat screen to a React Native app
  • Show AI or bot-style quick reply buttons under a message
  • Let users swipe to reply to a message and see a reply preview
  • Attach photos or files from a composer action button

Great for

  • Developers building a chat or messaging screen in a React Native app
  • Teams using Expo who want a drop-in chat interface
  • Projects that need swipe-to-reply, quick replies, or emoji reactions
  • Developers who want to override chat components with their own implementations

Not ideal for

  • Teams starting a new project, since the README encourages using the maintained fork instead (@kesha-antonov/react-native-chat)
  • People who need a finished chat app without writing any code, since this is a component for developers
  • Projects that cannot install the extra required packages such as reanimated and gesture-handler
Step-by-step guide: how to use Gifted ChatInstall, first run, examples, tips and FAQs
Gifted Chat vs why-did-you-render

How to get it

  1. 1

    Install with a package manager

    You'll need: React Native >= 0.70.0 or Expo SDK 50+ · iOS >= 13.4 or Android API 21+ · TypeScript >= 5.0 (optional)

    Expo projects

    npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

    Bare React Native with yarn

    yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

    Bare React Native with npm

    npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller

    Install iOS pods

    npx pod-install
  2. 2

    Run it

    • Install the packages with the command for your project type
    • For bare React Native projects, install iOS pods and add the react-native-reanimated Babel plugin
    • Create a messages state array and render the GiftedChat component with messages and user props
    • Use GiftedChat.append in your onSend handler to add new messages
  3. 3

    Get the most out of it

    • Check the example directory for Slack-style messages, quick replies, and custom components
    • Use keyboardAvoidingViewProps with useHeaderHeight to fix keyboard offset
    • Override any component with your own implementation via the props reference
    • Use the Expo Snack playground linked in the README to try it in a browser

Downloads

Source code (.zip)master branch · straight from GitHubRelease 3.4.1Release notes and sourceOfficial website & docsgifted.chat

Strengths

  • Large feature set listed in the README, including reactions, read ticks, typing indicator, and link parsing
  • Ships with TypeScript definitions and works with Expo and react-native-web
  • Permissive MIT license and a large, active user base by star count

Trade-offs

  • The README says the package is in maintenance mode and is not receiving new features
  • Requires several companion libraries and a Babel plugin setup for react-native-reanimated
  • Setup requires knowledge of React Native and navigation header offsets

How it compares

ProjectStarsTypeLevelUpdatedBest for
react-native-gifted-chat (this)14.4kLibraryintermediate18 days agoDevelopers building a chat or messaging screen in a React Native app
why-did-you-render12.5kLibraryintermediate7 months agoReact developers investigating slow screens with many memoized or pure components
react-native-elements25.9kLibraryintermediate6 months agoReact Native developers who want ready-made UI components
react-native-web22.2kLibraryintermediate4 days agoDevelopers who already use React Native and want the same components on the web
NativeBase20.4kLibraryintermediate9 months agoTeams maintaining an existing app already built on NativeBase
mint-ui16.4kLibraryintermediate4.7 years agoDevelopers building mobile-style web pages or apps with Vue 2

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.