Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit e1bf332 Nov 8, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example improve proptypes checking Aug 19, 2016
screenshots update doc Jul 30, 2016
src Update react-native-action-sheet import May 18, 2017
.eslintrc fork action sheet Aug 24, 2016
.gitignore transpiling because jest is a jester Dec 12, 2016
.npmignore screenshots Jul 30, 2016
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md Sep 8, 2016
LICENSE license Jul 17, 2016
README.md Update README.md Aug 26, 2016
package-lock.json 1.0.10 Nov 8, 2017
package.json 1.0.11 Nov 8, 2017

README.md

Gifted Chat

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

Dependency

React Native minimum version 0.29.0

Installation

npm install react-native-gifted-chat --save

Android installation

  • Add android:windowSoftInputMode="adjustResize" to your Android Manifest android/app/src/main/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

Example

import { GiftedChat } from 'react-native-gifted-chat';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {messages: []};
    this.onSend = this.onSend.bind(this);
  }
  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],
    });
  }
  onSend(messages = []) {
    this.setState((previousState) => {
      return {
        messages: GiftedChat.append(previousState.messages, messages),
      };
    });
  }
  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={this.onSend}
        user={{
          _id: 1,
        }}
      />
    );
  }
}

Advanced example

See example/App.js

Message object

{
  _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',
  // additional custom parameters
}

Props

  • messages (Array) - messages to display
  • user (Object) - user sending the messages {_id, name, avatar}
  • onSend (Function) - function to call when sending a message
  • locale (String) - localize the dates
  • isAnimated (Bool) - animates the view when the keyboard appears
  • loadEarlier (Bool) - enables the load earlier message button
  • onLoadEarlier (Function) - function to call when loading earlier messages
  • isLoadingEarlier (Bool) - display an ActivityIndicator when loading earlier messages
  • renderLoading (Function) - render a loading view when initializing
  • renderLoadEarlier (Function) - render the load earlier button
  • renderAvatar (Function) - renders the message avatar
  • renderBubble (Function) - render the message bubble
  • renderMessage (Function) - render the message container
  • renderMessageText (Function) - render the message text
  • renderMessageImage (Function) - render the message image
  • renderCustomView (Function) - render a custom view inside the bubble
  • renderDay (Function) - render the day above a message
  • renderTime (Function) - render the message time
  • renderFooter (Function) - renders a fixed bottom view. Can be used for 'is typing message', see example/App.js
  • renderInputToolbar (Function) - render the composer container
  • renderActions (Function) - renders an action button on the left of the message composer
  • renderComposer (Function) - render the text input message composer
  • renderSend (Function) - render the send button
  • renderAccessory (Function) - renders a second line of actions below the message composer
  • bottomOffset (Integer) - distance of the chat from the bottom of the screen, useful if you display a tab bar

Features

  • Custom components
  • InputToolbar avoiding keyboard
  • Multiline TextInput
  • Load earlier messages
  • Avatar as initials
  • Touchable links using react-native-parsed-text
  • Localized dates
  • Copy text messages to clipboard

License

Feel free to ask me questions on Twitter @FaridSafi !

You can’t perform that action at this time.