{"_id":"@deelzat/react-native-gifted-chat","_rev":"1-61b1ddb6c930eb2af7e15f4e521db141","name":"@deelzat/react-native-gifted-chat","dist-tags":{"latest":"0.16.3"},"versions":{"0.16.3":{"name":"@deelzat/react-native-gifted-chat","version":"0.16.3","description":"The most complete chat UI for React Native","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/FaridSafi/react-native-gifted-chat.git"},"keywords":["android","ios","react-native","react","react-component","messenger","message","chat"],"author":{"name":"Farid Safi"},"license":"MIT","bugs":{"url":"https://github.com/FaridSafi/react-native-gifted-chat/issues"},"homepage":"https://github.com/FaridSafi/react-native-gifted-chat#readme","scripts":{"config:dev":"json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'","config:npm":"json -I -f package.json -e 'this.main=\"lib/index.js\"'","lint":"tslint --project .","lint:fix":"tslint ./src/**/*.{ts,tsx} --fix","tsc":"tsc --noEmit","start":"yarn config:dev && expo start","start:web":"yarn config:dev && expo start -w --dev","build":"rm -rf lib/ && node_modules/.bin/tsc && cp flow-typedefs/*.js.flow lib/","test":"TZ=Europe/Paris jest --no-watchman","test:watch":"TZ=Europe/Paris jest --watch","test:coverage":"TZ=Europe/Paris jest --coverage","prepublishOnly":"yarn lint && yarn build && yarn test && yarn config:npm","postpublish":"yarn config:dev","prettier":"prettier --write \"src/**/*.{ts,tsx}\""},"jest":{"preset":"react-native","setupFiles":["./tests/setup.js"],"moduleFileExtensions":["js","jsx","json","ts","tsx"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"babel-jest"},"testMatch":["**/*.test.ts?(x)"],"modulePathIgnorePatterns":["/example-expo","/example-slack-message"],"coveragePathIgnorePatterns":["./src/__tests__/"]},"devDependencies":{"@babel/core":"7.9.6","@babel/preset-typescript":"7.9.0","@types/jest":"25.2.1","@types/react":"^16.9.11","@types/react-native":"^0.60.22","@types/react-native-communications":"2.2.1","@types/react-test-renderer":"16.9.2","@types/uuid":"3.4.9","babel-core":"7.0.0-bridge.0","babel-jest":"25.5.1","babel-preset-expo":"^8.1.0","expo":"^37.0.0","expo-constants":"~9.0.0","expo-image-picker":"~8.1.0","expo-location":"~8.1.0","expo-permissions":"~8.1.0","flow-bin":"0.125.0","husky":"4.2.5","jest-expo":"^37.0.0","json":"9.0.6","prettier":"2.0.5","react":"16.9.0","react-dom":"16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-maps":"0.26.1","react-native-nav":"2.0.2","react-native-web-maps":"0.2.0","react-test-renderer":"16.9.0","react-native-web":"^0.11.7","tslint":"6.1.2","tslint-config-prettier":"1.18.0","typescript":"^3.8.3"},"dependencies":{"@expo/react-native-action-sheet":"^3.6.0","dayjs":"^1.8.26","prop-types":"^15.7.2","react-native-communications":"^2.2.1","react-native-iphone-x-helper":"^1.3.1","react-native-lightbox":"^0.8.1","react-native-parsed-text":"0.0.22","react-native-typing-animation":"^0.1.7","uuid":"3.4.0"},"peerDependencies":{"dayjs":"*","react":"*","react-native":"*"},"husky":{"hooks":{"pre-commit":"yarn lint:fix && yarn prettier && yarn tsc"}},"directories":{"lib":"lib","test":"tests"},"gitHead":"cea73fefcac468c1f87bd920125f5c7c70ef7d61","_id":"@deelzat/react-native-gifted-chat@0.16.3","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-IzCBaORVOoRa06Uv4HSHA5kxgu23tS8V6qu46b5C5bViB8e5cj7UOQP3R4wN4j/5qJF1m9rHQyLPsKIaI0xoqg==","shasum":"daa5f36bbdb37d1d126264418b88f9ffd28bde14","tarball":"https://registry.npmjs.org/@deelzat/react-native-gifted-chat/-/react-native-gifted-chat-0.16.3.tgz","fileCount":110,"unpackedSize":292616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIoxnCRA9TVsSAnZWagAAjTgP/3dG9ZXazZC/FZY3r2lo\nLu7I5lqNZCLOOlgCudBxbbCQcua1knWLRHYOObh0BtWWf0TXALzGeYeD5TQJ\nCcAhoBA4oxReGllggK+nHYCFiCUJSZfrRUYPHexxWdguwZCrZk7Vo80Gbwdw\nfO817kjGhbRUKdbHnd6VGg0/tRy8XY93W3AR4KsS8hWuAtiJfUgTcVqLjAzD\n1nb0XW8wz8tjr/lUuQ9zLqVz1GJnFnuQMSQG0GgTQdEN9GsR3ANc9+W1l7CH\nlfuAMxPmztXZf4rPLuvLi0i91SJi123Lv+L0y4D82wZfbWoWUCsQ2GbPhYow\nv4ZYPUtd3/ZMrYBDH2a1Nt5U5rcAST5S1QpM7R6pWpxSHS35TG4/5uQ+j9fX\nHFZ9++VMs2NgScsu8AIobrCnXOzhY58I8J3ZHYPHCx7c2Ys53FNTbS5guKty\nYaqgCTFyfl+UY3ZDFJNyNVTn0e8xvX3I+pgnt2MwhFj/Fzj3aibys8Om9bQa\noU6hSDexJFaS5CfZJrY9DqmzFlpqaquaezJVOTGadw5na8EPGj30uEBQqpsR\nx0r7Q4Ds6dxa8prkSunz9OE9uMFTD+rGi4jW1bXS9j87/Iy6SSAcfwY6lEy9\nNm4wuvrNI3MgQYCClMUtUcy8xM9RNydQ2cApkNHHmAJxn8+k4uwwVHmNNfqk\nmiBU\r\n=Qdnb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC39UY8v8XKhruXitoB4e9j91/AJh6ggF5ZPpKjgLXeCQIhAI65O4MT7i5EiWh2vlvJFFhKxkTvwSfJkcHVUk2BULev"}]},"_npmUser":{"name":"moja.dam","email":"mujahed@deelzat.com"},"maintainers":[{"name":"moja.dam","email":"mujahed@deelzat.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-gifted-chat_0.16.3_1629654119684_0.11428593435528378"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-22T17:41:59.637Z","0.16.3":"2021-08-22T17:41:59.827Z","modified":"2022-04-05T03:35:20.858Z"},"maintainers":[{"name":"moja.dam","email":"mujahed@deelzat.com"}],"description":"The most complete chat UI for React Native","homepage":"https://github.com/FaridSafi/react-native-gifted-chat#readme","keywords":["android","ios","react-native","react","react-component","messenger","message","chat"],"repository":{"type":"git","url":"git+https://github.com/FaridSafi/react-native-gifted-chat.git"},"author":{"name":"Farid Safi"},"bugs":{"url":"https://github.com/FaridSafi/react-native-gifted-chat/issues"},"license":"MIT","readme":"< align=\"center\" >\n

\nThis is a fork from \n

\n

\nhttps://github.com/FaridSafi/react-native-gifted-chat\n

\n

\n \n Β  Β \"react-native-gifted-chat\"\n \n\n

\n

\n πŸ’¬ Gifted Chat\n

\n

\n The most complete chat UI for React Native & Web\n

\n

\n \n \"npm\n \"npm\n \n\n

\n

\n Β \"build\"\n Β \"deployed\"\n \n \n \n \n

\n\n

\n Demo Web πŸ–₯\n

\n

\n Snack GiftedChat playground\n \n

\n\n## Sponsor\n\n

\n
\n \n \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 \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 \n \n
\n

Delivering Personalized Healthcare

\n

\n Find out more\n

\n

\n\n## The future of GiftedChat πŸŽ‰ \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- 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- Typying indicatior [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## 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 => GiftedChat.append(previousMessages, messages))\n }, [])\n\n return (\n onSend(messages)}\n user={{\n _id: 1,\n }}\n />\n )\n}\n```\n\n## Advanced example\n\nSee [`App.tsx`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/App.tsx) for a working demo!\n\n## \"Slack\" example\n\nSee the files in [`example-slack-message`](example-slack-message) for an example of how to override the default UI to make something that looks more like Slack -- with usernames displayed and all messages on the left.\n\n## Message object\n\n> e.g. Chat Message\n\n```ts\nexport interface IMessage {\n _id: string | number\n text: string\n createdAt: Date | number\n user: User\n image?: string\n video?: string\n audio?: string\n system?: boolean\n sent?: boolean\n received?: boolean\n pending?: boolean\n quickReplies?: QuickReplies\n}\n```\n\n```js\n{\n _id: 1,\n text: 'My message',\n createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),\n user: {\n _id: 2,\n name: 'React Native',\n avatar: 'https://facebook.github.io/react/img/logo_og.png',\n },\n image: 'https://facebook.github.io/react/img/logo_og.png',\n // You can also add a video prop:\n video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',\n // Mark the message as sent, using one tick\n sent: true,\n // Mark the message as received, using two tick\n received: true,\n // Mark the message as pending with a clock loader\n pending: true,\n // Any additional custom parameters are passed through\n}\n```\n\n> e.g. System Message\n\n```js\n{\n _id: 1,\n text: 'This is a system message',\n createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),\n system: true,\n // Any additional custom parameters are passed through\n}\n```\n\n> e.g. Chat Message with Quick Reply options\n\nSee PR [#1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)\n\n```ts\ninterface Reply {\n title: string\n value: string\n messageId?: any\n}\n\ninterface QuickReplies {\n type: 'radio' | 'checkbox'\n values: Reply[]\n keepIt?: boolean\n}\n```\n\n```js\n {\n _id: 1,\n text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',\n createdAt: new Date(),\n quickReplies: {\n type: 'radio', // or 'checkbox',\n keepIt: true,\n values: [\n {\n title: 'πŸ˜‹ Yes',\n value: 'yes',\n },\n {\n title: 'πŸ“· Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: '😞 Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'React Native',\n },\n },\n {\n _id: 2,\n text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',\n createdAt: new Date(),\n quickReplies: {\n type: 'checkbox', // or 'radio',\n values: [\n {\n title: 'Yes',\n value: 'yes',\n },\n {\n title: 'Yes, let me show you with a picture!',\n value: 'yes_picture',\n },\n {\n title: 'Nope. What?',\n value: 'no',\n },\n ],\n },\n user: {\n _id: 2,\n name: 'React Native',\n },\n }\n```\n\n## Props\n\n- **`messages`** _(Array)_ - Messages to display\n- **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.\n- **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))\n- **`placeholder`** _(String)_ - Placeholder when `text` is empty; default is `'Type a message...'`\n- **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)\n- **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }`\n- **`onSend`** _(Function)_ - Callback when sending a message\n- **`alwaysShowSend`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty\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- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'`\n- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'`\n- **`loadEarlier`** _(Bool)_ - Enables the \"load earlier messages\" button, required for `infiniteScroll`\n- **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`\n- **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages\n- **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages\n- **`renderLoading`** _(Function)_ - Render a loading view when initializing\n- **`renderLoadEarlier`** _(Function)_ - Custom \"Load earlier messages\" button\n- **`renderAvatar`** _(Function)_ - Custom message avatar; set to `null` to not render any avatar for the message\n- **`showUserAvatar`** _(Bool)_ - Whether to render an avatar for the current user; default is `false`, only show avatars for other users\n- **`showAvatarForEveryMessage`** _(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- **`renderAvatarOnTop`** _(Bool)_ - Render the message avatar at the top of consecutive messages, rather than the bottom; default is `false`\n- **`renderBubble`** _(Function)_ - Custom message bubble\n- **`renderTicks`** _(Function(`message`))_ - Custom ticks indicator to display message status\n- **`renderSystemMessage`** _(Function)_ - Custom system message\n- **`onPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is pressed\n- **`onLongPress`** _(Function(`context`, `message`))_ - Callback when a message bubble is long-pressed; default is to show an ActionSheet with \"Copy Text\" (see [example using `showActionSheetWithOptions()`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119))\n- **`inverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`\n- **`renderUsernameOnMessage`** _(Bool)_ - Indicate whether to show the user's username inside the message bubble; default is `false`\n- **`renderMessage`** _(Function)_ - Custom message container\n- **`renderMessageText`** _(Function)_ - Custom message text\n- **`renderMessageImage`** _(Function)_ - Custom message image\n- **`renderMessageVideo`** _(Function)_ - Custom message video\n- **`imageProps`** _(Object)_ - Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`\n- **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`\n- **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)\n- **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`\n- **`renderCustomView`** _(Function)_ - Custom view inside the bubble\n- **`renderDay`** _(Function)_ - Custom day above a message\n- **`renderTime`** _(Function)_ - Custom time inside a message\n- **`renderFooter`** _(Function)_ - Custom footer component on the ListView, e.g. `'User is typing...'`; see [App.tsx](/App.tsx) for an example. Overrides default typing indicator that triggers when `isTyping` is true.\n- **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty\n- **`renderChatFooter`** _(Function)_ - Custom component to render below the MessageContainer (separate from the ListView)\n- **`renderInputToolbar`** _(Function)_ - Custom message composer container\n- **`renderComposer`** _(Function)_ - Custom text input message composer\n- **`renderActions`** _(Function)_ - Custom action button on the left of the message composer\n- **`renderSend`** _(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- **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer\n- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)\n- **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)\n- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`\n- **`listViewProps`** _(Object)_ - Extra props to be passed to the messages [``](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details\n- **`textInputProps`** _(Object)_ - Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html)\n- **`textInputStyle`** _(Object)_ - Custom style to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html)\n- **`multiline`** _(Bool)_ - Indicates whether to allow the [``](https://facebook.github.io/react-native/docs/textinput.html) to be multiple lines or not; default `true`.\n- **`keyboardShouldPersistTaps`** _(Enum)_ - Determines whether the keyboard should stay visible after a tap; see [``](https://facebook.github.io/react-native/docs/scrollview.html) docs\n- **`onInputTextChanged`** _(Function)_ - Callback when the input text changes\n- **`maxInputLength`** _(Integer)_ - Max message composer TextInput length\n- **`parsePatterns`** _(Function)_ - Custom parse patterns for [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text) used to linking message content (like URLs and phone numbers), e.g.:\n\n```js\n [\n { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },\n { pattern: /#(\\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },\n ]}\n />\n```\n\n- **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.\n- **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.\n- **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.\n\n* **`scrollToBottom`** _(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* **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)\n* **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)\n* **`renderQuickReplies`** _(Function)_ - Custom all quick reply view\n* **`quickReplyStyle`** _(StyleProp)_ - Custom quick reply view style\n* **`renderQuickReplySend`** _(Function)_ - Custom quick reply **send** view\n* **`shouldUpdateMessage`** _(Function)_ - Lets the message component know when to update outside of normal cases.\n* **`infiniteScroll`** _(Bool)_ - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to add `loadEarlier` prop too.\n\n## Imperative methods\n\n- `focusTextInput()` - Open the keyboard and focus the text input box\n\n## Notes for [Redux](https://github.com/reactjs/redux)\n\nThe `messages` prop should work out-of-the-box with Redux. In most cases, this is all you need.\n\nIf you decide to specify a `text` prop, GiftedChat will no longer manage its own internal `text` state and will defer entirely to your prop.\nThis is great for using a tool like Redux, but there's one extra step you'll need to take:\nsimply implement `onInputTextChanged` to receive typing events and reset events (e.g. to clear the text `onSend`):\n\n```js\n this.setCustomText(text)}\n /* ... */\n/>\n```\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 \n ```\n\n- For **Expo**, there are at least 2 solutions to fix it:\n\n - Append [`KeyboardAvoidingView`](https://facebook.github.io/react-native/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\n \n {\n Platform.OS === 'android' && \n }\n\n```\n\nIf you use React Navigation, additional handling may be required to account for navigation headers and tabs. `KeyboardAvoidingView`'s `keyboardVerticalOffset` property can be set to the height of the navigation header and [`tabBarOptions.keyboardHidesTabBar`](https://reactnavigation.org/docs/en/bottom-tab-navigator.html#bottomtabnavigatorconfig) can be set to keep the tab bar from being shown when the keyboard is up. Due to a [bug with calculating height on Android phones with notches](facebook/react-native#23693), `KeyboardAvoidingView` is recommended over other solutions that involve calculating the height of the window.\n\n- adding an opaque background status bar on app.json (even though `android:windowSoftInputMode=\"adjustResize\"` is set internally on Expo's Android apps, the translucent status bar causes it not to work): https://docs.expo.io/versions/latest/guides/configuration.html#androidstatusbar\n\n- If you plan to use `GiftedChat` inside a `Modal`, see [#200](https://github.com/FaridSafi/react-native-gifted-chat/issues/200).\n\n## Notes for local development\n\n### Native\n\n1. Install `yarn global add expo-cli`\n2. Install dependencies`yarn install`\n3. `expo start`\n\n### react-native-web\n\n#### With expo\n\n1. Install `yarn global add expo-cli`\n2. Install dependencies`yarn install`\n3. `expo start -w`\n\n[Upgrade snack version](https://snackager.expo.io/bundle/react-native-gifted-chat@0.15.0?bypassCache=true)\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|react-native-lightbox|react-native-parsed-text)/,\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> 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> Another example with **Gatsby** : [xcarpentier/clean-archi-boilerplate](https://github.com/xcarpentier/clean-archi-boilerplate/tree/develop/apps/web)\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## License\n\n- [MIT](LICENSE)\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## Contributors\n\n- Kevin Cooper [cooperka](https://github.com/cooperka)\n- Kfir Golan [kfiroo](https://github.com/kfiroo)\n- Bruno Cascio [brunocascio](https://github.com/brunocascio)\n- Xavier Carpentier [xcarpentier](https://github.com/xcarpentier)\n- [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)\n\n## Hire an expert!\n\nLooking for a ReactNative freelance expert with more than 14 years of experience? Contact Xavier from hisΒ [website](https://xaviercarpentier.com)!\n","readmeFilename":"README.md"}