{"_id":"@applications-developer/react-native-gifted-chat","_rev":"2-bc924244cbaea7b861a73abee176bbf3","name":"@applications-developer/react-native-gifted-chat","description":"The most complete chat UI for React Native","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@applications-developer/react-native-gifted-chat","version":"0.3.0","description":"The most complete chat UI for React Native","main":"index.js","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":{"lint":"eslint . --ext .js,.jsx"},"devDependencies":{"eslint":"3.19.0","eslint-config-airbnb":"15.0.2","eslint-config-cooperka":"0.2.3","eslint-plugin-import":"2.6.1","eslint-plugin-jsx-a11y":"5.1.1","eslint-plugin-react":"7.1.0","eslint-plugin-react-native":"2.3.2"},"dependencies":{"@expo/react-native-action-sheet":"^1.0.1","md5":"2.2.1","moment":"^2.19.0","prop-types":"15.5.10","react-native-communications":"2.2.1","react-native-invertible-scroll-view":"^1.1.0","react-native-lightbox":"^0.7.0","react-native-parsed-text":"^0.0.19","shallowequal":"1.0.2","uuid":"3.1.0"},"gitHead":"2bcd939438ff68f201ea2fc3fe7a1536d814a3d3","_id":"@applications-developer/react-native-gifted-chat@0.3.0","_shasum":"450591b78e33287b57003f1261d4f6d86da1f2eb","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"xcarpentier","email":"contact@xaviercarpentier.com"},"dist":{"shasum":"450591b78e33287b57003f1261d4f6d86da1f2eb","tarball":"https://registry.npmjs.org/@applications-developer/react-native-gifted-chat/-/react-native-gifted-chat-0.3.0.tgz","integrity":"sha512-tlr3nJxeh+ro4dHSEMkbPS2EAkhhb90LgNTHJLq6CW8ltQq0ohIoIUSgBmw/QvBp2iR6UGnW+pQMMM8QRLKTuQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBplTkxdP5wWcShwKPUf+6mfsZplT/wYGnkqVLnWj6btAiAOCIlx1vxNO55cHbEV5pwSyqie3MunO7di3jLIBxChgw=="}]},"maintainers":[{"name":"xcarpentier","email":"contact@xaviercarpentier.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-gifted-chat-0.3.0.tgz_1508488773973_0.5345130052883178"}}},"readme":"# Gifted Chat\n\n[![npm downloads](https://img.shields.io/npm/dm/react-native-gifted-chat.svg)](https://www.npmjs.com/package/react-native-gifted-chat)\n[![npm version](https://img.shields.io/npm/v/react-native-gifted-chat.svg)](https://www.npmjs.com/package/react-native-gifted-chat)\n[![Latest GitHub tag](https://img.shields.io/github/tag/FaridSafi/react-native-gifted-chat.svg)](https://github.com/FaridSafi/react-native-gifted-chat)\n\nThe most complete chat UI for React Native (formerly known as Gifted Messenger).\n\n![screenshot 1](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/screenshots/gifted-chat-1.png)\n![screenshot 2](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/screenshots/gifted-chat-2.png)\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-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)\n- Avatar as user's initials\n- Localized dates\n- Multiline TextInput\n- InputToolbar avoiding keyboard\n- Redux support\n- System message\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## Example\n\n```jsx\nimport { GiftedChat } from 'react-native-gifted-chat';\n\nclass Example extends React.Component {\n\n  state = {\n    messages: [],\n  };\n\n  componentWillMount() {\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://facebook.github.io/react/img/logo_og.png',\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      <GiftedChat\n        messages={this.state.messages}\n        onSend={(messages) => this.onSend(messages)}\n        user={{\n          _id: 1,\n        }}\n      />\n    );\n  }\n\n}\n```\n\n## Advanced example\n\nSee [example/App.js](example/App.js) for a working demo!\n\n## Message object\n\ne.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  // Any additional custom parameters are passed through\n}\n```\n\ne.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## Props\n\n- **`messages`** _(Array)_ - Messages to display\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- **`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- **`isAnimated`** _(Bool)_ - Animates the view when the keyboard appears\n- **`loadEarlier`** _(Bool)_ - Enables the \"Load earlier messages\" button\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- **`onPressAvatar`** _(Function(`user`))_ - Callback when a message avatar is tapped\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- **`renderMessage`** _(Function)_ - Custom message container\n- **`renderMessageText`** _(Function)_ - Custom message text\n- **`renderMessageImage`** _(Function)_ - Custom message image\n- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`\n- **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)\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\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 [`<ListView>`](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 [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)\n- **`keyboardShouldPersistTaps`** _(Enum)_ - Determines whether the keyboard should stay visible after a tap; see [`<ScrollView>`](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 linkify message content (like URLs and phone numbers), e.g.:\n\n    ```js\n    <GiftedChat\n      parsePatterns={(linkStyle) => [\n        { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },\n        { pattern: /#(\\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },\n      ]}\n    />\n    ```\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<GiftedChat\n  text={customText}\n  onInputTextChanged={(text) => this.setCustomText(text)}\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    <activity\n      android:name=\".MainActivity\"\n      android:label=\"@string/app_name\"\n      android:windowSoftInputMode=\"adjustResize\"\n      android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize\">\n    ```\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\nYou can use [`wml`](https://github.com/wix/wml) to keep the example app in sync\nwith any changes you make to the library during development. Steps:\n\n1. Install it: `npm install -g wml`\n2. Configure it: `wml add . example/node_modules/react-native-gifted-chat` from the root directory\n3. `cd example`\n4. `npm start`\n5. `wml start` in another terminal window (doesn't matter where)\n\nNote that it's important for `wml start` to come **after** `npm start`, or you'll get `Can't find entry file index.js` errors.\nIf you have any issues, you can clear your watches using `watchman watch-del-all` and try again.\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","maintainers":[{"name":"xcarpentier","email":"contact@xaviercarpentier.com"}],"time":{"modified":"2022-06-12T14:45:12.965Z","created":"2017-10-20T08:39:35.104Z","0.3.0":"2017-10-20T08:39:35.104Z"},"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","readmeFilename":"README.md"}