react-native-gifted-chat

Gifted Chat

The most complete chat UI for React Native (formerly known as Gifted Messenger).

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

Dependency

• Use version 0.2.x for RN >= 0.44.0
• Use version 0.1.x for RN >= 0.40.0
• Use version 0.0.10 for RN < 0.40.0

Installation

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

Example

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

}

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 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
• 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

Notes for Android

• Make sure you have android:windowSoftInputMode="adjustResize" in your AndroidManifest.xml:

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
  

• If you plan to use GiftedChat inside a Modal, see #200.

License

• MIT

Author

Feel free to ask me questions on Twitter @FaridSafi!