gitmyhub

react-native-gifted-chat

TypeScript ★ 14k updated 1d ago

💬 The most complete chat UI for React Native

React Native Gifted Chat is a TypeScript library that adds a complete, customizable chat interface to iOS, Android, and web apps, saving developers from building message bubbles, avatars, and input bars from scratch.

TypeScriptReact NativeExposetup: moderatecomplexity 2/5

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.

Where it fits