![\"react-native-gifted-chat\"](\"https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif\")
\n \n\n\n
\n \n Β Β \n \n\n
\n The most complete chat UI for React Native & Web\n
\n\n \n ![\"npm](\"https://img.shields.io/npm/dm/react-native-gifted-chat.svg\"/)
\n ![\"npm](\"https://badge.fury.io/js/react-native-gifted-chat.svg\"/){kind=icon}
\n ![](\"https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg\"/){kind=icon}
\n\n
\n Β ![\"build\"](\"https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield\")
\n \n 
\n \n ![](\"https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen\"/){kind=icon}
\n Demo Web π₯\n
\n\n Snack GiftedChat playground\n \n
\n
\n \n ![](\"https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png\"){kind=logo}
\n \n
\n
\n Coding Bootcamp in Paris co-founded by Farid Safi\n
\n \n\n Click to learn more\n
\n \n\n\n\n
\n \n ![](\"https://i.imgur.com/oU7XYkk.png\")
\n \n
\n
\n Scalable chat API/Server written in Go\n
\n\n API Tour | React Native Gifted tutorial\n
\n\n\n\n
\n \n ![](\"https://www.dappros.com/wp-content/uploads/2023/06/Ethora-HLogo-V2.png\")
\n \n
\n
\n A complete app engine featuring GiftedChat\n
\n\n Check out our GitHub\n
\n\n\n## The future of GiftedChat π\n\nPlease give us your advice: [Related PR](https://github.com/FaridSafi/react-native-gifted-chat/pull/1775)\n\n## Please vote\n\n**GiftedChat** depends on other packages and some needs a boost, please vote for PRs will improve it, thanks:\n\n- https://github.com/watadarkstar/react-native-typing-animation/issues/18\n\n## Features\n\n- π **_`react-native-web`able_ (since 0.10.0)** [web configuration](#react-native-web)\n- Write with **TypeScript** (since 0.8.0)\n- Fully customizable components\n- Composer actions (to attach photos, etc.)\n- Load earlier messages\n- Copy messages to clipboard\n- Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)\n- Avatar as user's initials\n- Localized dates\n- Multi-line TextInput\n- InputToolbar avoiding keyboard\n- Redux support\n- System message\n- Quick Reply messages (bot)\n- Typing indicator [react-native-typing-animation](https://github.com/watadarkstar/react-native-typing-animation)\n\n## Dependency\n\n- Use version `0.2.x` for RN `>= 0.44.0`\n- Use version `0.1.x` for RN `>= 0.40.0`\n- Use version `0.0.10` for RN `< 0.40.0`\n\n## Testing\n`TEST_ID` is exported as constants that can be used in your testing library of choice\n\nGifted Chat uses `onLayout` to determine the height of the chat container. To trigger `onLayout` during your tests, you can run the following bits of code.\n\n```typescript\nconst WIDTH = 200; // or any number\nconst HEIGHT = 2000; // or any number\n\nconst loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)\nfireEvent(loadingWrapper, 'layout', {\n nativeEvent: {\n layout: {\n width: WIDTH,\n height: HEIGHT,\n },\n },\n})\n```\n\n## Installation\n\n- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-gifted-chat --save`\n- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-gifted-chat`\n\n### react-native-video and expo-av\n\n- Both dependencies are removed since `0.11.0`.\n- You still be able to provide a `video` but you need to provide `renderMessageVideo` prop.\n\n## You have a question?\n\n1. Please check this readme and may find a response\n1. Please ask on StackOverflow first: https://stackoverflow.com/questions/tagged/react-native-gifted-chat\n1. Find response on existing issues\n1. Try to keep issues for issues\n\n## Example\n\n```jsx\nimport React, { useState, useCallback, useEffect } from 'react'\nimport { GiftedChat } from 'react-native-gifted-chat'\n\nexport function Example() {\n const [messages, setMessages] = useState([])\n\n useEffect(() => {\n setMessages([\n {\n _id: 1,\n text: 'Hello developer',\n createdAt: new Date(),\n user: {\n _id: 2,\n name: 'React Native',\n avatar: 'https://placeimg.com/140/140/any',\n },\n },\n ])\n }, [])\n\n const onSend = useCallback((messages = []) => {\n setMessages(previousMessages =>\n GiftedChat.append(previousMessages, messages),\n )\n }, [])\n\n return (\n