{"id":15019740,"url":"https://github.com/faridsafi/react-native-gifted-chat","last_synced_at":"2025-11-24T06:04:34.145Z","repository":{"id":38451932,"uuid":"46180504","full_name":"FaridSafi/react-native-gifted-chat","owner":"FaridSafi","description":"💬 The most complete chat UI for React Native","archived":false,"fork":false,"pushed_at":"2025-03-31T20:10:11.000Z","size":50602,"stargazers_count":13876,"open_issues_count":237,"forks_count":3591,"subscribers_count":191,"default_branch":"master","last_synced_at":"2025-05-12T16:23:55.028Z","etag":null,"topics":["chat","component","react-native"],"latest_commit_sha":null,"homepage":"https://gifted.chat","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FaridSafi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["faridsafi","xcarpentier","johan-dutoit","kesha-antonov"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2015-11-14T15:45:34.000Z","updated_at":"2025-05-11T18:57:23.000Z","dependencies_parsed_at":"2023-10-11T15:16:56.471Z","dependency_job_id":"3042fa6e-4c5c-4bd8-8bb3-46ade8b05ec8","html_url":"https://github.com/FaridSafi/react-native-gifted-chat","commit_stats":{"total_commits":1205,"total_committers":221,"mean_commits":5.452488687782806,"dds":0.7153526970954357,"last_synced_commit":"ba06287912151dbfb71951893d0454db8aafd5a5"},"previous_names":["faridsafi/react-native-gifted-messenger"],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaridSafi%2Freact-native-gifted-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaridSafi%2Freact-native-gifted-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaridSafi%2Freact-native-gifted-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FaridSafi%2Freact-native-gifted-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FaridSafi","download_url":"https://codeload.github.com/FaridSafi/react-native-gifted-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253774760,"owners_count":21962224,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","component","react-native"],"created_at":"2024-09-24T19:53:58.314Z","updated_at":"2025-11-24T06:04:34.139Z","avatar_url":"https://github.com/FaridSafi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/faridsafi","https://github.com/sponsors/xcarpentier","https://github.com/sponsors/johan-dutoit","https://github.com/sponsors/kesha-antonov"],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n  💬 Gifted Chat\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  The most complete chat UI for React Native \u0026 Web\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-gifted-chat\"\u003e\n  \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/react-native-gifted-chat.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-gifted-chat\"\u003e\u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-native-gifted-chat.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/FaridSafi/react-native-gifted-chat\"\u003e\u003cimg src=\"https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield\" alt=\"build\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003ch3 align=\"center\"\u003e\n  🚀 Try it now in your browser!\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://snack.expo.dev/@kesha-antonov/gifted-chat-playground\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/▶️_Try_GiftedChat_Playground-4630EB?style=for-the-badge\u0026logo=expo\u0026logoColor=white\" alt=\"Try GiftedChat on Expo Snack\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eNo installation required • Interactive examples • Edit and run in real-time\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003c!-- previews --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"https://github.com/user-attachments/assets/c9da88f5-0b20-471c-8cd7-373bdb767517\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg width=\"200\" src=\"https://github.com/user-attachments/assets/f72b17f1-6c2e-43b5-87e7-477011aa3b07\" /\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003cimg width=\"200\" src=\"https://github.com/user-attachments/assets/86711e73-ee3c-4527-b38d-e4dab47a44fe\" /\u003e\n\u003c/p\u003e\n\n---\n\n## Features\n\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-autolink](https://github.com/joshswan/react-native-autolink)\n- Avatar as user's initials\n- Localized dates\n- Multi-line TextInput\n- InputToolbar avoiding keyboard\n- System message\n- Quick Reply messages (bot)\n- Typing indicator\n- Ticks indicator to display message status ( delivered, read )\n- Scroll to bottom button\n- react-native-web [web configuration](#react-native-web)\n\n## Sponsor\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://www.lereacteur.io\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png\" height=\"60\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cp align=\"center\"\u003e\n    Coding Bootcamp in Paris co-founded by Farid Safi\n  \u003c/p\u003e\n  \u003ca href=\"https://www.lereacteur.io\" target=\"_blank\"\u003e\n    \u003cp align=\"center\"\u003e\n      Click to learn more\n    \u003c/p\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://getstream.io/chat/?utm_source=Github\u0026utm_medium=Github_Repo_Content_Ad\u0026utm_content=Developer\u0026utm_campaign=Github_Jan2022_Chat\u0026utm_term=react-native-gifted-chat\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png\" height=\"40\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cp align=\"center\"\u003e\n    Scalable \u003ca href=\"https://getstream.io/chat/?utm_source=Github\u0026utm_medium=Github_Repo_Content_Ad\u0026utm_content=Developer\u0026utm_campaign=Github_Jan2022_Chat\u0026utm_term=react-native-gifted-chat\" target=\"_blank\"\u003echat API/Server\u003c/a\u003e written in Go\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://getstream.io/chat/get_started/?utm_source=Github\u0026utm_medium=Github_Repo_Content_Ad\u0026utm_content=Developer\u0026utm_campaign=Github_Jan2022_Chat\u0026utm_term=react-native-gifted-chat\" target=\"_blank\"\u003eAPI Tour\u003c/a\u003e | \u003ca href=\"https://dev.to/nickparsons/react-native-chat-with-chuck-norris-3h7m?utm_source=Github\u0026utm_medium=Github_Repo_Content_Ad\u0026utm_content=Developer\u0026utm_campaign=Github_Jan2022_Chat\u0026utm_term=react-native-gifted-chat\" target=\"_blank\"\u003eReact Native Gifted tutorial\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://www.ethora.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png\" height=\"60\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cp align=\"center\"\u003e\n    A complete app engine featuring GiftedChat\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://bit.ly/ethorachat\" target=\"_blank\"\u003eCheck out our GitHub\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://amzn.to/3ZmTyb2\" target=\"_blank\"\u003eReact Key Concepts: Consolidate your knowledge of React’s core features (2nd ed. Edition)\u003c/a\u003e\n\u003c/p\u003e\n\n# Getting started\n\n## Installation\n\n### Install dependencies\n\nYarn:\n```bash\nyarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\nNpm:\n\n```bash\nnpm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\nExpo\n```bash\nnpx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller\n```\n\n### Non-expo users\n\n```bash\nnpx pod-install\n```\n\n### Setup react-native-reanimated\n\nFollow guide: [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin)\n\n## Examples\n\n### Basic usage\n\n```jsx\nimport React, { useState, useCallback, useEffect } from 'react'\nimport { Platform } from 'react-native'\nimport { GiftedChat } from 'react-native-gifted-chat'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport function Example() {\n  const [messages, setMessages] = useState([])\n  const insets = useSafeAreaInsets()\n\n  // If you have a tab bar, include its height\n  const tabbarHeight = 50\n  const keyboardTopToolbarHeight = Platform.select({ ios: 44, default: 0 })\n  const keyboardVerticalOffset = insets.bottom + tabbarHeight + keyboardTopToolbarHeight\n\n  useEffect(() =\u003e {\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 = []) =\u003e {\n    setMessages(previousMessages =\u003e\n      GiftedChat.append(previousMessages, messages),\n    )\n  }, [])\n\n  return (\n    \u003cGiftedChat\n      messages={messages}\n      onSend={messages =\u003e onSend(messages)}\n      user={{\n        _id: 1,\n      }}\n\n      keyboardAvoidingViewProps={{ keyboardVerticalOffset }}\n    /\u003e\n  )\n}\n```\n\n### Other examples\n\nCheck out code of [`examples`](example)\n\n## Data structure\n\nMessages, system messages, quick replies etc.: [data structure](src/Models.ts)\n\n## Props\n\n### Core Configuration\n\n- **`messages`** _(Array)_ - Messages to display\n- **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`\n- **`onSend`** _(Function)_ - Callback when sending a message\n- **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to a simple random string generator.\n- **`locale`** _(String)_ - Locale to localize the dates. You need first to import the locale you need (ie. `require('dayjs/locale/de')` or `import 'dayjs/locale/fr'`)\n\n### Refs\n\n- **`messagesContainerRef`** _(FlatList ref)_ - Ref to the flatlist\n- **`textInputRef`** _(TextInput ref)_ - Ref to the text input\n\n### Keyboard \u0026 Layout\n\n- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling.\n- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-avoiding-view). The `behavior` prop defaults to `'padding'`.\n- **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)\n- **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`\n\n### Text Input \u0026 Composer\n\n- **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state. Useful for managing text state outside of GiftedChat (e.g. with Redux). Don't forget to implement `textInputProps.onChangeText` to update the text state.\n- **`initialText`** _(String)_ - Initial text to display in the input field\n- **`isSendButtonAlwaysVisible`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty\n- **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.\n- **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.\n- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`\n- **`renderInputToolbar`** _(Component | Function)_ - Custom message composer container\n- **`renderComposer`** _(Component | Function)_ - Custom text input message composer\n- **`renderSend`** _(Component | Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))\n- **`renderActions`** _(Component | Function)_ - Custom action button on the left of the message composer\n- **`renderAccessory`** _(Component | Function)_ - Custom second line of actions below the message composer\n- **`textInputProps`** _(Object)_ - props to be passed to the [`\u003cTextInput\u003e`](https://reactnative.dev/docs/textinput).\n\n### Actions \u0026 Action Sheet\n\n- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)\n- **`actionSheet`** _(Function)_ - Custom action sheet interface for showing action options\n- **`actions`** _(Array)_ - Custom action options for the input toolbar action button; array of objects with `title` (string) and `action` (function) properties\n- **`actionSheetOptionTintColor`** _(String)_ - Tint color for action sheet options\n\n### Messages \u0026 Message Container\n\n- **`messagesContainerStyle`** _(Object)_ - Custom style for the messages container\n- **`renderMessage`** _(Component | Function)_ - Custom message container\n- **`renderLoading`** _(Component | Function)_ - Render a loading view when initializing\n- **`renderChatEmpty`** _(Component | Function)_ - Custom component to render in the ListView when messages are empty\n- **`renderChatFooter`** _(Component | Function)_ - Custom component to render below the MessagesContainer (separate from the ListView)\n- **`listProps`** _(Object)_ - Extra props to be passed to the messages [`\u003cFlatList\u003e`](https://reactnative.dev/docs/flatlist)\n\n### Message Bubbles \u0026 Content\n\n- **`renderBubble`** _(Component | Function(`props: BubbleProps`))_ - Custom message bubble. Receives [BubbleProps](src/Bubble/types.ts) as parameter.\n- **`renderMessageText`** _(Component | Function)_ - Custom message text\n- **`renderMessageImage`** _(Component | Function)_ - Custom message image\n- **`renderMessageVideo`** _(Component | Function)_ - Custom message video\n- **`renderMessageAudio`** _(Component | Function)_ - Custom message audio\n- **`renderCustomView`** _(Component | Function)_ - Custom view inside the bubble\n- **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`\n- **`onPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed\n- **`onLongPressMessage`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; you can use this to show action sheets (e.g., copy, delete, reply)\n- **`imageProps`** _(Object)_ - Extra props to be passed to the [`\u003cImage\u003e`](https://reactnative.dev/docs/image) component created by the default `renderMessageImage`\n- **`imageStyle`** _(Object)_ - Custom style for message images\n- **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`\n- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:\n  - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)\n  - `linkStyle` - Custom style for links\n  - `email` - Enable/disable email parsing (default: true)\n  - `phone` - Enable/disable phone number parsing (default: true)\n  - `url` - Enable/disable URL parsing (default: true)\n\nExample:\n\n```tsx\n\u003cGiftedChat\n  messageTextProps={{\n    phone: false, // Disable default phone number linking\n    matchers: [\n      {\n        type: 'phone',\n        pattern: /\\+?[1-9][0-9\\-\\(\\) ]{7,}[0-9]/g,\n        getLinkUrl: (replacerArgs: ReplacerArgs): string =\u003e {\n          return replacerArgs[0].replace(/[\\-\\(\\) ]/g, '')\n        },\n        getLinkText: (replacerArgs: ReplacerArgs): string =\u003e {\n          return replacerArgs[0]\n        },\n        style: styles.linkStyle,\n        onPress: (match: CustomMatch) =\u003e {\n          const url = match.getAnchorHref()\n\n          const options: {\n            title: string\n            action?: () =\u003e void\n          }[] = [\n            { title: 'Copy', action: () =\u003e setStringAsync(url) },\n            { title: 'Call', action: () =\u003e Linking.openURL(`tel:${url}`) },\n            { title: 'Send SMS', action: () =\u003e Linking.openURL(`sms:${url}`) },\n            { title: 'Cancel' },\n          ]\n\n          showActionSheetWithOptions({\n            options: options.map(o =\u003e o.title),\n            cancelButtonIndex: options.length - 1,\n          }, (buttonIndex?: number) =\u003e {\n            if (buttonIndex === undefined)\n              return\n\n            const option = options[buttonIndex]\n            option.action?.()\n          })\n        },\n      },\n    ],\n    linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },\n  }}\n/\u003e\n```\n\nSee full example in [LinksExample](example/components/chat-examples/LinksExample.tsx)\n\n### Avatars\n\n- **`renderAvatar`** _(Component | Function)_ - Custom message avatar; set to `null` to not render any avatar for the message\n- **`isUserAvatarVisible`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users\n- **`isAvatarVisibleForEveryMessage`** _(Bool)_ - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is `false`\n- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped\n- **`onLongPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is long-pressed\n- **`isAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`\n\n### Username\n\n- **`isUsernameVisible`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`\n- **`renderUsername`** _(Component | Function)_ - Custom Username container\n\n### Date \u0026 Time\n\n- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))\n- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'D MMMM'` (see [Day.js Format](https://day.js.org/docs/en/display/format))\n- **`dateFormatCalendar`** _(Object)_ - Format to use for rendering relative times; default is `{ sameDay: '[Today]' }` (see [Day.js Calendar](https://day.js.org/docs/en/plugin/calendar))\n- **`renderDay`** _(Component | Function)_ - Custom day above a message\n- **`renderTime`** _(Component | Function)_ - Custom time inside a message\n- **`timeTextStyle`** _(Object)_ - Custom text style for time inside messages (supports left/right styles)\n- **`isDayAnimationEnabled`** _(Bool)_ - Enable animated day label that appears on scroll; default is `true`\n\n### System Messages\n\n- **`renderSystemMessage`** _(Component | Function)_ - Custom system message\n\n### Load Earlier Messages\n\n- **`loadEarlierMessagesProps`** _(Object)_ - Props to pass to the LoadEarlierMessages component. The button is only visible when `isAvailable` is `true`. Supports the following props:\n  - `isAvailable` - Controls button visibility (default: false)\n  - `onPress` - Callback when button is pressed\n  - `isLoading` - Display loading indicator (default: false)\n  - `isInfiniteScrollEnabled` - Enable infinite scroll up when reaching the top of messages container, automatically calls `onPress` (not yet supported for web)\n  - `label` - Override the default \"Load earlier messages\" text\n  - `containerStyle` - Custom style for the button container\n  - `wrapperStyle` - Custom style for the button wrapper\n  - `textStyle` - Custom style for the button text\n  - `activityIndicatorStyle` - Custom style for the loading indicator\n  - `activityIndicatorColor` - Color of the loading indicator (default: 'white')\n  - `activityIndicatorSize` - Size of the loading indicator (default: 'small')\n- **`renderLoadEarlier`** _(Component | Function)_ - Custom \"Load earlier messages\" button\n\n### Typing Indicator\n\n- **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.\n- **`renderTypingIndicator`** _(Component | Function)_ - Custom typing indicator component\n- **`typingIndicatorStyle`** _(StyleProp\u003cViewStyle\u003e)_ - Custom style for the TypingIndicator component.\n- **`renderFooter`** _(Component | Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [CustomizedFeaturesExample.tsx](example/components/chat-examples/CustomizedFeaturesExample.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.\n\n### Quick Replies\n\nSee [Quick Replies example in messages.ts](example/example-expo/data/messages.ts)\n\n- **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)\n- **`renderQuickReplies`** _(Function)_ - Custom all quick reply view\n- **`quickReplyStyle`** _(StyleProp\u003cViewStyle\u003e)_ - Custom quick reply view style\n- **`quickReplyTextStyle`** _(StyleProp\u003cTextStyle\u003e)_ - Custom text style for quick reply buttons\n- **`quickReplyContainerStyle`** _(StyleProp\u003cViewStyle\u003e)_ - Custom container style for quick replies\n- **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view\n\n### Scroll to Bottom\n\n- **`isScrollToBottomEnabled`** _(Bool)_ - Enables the scroll to bottom Component (Default is false)\n- **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container\n- **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)\n- **`scrollToBottomStyle`** _(Object)_ - Custom style for Bottom Component container\n\n## Notes for Android\n\nIf you are using Create React Native App / Expo, no Android specific installation steps are required -- you can skip this section. Otherwise, we recommend modifying your project configuration as follows.\n\n- Make sure you have `android:windowSoftInputMode=\"adjustResize\"` in your `AndroidManifest.xml`:\n\n  ```xml\n  \u003cactivity\n    android:name=\".MainActivity\"\n    android:label=\"@string/app_name\"\n    android:windowSoftInputMode=\"adjustResize\"\n    android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize\"\u003e\n  ```\n\n- For **Expo**, there are at least 2 solutions to fix it:\n\n  - Append [`KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview) after GiftedChat. This should only be done for Android, as `KeyboardAvoidingView` may conflict with the iOS keyboard avoidance already built into GiftedChat, e.g.:\n\n```\n\u003cView style={{ flex: 1 }}\u003e\n   \u003cGiftedChat /\u003e\n   {\n      Platform.OS === 'android' \u0026\u0026 \u003cKeyboardAvoidingView behavior=\"padding\" /\u003e\n   }\n\u003c/View\u003e\n```\n\n## Notes for local development\n\n#### With create-react-app\n\n1. `yarn add -D react-app-rewired`\n2. `touch config-overrides.js`\n\n```js\nmodule.exports = function override(config, env) {\n  config.module.rules.push({\n    test: /\\.js$/,\n    exclude: /node_modules[/\\\\](?!react-native-gifted-chat)/,\n    use: {\n      loader: 'babel-loader',\n      options: {\n        babelrc: false,\n        configFile: false,\n        presets: [\n          ['@babel/preset-env', { useBuiltIns: 'usage' }],\n          '@babel/preset-react',\n        ],\n        plugins: ['@babel/plugin-proposal-class-properties'],\n      },\n    },\n  })\n\n  return config\n}\n```\n\n\u003e You will find an example and a **web demo** here: [xcarpentier/gifted-chat-web-demo](https://github.com/xcarpentier/gifted-chat-web-demo)\n\n\u003e Another example with **Gatsby** : [xcarpentier/clean-archi-boilerplate](https://github.com/xcarpentier/clean-archi-boilerplate/tree/develop/apps/web)\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## Questions\n\n- [How can I set Bubble color for each user?](https://github.com/FaridSafi/react-native-gifted-chat/issues/672)\n- [How can I pass style props to InputToolbar design and customize its color and other styles properties?](https://github.com/FaridSafi/react-native-gifted-chat/issues/662)\n- [How can I change the color of the message box?](https://github.com/FaridSafi/react-native-gifted-chat/issues/640)\n- [Is there a way to manually dismiss the keyboard?](https://github.com/FaridSafi/react-native-gifted-chat/issues/647)\n- [I want to implement a popover that pops right after clicking on a specific avatar,\n  what is the best implementation in this case and how?](https://github.com/FaridSafi/react-native-gifted-chat/issues/660)\n- [Why TextInput is hidden on Android?](https://github.com/FaridSafi/react-native-gifted-chat/issues/680#issuecomment-359699364)\n- [How to use renderLoading?](https://github.com/FaridSafi/react-native-gifted-chat/issues/298)\n- [Can I use MySql to save the message?](https://github.com/FaridSafi/react-native-gifted-chat/issues/738)\n\n## You have a question?\n\n1. Please check this readme and you might find a response\n1. Please ask on StackOverflow first: https://stackoverflow.com/questions/tagged/react-native-gifted-chat\n1. Find responses in existing issues\n1. Try to keep issues for issues\n\n## Hire an expert\n\nLooking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)\n\n## Author\n\nFeel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) or [@xcapetir](https://www.twitter.com/xcapetir)\n\n## Maintainer\n\nHave any questions? Reach out to [Kesha Antonov](https://github.com/kesha-antonov)\n\nPlease note that I'm maintaining this project in my free time for free. If you find any issues, feel free to open them, and I'll do my best to address them as time permits.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaridsafi%2Freact-native-gifted-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaridsafi%2Freact-native-gifted-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaridsafi%2Freact-native-gifted-chat/lists"}