{"_id":"@beaudinn/react-native-gifted-chat","_rev":"1-ab8b2e121c185a21b20016076ddbe4b7","name":"@beaudinn/react-native-gifted-chat","dist-tags":{"latest":"0.14.0"},"versions":{"0.14.0":{"name":"@beaudinn/react-native-gifted-chat","version":"0.14.0","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/Beaudinn/react-native-gifted-chat.git"},"keywords":["android","ios","react-native","react","react-component","messenger","message","chat"],"author":{"name":"Beaudinn"},"license":"MIT","bugs":{"url":"https://github.com/Beaudinn/react-native-gifted-chat/issues"},"homepage":"https://github.com/Beaudinn/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 .","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 config:npm","postpublish":"yarn config:dev"},"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.1.2","@babel/preset-typescript":"^7.1.0","@types/jest":"25.1.2","@types/react":"16.9.17","@types/react-native":"^0.61.5","@types/react-native-communications":"2.2.1","@types/react-test-renderer":"16.8.3","@types/uuid":"3.4.7","babel-core":"^7.0.0-bridge.0","babel-jest":"24.7.1","babel-preset-expo":"^7.0.0","expo":"^36.0.0","expo-constants":"~8.0.0","expo-image-picker":"~8.0.0","expo-location":"~8.0.0","expo-permissions":"~8.0.0","flow-bin":"^0.118.0","husky":"^4.0.2","jest-expo":"^36.0.0","json":"^9.0.6","prettier":"1.18.0","react":"16.9.0","react-dom":"16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-maps":"0.26.1","react-native-nav":"2.0.2","react-native-web":"0.12.1","react-native-web-maps":"0.2.0","react-test-renderer":"16.5.1","tslint":"5.12.0","tslint-config-prettier":"1.17.0","typescript":"3.4.5"},"dependencies":{"@expo/react-native-action-sheet":"3.5.0","@types/react-typing-animation":"^1.6.2","moment":"^2.19.0","prop-types":"15.7.2","react-native-communications":"2.2.1","react-native-iphone-x-helper":"^1.2.0","react-native-lightbox":"^0.8.1","react-native-parsed-text":"git+https://github.com/EvanBacon/react-native-parsed-text.git","react-native-typing-animation":"^0.1.7","uuid":"3.3.3"},"peerDependencies":{"moment":"*","react":"*","react-native":"*"},"husky":{"hooks":{"pre-commit":"yarn lint && yarn tsc"}},"directories":{"lib":"lib","test":"tests"},"gitHead":"d65e0bc7a9a462b548d67dea84a1ed288f261856","_id":"@beaudinn/react-native-gifted-chat@0.14.0","_nodeVersion":"11.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-jl6RV9LtjvzkTGr9uczYpblmCIya3wmV7sa56MVO/929VHtqtvScMpAC4H+Uv+gT9MpvZDioN7p0A9xz2t9q3A==","shasum":"5c6648da87cc5a1d6eaa40d1a6bb838fb0116f27","tarball":"https://registry.npmjs.org/@beaudinn/react-native-gifted-chat/-/react-native-gifted-chat-0.14.0.tgz","fileCount":100,"unpackedSize":279316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZR18CRA9TVsSAnZWagAAIycQAI0Yx5ZSvFfe0rHE6swk\nSYS1BHVfdqJGGpMFUZsd/epoe4rR0WIRRSYfcGjz46PZFyRuGjtvScp96dGB\nbTZ6Ykci69boCuZAJJ5/66hWpn3qF/8Mu1eNwEP6LEnPrgIF/ZIPWmielxDi\n3TlCAj/RqONVWpk2g/BK/Ipa3eJEF0HjdIuCJ0ORtjABec5QQwOkCgniWpG5\n4dbBd2A4HUtoi74xT9L2liDaYvllwtMSWqwrAIDbavj3TEUchBmB40rOeRmc\nJdZ32yNIjzTErnyP6vkMeeFeONlf0Irc4VP1bO+8o4C2MbO/S4ljTQoiIQSu\nqU3Y9/F4WJbZEuCX4XgVdThu9d1/JUwCF/eoRL7K4zScrlEzS/8aSFA8SPyE\nXWP0nstyCXJBQ1x9+ruqFU1nQC58VJ7tmhKwfKfVPC/k29Gg76Scjnjwpuo6\nwgmJ1z/8fPH8tNWe6PU5mEsO8Hv/3rySotl8GHp2zzUf/oXrvHS6nFTEszHb\n0FNuAlqmGlKDmLnlgImZ/e5sXR30m569tXRYmblLigjEEgJIreIoKKYQuPGO\nkqV6utr7guEJ+hGyXzmmDy3sYRnCSVXt2U+g6kTSWfBfaUWDBzC4V0f+lJEP\ncl2baoQKe79TyUyvpplnCveH/fUZ3SynCVjevvfu/kIEjFoHWdWmYEDGLOmf\ntmmE\r\n=5rZ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/A+QwGibbZ52Ktm7NflB1qY6CaM3KuM2vy9pI+UiFpAiApDU4k16lfyEaCdJO8pelHzGtySdobxE7FACxHp+iiDQ=="}]},"maintainers":[{"name":"beaudinn","email":"beaudinngreve@gmail.com"}],"_npmUser":{"name":"beaudinn","email":"beaudinngreve@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-gifted-chat_0.14.0_1583684988256_0.2287297242619728"},"_hasShrinkwrap":false}},"time":{"created":"2020-03-08T16:29:48.034Z","0.14.0":"2020-03-08T16:29:48.459Z","modified":"2022-04-04T18:07:19.022Z"},"maintainers":[{"name":"beaudinn","email":"beaudinngreve@gmail.com"}],"description":"The most complete chat UI for React Native","homepage":"https://github.com/Beaudinn/react-native-gifted-chat#readme","keywords":["android","ios","react-native","react","react-component","messenger","message","chat"],"repository":{"type":"git","url":"git+https://github.com/Beaudinn/react-native-gifted-chat.git"},"author":{"name":"Beaudinn"},"bugs":{"url":"https://github.com/Beaudinn/react-native-gifted-chat/issues"},"license":"MIT","readme":"

\n

\n \n Β  Β \"react-native-gifted-chat\"\n \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 \"build\"\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\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## Please vote\n**GiftedChat** depends on other packages and some needs a boost, please vote for PRs will improve it, thanks:\n- https://github.com/taskrabbit/react-native-parsed-text/pull/58\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\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 from 'react'\nimport { GiftedChat } from 'react-native-gifted-chat'\n\nclass Example extends React.Component {\n state = {\n messages: [],\n }\n\n componentDidMount() {\n this.setState({\n messages: [\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\n onSend(messages = []) {\n this.setState(previousState => ({\n messages: GiftedChat.append(previousState.messages, messages),\n }))\n }\n\n render() {\n return (\n this.onSend(messages)}\n user={{\n _id: 1,\n }}\n />\n )\n }\n}\n```\n\n## Advanced example\n\nSee [`App.js`](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```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 // 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\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\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- **`renderSystemMessage`** _(Function)_ - Custom system message\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 [example/App.js](example/App.js) 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\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 add -g expo-cli`\n2. `expo start`\n\n### react-native-web\n\n#### With expo\n\n1. Install `yarn add -g expo-cli`\n2. `expo start -w`\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)!\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 12 years of experience? Contact Xavier from hisΒ [website](https://xaviercarpentier.com)!\n","readmeFilename":"README.md"}