react-native-gifted-messenger-updated v0.0.5

Gifted Messenger

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

Changelog

• 0.0.9 Fix iPhone 6 Plus textInput border
• 0.0.8 Fix issue with RN 0.16.0 Thanks @wenkesj for PR
• 0.0.7 Temporary disabling react-native-parsed-text plugin

Example

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

var GiftedMessengerExample = React.createClass({
  getMessages() {
    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._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={(c) => this._GiftedMessenger = c}

        messages={this.getMessages()}
        handleSend={this.handleSend}
        maxHeight={Dimensions.get('window').height - 64} // 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 update

The UI is updated when receiving new messages prop.

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

Feel free to ask me questions on Twitter @FaridSafi !