0.1.4 • Published 9 years ago
react-native-gifted-messenger v0.1.4
Gifted Messenger
Ready-to-use chat interface for iOS and Android React-Native apps
Changelog
0.1.0 - Breaking changes for a better Gifted Messenger
- 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
0.1.2
- 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
0.1.3
- Fix initial
scrollToBottom
issue - Allow custom view for images - @aksonov
Example
See GiftedMessengerExample/GiftedMessengerContainer.js
Installation
npm install react-native-gifted-messenger --save
Props
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) => {} |
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 | '' |
Message object
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
};
Android installation
- 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')}
// ...
/>
Known issues
- Android: When updating a message status, scroll to bottom is not triggered - Related to https://github.com/facebook/react-native/issues/5688
License
Feel free to ask me questions on Twitter @FaridSafi !
0.1.4
9 years ago
0.1.3
9 years ago
0.1.2
9 years ago
0.1.1
9 years ago
0.1.0
9 years ago
0.0.24
9 years ago
0.0.23
9 years ago
0.0.22
9 years ago
0.0.21
9 years ago
0.0.20
9 years ago
0.0.19
9 years ago
0.0.18
9 years ago
0.0.17
9 years ago
0.0.16
9 years ago
0.0.15
9 years ago
0.0.14
9 years ago
0.0.13
9 years ago
0.0.12
9 years ago
0.0.11
9 years ago
0.0.10
9 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago