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

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 Manifest android/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

MIT

Feel free to ask me questions on Twitter @FaridSafi !