faridsafi/react-native-gifted-chat

★ 14,403TypeScriptAudience · vibe coderComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((gifted-chat))
    What It Is
      Chat UI library
      React Native
      iOS Android web
    Features
      Avatars typing indicator
      Swipe to reply
      Quick reply buttons
    Customization
      Custom bubbles
      Custom input bar
      Swap any component
    Compatibility
      Expo supported
      React Native 0.70 plus
      TypeScript typed

mindmap root((gifted-chat)) What It Is Chat UI library React Native iOS Android web Features Avatars typing indicator Swipe to reply Quick reply buttons Customization Custom bubbles Custom input bar Swap any component Compatibility Expo supported React Native 0.70 plus TypeScript typed

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a working chat screen to a React Native app without building any UI components from scratch

USE CASE 2

Build a customer support chatbot interface with quick-reply buttons and message read-status ticks

USE CASE 3

Create a Slack-style group chat layout by swapping in a custom message bubble component

USE CASE 4

Add a chat feature to an Expo app with minimal extra configuration

Tech stack

TypeScriptReact NativeExpo

Getting it running

Difficulty · moderate Time to first run · 30min

Requires installing gesture handler and animation dependencies alongside the main package before the UI renders correctly.

In plain English

React Native Gifted Chat is a TypeScript library that gives mobile app developers a ready-made chat interface for iOS, Android, and the web. React Native is a framework for building smartphone apps using JavaScript or TypeScript instead of platform-specific languages. This library saves developers from having to build the visual and interactive parts of a chat screen from scratch. The list of built-in features is extensive. It includes user avatars, a typing indicator that shows when someone is composing a message, message status ticks showing whether a message was sent or read, a swipe-to-reply interaction, support for quick-reply buttons (the kind often used in chatbot interfaces), automatic detection and linking of URLs, email addresses, phone numbers, hashtags, and mentions, and the ability to load earlier messages by scrolling up. The keyboard behavior is handled automatically so that the text input stays visible when the on-screen keyboard appears. Every visible part of the interface can be replaced with a custom component. For example, if you want a different style of message bubble or a custom input bar, you can swap in your own code while keeping the rest of the library's functionality intact. The library works with both plain React Native projects and projects built on Expo, which is a popular toolkit that simplifies React Native development. It requires React Native version 0.70 or later, iOS 13.4 or later, and Android 5.0 or later. Installation involves adding the package via a standard package manager and a few additional steps to configure animation and gesture libraries that Gifted Chat depends on. The README includes a minimal working code example and links to more advanced examples showing patterns like Slack-style message layouts and custom components. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

I am adding GiftedChat to my React Native app. Show me the minimal code to render a chat screen where the user sends a message and a bot replies automatically.

Prompt 2

How do I add quick-reply buttons in React Native Gifted Chat so my chatbot shows 3 preset response options after each message?

Prompt 3

I want to customize the message bubble background color in React Native Gifted Chat. Show me how to pass a custom renderBubble prop.

Prompt 4

Write a React Native screen using GiftedChat that loads older messages when the user scrolls to the top, fetching them from a REST API endpoint.

Prompt 5

How do I implement swipe-to-reply in React Native Gifted Chat and capture the quoted message in component state?

Open on GitHub → Explain another repo

← faridsafi on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.