Gifted Chat

Web fork of most complete chat UI for React Web (formerly known as Gifted Messenger).

Demo is available here

Article

The article how to create working chat in 20 minutes is available on medium - here

Features

Fully customizable components
Composer actions (to attach photos, etc.)
Load earlier messages
Copy messages to clipboard
Touchable links using react-native-parsed-text
Avatar as user's initials
Localized dates
Multiline TextInput
InputToolbar avoiding keyboard

Installation

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

Example

import { GiftedChat } from 'react-web-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',
            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,
        }}
      />
    );
  }

}

Advanced example

See example/App.js for a working demo!

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',
    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
text (String) - Input text; default is undefined, but if specified, it will override GiftedChat's internal state (e.g. for redux; see notes below)
placeholder (String) - Placeholder when text is empty; default is 'Type a message...'
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
timeFormat (String) - Format to use for rendering times; default is 'LT'
dateFormat (String) - Format to use for rendering dates; default is 'll'
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
showUserAvatar (Bool) - Whether to render an avatar for the current user; default is false, only show avatars for other users
showAvatarForEveryMessage (Bool) - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false
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 is false
renderBubble (Function) - Custom message bubble
renderSystemMessage (Function) - Custom system message
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())
inverted (Bool) - Reverses display order of messages; default is true
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
videoProps (Object) - Extra props to be passed to the <Video> component created by the default renderMessageVideo
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 footer component on the ListView, e.g. 'User is typing...'; see example/App.js for an example
renderChatFooter (Function) - Custom component to render below the MessageContainer (separate from the ListView)
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; you can pass children to the original Send component quite easily, for example to use a custom icon (example)
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
textInputProps (Object) - Extra props to be passed to the <TextInput>
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
parsePatterns (Function) - Custom parse patterns for react-native-parsed-text used to linkify message content (like URLs and phone numbers), e.g.:
extraData (Object) - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
minComposerHeight (Object) - Custom min height of the composer.
maxComposerHeight (Object) - Custom max height of the composer.

License

Notes for local development

You need to have facebook watchman installed

cd example
yarn
yarn start
yarn run sync in another terminal window (doesn't matter where)

If you have any issues, you can clear your watches using watchman watch-del-all and try again.

Author

Feel free to ask me question on Twitter @JanRomaniak!

johniak/react-web-gifted-chat