/react-native-gifted-messenger

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

Primary LanguageJavaMIT LicenseMIT

Gifted Messenger

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

Example

var GiftedMessenger = require('react-native-gifted-messenger');
var {Dimensions} = React;

var GiftedMessengerExample = React.createClass({
  getInitialMessages() {
    return [
      {text: 'Are you building a chat app?', name: 'React-Native', image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, position: 'left', date: new Date(2015, 0, 16, 19, 0)},
      {text: "Yes, and I use Gifted Messenger!", name: 'Developer', image: null, position: 'right', date: new Date(2015, 0, 17, 19, 0)},
    ];
  },
  handleSend(message = {}, rowID = null) {
    // Send message.text to your server
  },
  handleReceive() {
    this.refs.GiftedMessenger.appendMessage({
      text: 'Received message', 
      name: 'Friend', 
      image: {uri: 'https://facebook.github.io/react/img/logo_og.png'}, 
      position: 'left', 
      date: new Date(),
    });
  },
  render() {
    return (
      <GiftedMessenger
        ref='GiftedMessenger'
        initialMessages={this.getInitialMessages()}
        handleSend={this.handleSend}
        maxHeight={Dimensions.get('window').height - navBarHeight} // 64 for the navBar
        
        styles={{
          bubbleLeft: {
            backgroundColor: '#e6e6eb',
            marginRight: 70,
          },
          bubbleRight: {
            backgroundColor: '#007aff',
            marginLeft: 70,
          },
        }}
      />
    );
  },
});

Advanced example

See GiftedMessengerExample/GiftedMessengerExample.js

Installation

npm install react-native-gifted-messenger --save

Props

Props name Type Description Platform Default
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) => {}
initialMessages Array List of initial messages Both []
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
  • In Android React-Native 0.14.2, I recommend to use inverted={false} until issue #3557 is fixed

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: new Date(),
  // ...any attributes you want
};

License

MIT

Follow @FaridSafi on Twitter for updates about React-Native !