Gifted Messenger
Ready-to-use chat interface for iOS and Android React-Native apps
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
var GiftedMessenger = ;var Dimensions = React; var GiftedMessengerExample = React;
Advanced example
See 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
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: // ...any attributes you want;
License
Feel free to ask me questions on Twitter @FaridSafi !