Ready-to-use chat interface for iOS and Android React-Native apps
- Breaking:
appendMessage
,prependMessage
are now deprecated, messages list are now managed only using states - See example - Breaking: All messages should now contain a
uniqueId
property - Breaking:
setMessageStatus
is now deprecated, use the message attributestatus
instead - Breaking: New prop
isLoadingEarlierMessages
to display a loader when loading earlier messages - New prop
typingMessage
for displaying 'User is typing a message...' - New prop
leftControlBar
- PR @gnl - Android improvements
react-native-parsed-text
has been re-implemented- ESLint implementation - PR @sethx
- ES6 & Example refactoring
- Fixing scroll when loading earlier messages
- Various fixes and improvements by @swapkats, @ianlin, @zxcpoiu, @cnjon
- Special thanks to @yogiben, @koppelaar & @sethx for their contributions
- New prop:
dateLocale
- @gnl - New prop:
renderCustomDate
- @pcxiong center
position for messages (eg. for server messages) - @gnl- Method
setTextInputValue
- @wenkesj - Replace
lodash
withdeep-equal
- @austinkelleher
- Fix initial
scrollToBottom
issue - Allow custom view for images - @aksonov
See GiftedMessengerExample/GiftedMessengerContainer.js
npm install react-native-gifted-messenger --save
Props name | Type | Description | Platform | Default |
---|---|---|---|---|
autoFocus | Boolean | TextInput auto focus | Both | true |
blurOnSubmit | Boolean | Dismiss the keyboard when clicking on submit | Both | false |
dateLocale | String | The moment.js locale used for displaying timestamps (see Locale.js) | Both | '' |
displayNames | Boolean | Display or not the name of the interlocutor(s) | Both | true |
displayNamesInsideBubble | Boolean | Display the name of the interlocutor(s) inside the bubble | Both | false |
forceRenderImage | Boolean | Always render the users images (avatar) | Both | false |
handleEmailPress | Function | Called when a parsed email is pressed | iOS | (email) => {} |
handlePhonePress | Function | Called when a parsed phone number is pressed | iOS | (phone) => {} |
handleSend | Function | Called when a message is Sent | Both | (message, rowID) => {} |
handleUrlPress | Function | Called when a parsed url is pressed | iOS | (url) => {} |
hideTextInput | Boolean | Hide or not the text input | Both | false |
isLoadingEarlierMessages | Boolean | Display a loader when loading earlier messages | Both | false |
keyboardDismissMode | String | Method to dismiss the keyboard when dragging (none, interactive, on-drag) | Both | interactive |
keyboardShouldPersistTaps | Boolean | When false, tapping the scrollview dismisses the keyboard. | Both | true |
leftControlBar | Element | Optional control element displayed left of the TextInput | Both | null |
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' |
maxHeight | Integer | Max height of the component | Both | Dimensions.get('window').height |
messages | Array | List of messages to display | Both | [] |
onChangeText | Function | Called on every keypress in the TextInput | Both | (text) => {} |
onCustomSend | Function | If you want to implement a progress bar. See PR #16 | Both | (message) => {} |
onErrorButtonPress | Function | Called when the re-send button is pressed | Both | (message, rowID) => {} |
onImagePress | Function | Called when the image of a message is pressed | Both | (rowData, rowID) => {} |
onLoadEarlierMessages | Function | Called when 'Load Earlier Message' button is pressed | Both | (oldestMessage, callback) => {} |
onMessageLongPress | Function | Called when doing long press on a message | Both | (rowData) => {} |
parseText | Boolean | If the text has to be parsed with taskrabbit/react-native-parsed-text | iOS | true |
placeholder | String | TextInput placeholder | Both | 'Type a message...' |
placeholderTextColor | String | TextInput text color placeholder | Both | '#ccc' |
renderCustomText | Function | Implement your own text rendering | Both | (rowData) => {} |
renderTextInput | Function | Implement your own text input rendering | Both | (props) => {} |
renderCustomDate | Function | Implement your own date rendering | Both | (rowData, previousData) => {} |
scrollAnimated | Boolean | do animation when scrolling | Both | true |
sendButtonText | String | 'Send' button label | Both | 'Send' |
senderImage | Object | Image of the sender | Both | null |
senderName | String | Name of the sender of the messages | Both | 'Sender' |
styles | Function | Styles of children components - See GiftedMessenger.js/componentWillMount | Both | {} |
submitOnReturn | Boolean | Send message when clicking on submit | Both | false |
typingMessage | String | Display a text at the bottom of the list. Eg: 'User is typing a message' | Both | '' |
var message = {
uniqueId: 'XXXXX' // each messages should have an unique identifer - mandatory
text: 'Message content',
name: "Sender's name",
image: {uri: 'https://facebook.github.io/react/img/logo_og.png'},
position: 'left', // left for received messages, right for sent messages, center for server messages
date: new Date(),
view: null, // A custom Bubble view - the view will receive the message attributes as props
imageView: null, // Returns custom Image view to display image (avatar) for the message
status: 'Seen', // if status is 'ErrorButton', a re-send button will be displayed
// ...any attributes you want
};
- Add
windowSoftInputMode
in your Android Manifestandroid/app/src/main/AndroidManifest.xml
<!-- ... -->
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<!-- ... -->
- Calculate the maxHeight prop using react-native-extra-dimensions-android
<GiftedMessenger
// ...
maxHeight={Dimensions.get('window').height - Navigator.NavigationBar.Styles.General.NavBarHeight - ExtraDimensions.get('STATUS_BAR_HEIGHT')}
// ...
/>
- Android: When updating a message status, scroll to bottom is not triggered - Related to facebook/react-native#5688
Feel free to ask me questions on Twitter @FaridSafi !