React Gifted Chat

• Github

React implementation forked and edited from react-native-gifted-chat

Installation

• Using npm: npm install react-gifted-chat --save
• Using Yarn: yarn add react-gifted-chat

Example

import { GiftedChat } from 'react-gifted-chat';
 
class Example extends React.Component {
 
  state = {
    messages: [],
  };
 
  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],
    });
  }
 
  onSend(messages = []) {
    this.setState((previousState) => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));
  }
 
  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={(messages) => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    );
  }
 
}

Message object

e.g.

{
  _id: 1,
  text: 'My message',
  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
  user: {
    _id: 2,
    name: 'React Native',
    avatar: 'https://facebook.github.io/react/img/logo_og.png',
  },
  image: 'https://facebook.github.io/react/img/logo_og.png',
  // Any additional custom parameters are passed through
}

Props

• messages (Array) - Messages to display
• messageIdGenerator (Function) - Generate an id for new messages. Defaults to UUID v4, generated by uuid
• user (Object) - User sending the messages: { _id, name, avatar }
• onSend (Function) - Callback when sending a message
• locale (String) - Locale to localize the dates
• isAnimated (Bool) - Animates the view when the keyboard appears
• loadEarlier (Bool) - Enables the "Load earlier messages" button
• onLoadEarlier (Function) - Callback when loading earlier messages
• isLoadingEarlier (Bool) - Display an ActivityIndicator when loading earlier messages
• renderLoading (Function) - Render a loading view when initializing
• renderLoadEarlier (Function) - Custom "Load earlier messages" button
• renderAvatar (Function) - Custom message avatar; set to null to not render any avatar for the message
• renderAllAvatars (Bool) - Allways render the avatar of a message. Default is false. Only the first message from of a series by the same user has an avatar.
• backgroundImage (String) - No background image by default. Display image as background from URL
• onPressAvatar (Function(user)) - Callback when a message avatar is tapped
• renderAvatarOnTop (Bool) - Render the message avatar at the top of consecutive messages, rather than the bottom (default)
• renderBubble (Function) - Custom message bubble
• onLongPress (Function(context, message)) - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions())
• renderMessage (Function) - Custom message container
• renderMessageText (Function) - Custom message text
• renderMessageImage (Function) - Custom message image
• imageProps (Object) - Extra props to be passed to the <Image> component created by the default renderMessageImage
• lightboxProps (Object) - Extra props to be passed to the MessageImage's Lightbox
• renderCustomView (Function) - Custom view inside the bubble
• renderDay (Function) - Custom day above a message
• renderTime (Function) - Custom time inside a message
• renderFooter (Function) - Custom fixed bottom view, e.g. "User is typing..."; see example/App.js for an example
• renderInputToolbar (Function) - Custom message composer container
• renderComposer (Function) - Custom text input message composer
• renderActions (Function) - Custom action button on the left of the message composer
• renderSend (Function) - Custom send button
• renderAccessory (Function) - Custom second line of actions below the message composer
• onPressActionButton (Function) - Callback when the Action button is pressed (if set, the default actionSheet will not be used)
• bottomOffset (Integer) - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
• minInputToolbarHeight (Integer) - Minimum height of the input toolbar; default is 44
• listViewProps (Object) - Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details
• keyboardShouldPersistTaps (Enum) - Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs
• onInputTextChanged (Function) - Callback when the input text changes
• maxInputLength (Integer) - Max message composer TextInput length

License

• MIT