# react-native-gifted-messenger-updated > The chat of your next React-Native Apps Latest version **0.0.5** (published 2016-11-30) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-gifted-messenger-updated pnpm add react-native-gifted-messenger-updated yarn add react-native-gifted-messenger-updated bun add react-native-gifted-messenger-updated ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.5 | | Published | 2016-11-30 | | First published | 2016-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Farid from Safi | | Maintainers | ethan.shar | | Keywords | chat, message, messenger, react-component, react, react-native, ios, android | ## Links - npm: https://www.npmjs.com/package/react-native-gifted-messenger-updated - Repository: https://github.com/wix/react-native-gifted-messenger - Homepage: https://github.com/wix/react-native-gifted-messenger#readme - Issues: https://github.com/wix/react-native-gifted-messenger/issues - npm.io page: https://npm.io/package/react-native-gifted-messenger-updated ## Dependencies (7) - [extend](https://npm.io/package/extend.md) ^3.0.0 - [moment](https://npm.io/package/moment.md) ^2.10.6 - [deep-equal](https://npm.io/package/deep-equal.md) ^1.0.1 - [react-native-button](https://npm.io/package/react-native-button.md) ^1.5.0 - [react-native-parsed-text](https://npm.io/package/react-native-parsed-text.md) 0.0.12 - [react-native-gifted-spinner](https://npm.io/package/react-native-gifted-spinner.md) ^0.0.4 - [react-native-invertible-scroll-view](https://npm.io/package/react-native-invertible-scroll-view.md) ^0.1.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.5 (latest) — 2016-11-30 - 0.0.4 — 2016-11-29 - 0.0.3 — 2016-11-29 - 0.0.2 — 2016-11-29 - 0.0.1 — 2016-11-29 ## README # Gifted Messenger Ready-to-use chat interface for iOS and Android React-Native apps ![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-messenger/master/screenshots/messenger-1.png) ![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-messenger/master/screenshots/messenger-2.png) ### Changelog - 0.0.9 Fix iPhone 6 Plus textInput border - 0.0.8 Fix issue with RN 0.16.0 Thanks @wenkesj for PR - 0.0.7 Temporary disabling react-native-parsed-text plugin ### Example ```js var GiftedMessenger = require('react-native-gifted-messenger'); var {Dimensions} = React; var GiftedMessengerExample = React.createClass({ getMessages() { return [ {text: 'Are you building a chat app?', name: 'React-Native', image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, position: 'left', date: new Date(2015, 0, 16, 19, 0)}, {text: "Yes, and I use Gifted Messenger!", name: 'Developer', image: null, position: 'right', date: new Date(2015, 0, 17, 19, 0)}, ]; }, handleSend(message = {}, rowID = null) { // Send message.text to your server }, handleReceive() { this._GiftedMessenger.appendMessage({ text: 'Received message', name: 'Friend', image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, position: 'left', date: new Date(), }); }, render() { return ( this._GiftedMessenger = c} messages={this.getMessages()} handleSend={this.handleSend} maxHeight={Dimensions.get('window').height - 64} // 64 for the navBar styles={{ bubbleLeft: { backgroundColor: '#e6e6eb', marginRight: 70, }, bubbleRight: { backgroundColor: '#007aff', marginLeft: 70, }, }} /> ); }, }); ``` ### Advanced example See [GiftedMessengerExample/GiftedMessengerExample.js](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-messenger/master/GiftedMessengerExample/GiftedMessengerExample.js) ### Installation ```npm install react-native-gifted-messenger --save``` ### Props | Props name | Type | Description | Platform | Default | | ----------------------------- | -------- | -------------------------------------------------------------------------- | -------- | -------------------------------- | | messages | Array | List of messages to display | Both | [] | | displayNames | Boolean | Display or not the name of the interlocutor(s) | Both | true | | placeholder | String | TextInput placeholder | Both | 'Type a message...' | | styles | Function | Styles of children components - See GiftedMessenger.js/componentWillMount | Both | {} | | autoFocus | Boolean | TextInput auto focus | Both | true | | onErrorButtonPress | Function | Called when the re-send button is pressed | Both | (message, rowID) => {} | | loadEarlierMessagesButton | Boolean | Display or not the button to load earlier message | Both | false | | loadEarlierMessagesButtonText | String | Label of the 'Load Earlier Messages' button | Both | 'Load earlier messages' | | onLoadEarlierMessages | Function | Called when 'Load Earlier Message' button is pressed | Both | (oldestMessage, callback) => {} | | handleSend | Function | Called when a message is Sent | Both | (message, rowID) => {} | | maxHeight | Integer | Max height of the component | Both | Dimensions.get('window').height | | senderName | String | Name of the sender of the messages | Both | 'Sender' | | senderImage | Object | Image of the sender | Both | null | | sendButtonText | String | 'Send' button label | Both | 'Send' | | onImagePress | Function | Called when the image of a message is pressed | Both | (rowData, rowID) => {} | | parseText | Boolean | If the text has to be parsed with taskrabbit/react-native-parsed-text | iOS | true | | handleUrlPress | Function | Called when a parsed url is pressed | iOS | (url) => {} | | handlePhonePress | Function | Called when a parsed phone number is pressed | iOS | (phone) => {} | | handleEmailPress | Function | Called when a parsed email is pressed | iOS | (email) => {} | | inverted | Boolean | Invert vertically the orientation of the chat | Both | true | | hideTextInput | Boolean | Hide or not the text input | Both | false | | keyboardDismissMode | String | Method to dismiss the keyboard when dragging (none, interactive, on-drag) | Both | on-drag | | returnKeyType | Boolean | Determine if pressing 'send' will trigger handleSend | iOS | false | | submitOnReturn | Boolean | Send message when clicking on submit | Both | false | ### Props update The UI is updated when receiving new ```messages``` prop. ### API - ```appendMessages(messages = [])``` // Add messages at the end of the list view - ```appendMessage(message = {})``` // Add 1 message at the end of the list view - ```prependMessages(messages = [])``` // Add messages at the begining of the list view - ```prependMessage(message = {})``` // Add 1 message at the begining of the list view - ```setMessageStatus(status = '', rowID)``` // Set the status of a message ('ErrorButton', 'Sent', 'Seen', 'Anything you want') - ```getMessage(rowID)``` // Get message object by rowID - ```getPreviousMessage(rowID)``` // Get previous message object of a rowID - ```getNextMessage(rowID)``` // Get next message object of a rowID ### Message object ```js var message = { text: 'Message content', name: "Sender's name", image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, position: 'left', // left if received, right if sent date: new Date(), // ...any attributes you want }; ``` ### License [MIT](LICENSE) Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) ! --- _Source: https://npm.io/package/react-native-gifted-messenger-updated · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._