Skip to content

skillz/react-native-gifted-chat

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gifted Chat

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

Dependency

Use 0.0.10 for RN < 0.40.0
Use 0.1.0 for RN >= 0.40.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
  • messageIdGenerator (Function) - generate id for new message. By default is a UUID v4 generated by uuid.
  • 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
  • renderAvatarOnTop (Bool) - render the message avatar, on top of consecutive messages. The default value is false.
  • renderBubble (Function) - render the message bubble
  • renderMessage (Function) - render the message container
  • renderMessageText (Function) - render the message text
  • renderMessageImage (Function) - render the 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) - 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
  • onPressActionButton (Function) - callback to perform custom logic when the Action button is pressed (the default actionSheet will not be used)
  • bottomOffset (Integer) - distance of the chat from the bottom of the screen, useful if you display a tab bar
  • listViewProps (Object) - extra props to be passed to the <ListView>, some props can not be override, see the code in render method of MessageContainer for detail
  • keyboardShouldPersistTaps (Enum) - determines when the keyboard should stay visible after a tap <ScrollView>
  • onInputTextChanged (Function) - function that will be called when input text changes

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 !

About

💬 The most complete chat UI for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 90.2%
  • Objective-C 5.9%
  • Python 2.2%
  • Java 1.7%