futurice/react-native-gifted-messenger

Name: react-native-gifted-messenger

Owner: Futurice

Description: Ready-to-use chat interface for iOS and Android React-Native apps

Forked from: FaridSafi/react-native-gifted-chat

Created: 2016-05-06 13:31:21.0

Updated: 2018-04-24 01:19:21.0

Pushed: 2016-09-05 16:41:53.0

Homepage:

Size: 22924

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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 attribute status 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 with deep-equal - @austinkelleher

0.1.3

• Fix initial scrollToBottom issue
• Allow custom view for images - @aksonov

Example

See GiftedMessengerExample/GiftedMessengerContainer.js

Installation

Props


ops name                    | Type     | Description                                                                | Platform | Default                          |
--------------------------- | -------- | -------------------------------------------------------------------------- | -------- | -------------------------------- |
toFocus                     | Boolean  | TextInput auto focus                                                       | Both     | true                             |
urOnSubmit                  | Boolean  | Dismiss the keyboard when clicking on submit                               | Both     | false                            |
teLocale                    | String   | The moment.js locale used for displaying timestamps (see Locale.js)        | Both     | ''                               |
splayNames                  | Boolean  | Display or not the name of the interlocutor(s)                             | Both     | true                             |
splayNamesInsideBubble      | Boolean  | Display the name of the interlocutor(s) inside the bubble                  | Both     | false                            |
rceRenderImage              | Boolean  | Always render the users images (avatar)                                    | Both     | false                            |
ndleEmailPress              | Function | Called when a parsed email is pressed                                      | iOS      | (email) => {}                    |
ndlePhonePress              | Function | Called when a parsed phone number is pressed                               | iOS      | (phone) => {}                    |
ndleSend                    | Function | Called when a message is Sent                                              | Both     | (message, rowID) => {}           |
ndleUrlPress                | Function | Called when a parsed url is pressed                                        | iOS      | (url) => {}                      |
deTextInput                 | Boolean  | Hide or not the text input                                                 | Both     | false                            |
LoadingEarlierMessages      | Boolean  | Display a loader when loading earlier messages                             | Both     | false                            |
yboardDismissMode           | String   | Method to dismiss the keyboard when dragging (none, interactive, on-drag)  | Both     | interactive                      |
yboardShouldPersistTaps     | Boolean  | When false, tapping the scrollview dismisses the keyboard.                 | Both     | true                             |
ftControlBar                | Element  | Optional control element displayed left of the TextInput                   | Both     | null                             |
adEarlierMessagesButton     | Boolean  | Display or not the button to load earlier message                          | Both     | false                            |
adEarlierMessagesButtonText | String   | Label of the 'Load Earlier Messages' button                                | Both     | 'Load earlier messages'          |
xHeight                     | Integer  | Max height of the component                                                | Both     | Dimensions.get('window').height  |
ssages                      | Array    | List of messages to display                                                | Both     | []                               |
ChangeText                  | Function | Called on every keypress in the TextInput                                  | Both     | (text) => {}                     |
CustomSend                  | Function | If you want to implement a progress bar. See PR #16                        | Both     | (message) => {}                  |
ErrorButtonPress            | Function | Called when the re-send button is pressed                                  | Both     | (message, rowID) => {}           |
ImagePress                  | Function | Called when the image of a message is pressed                              | Both     | (rowData, rowID) => {}           |
LoadEarlierMessages         | Function | Called when 'Load Earlier Message' button is pressed                       | Both     | (oldestMessage, callback) => {}  |
MessageLongPress            | Function | Called when doing long press on a message                                  | Both     | (rowData) => {}                       |
rseText                     | Boolean  | If the text has to be parsed with taskrabbit/react-native-parsed-text      | iOS      | true                             |
aceholder                   | String   | TextInput placeholder                                                      | Both     | 'Type a message...'              |
aceholderTextColor          | String   | TextInput text color placeholder                                           | Both     | '#ccc'                           |
nderCustomText              | Function | Implement your own text rendering                                          | Both     | (rowData) => {}                  |
nderCustomDate              | Function | Implement your own date rendering                                          | Both     | (rowData, previousData) => {}                  |
rollAnimated                | Boolean  | do animation when scrolling                                                | Both     | true                             |
ndButtonText                | String   | 'Send' button label                                                        | Both     | 'Send'                           |
nderImage                   | Object   | Image of the sender                                                        | Both     | null                             |
nderName                    | String   | Name of the sender of the messages                                         | Both     | 'Sender'                         |
yles                        | Function | Styles of children components - See GiftedMessenger.js/componentWillMount  | Both     | {}                               |
bmitOnReturn                | Boolean  | Send message when clicking on submit                                       | Both     | false                            |
pingMessage                 | 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
d `windowSoftInputMode` in your Android Manifest `android/app/src/main/AndroidManifest.xml`

android:label=“@string/app_name” android:windowSoftInputMode=“adjustResize” android:configChanges=“keyboard|keyboardHidden|orientation|screenSize”>

lculate the maxHeight prop using [react-native-extra-dimensions-android](https://github.com/jaysoo/react-native-extra-dimensions-android)

<GiftedMessenger

// ...
maxHeight={Dimensions.get('window').height - Navigator.NavigationBar.Styles.General.NavBarHeight - ExtraDimensions.get('STATUS_BAR_HEIGHT')}
// ...

/>

Known issues
droid: When updating a message status, scroll to bottom is not triggered - Related to https://github.com/facebook/react-native/issues/5688


License

](LICENSE)


 free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) !