react-native-gifted-chat 0,5,9,0,11,6,9,0 npm

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. 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, on top of consecutive messages. The default value is false.
  • renderBubble (Function) - render the message bubble
  • onLongPress (Function(context, message)) - callback when a message bubble is long-pressed (default is to show action sheet with “Copy Text”). See code for example using context.actionSheet().showActionSheetWithOptions().
  • 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
  • minInputToolbarHeight (Integer) - minimum height of the input toolbar. The default value is 44.
  • 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
  • maxInputLength (Integer) - max Composer TextInput length

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 !

Related Repositories

react-native-gifted-messenger

react-native-gifted-messenger

Ready-to-use chat interface for iOS and Android React-Native apps ...

react-native-gifted-messenger

react-native-gifted-messenger

Ready-to-use chat interface for iOS and Android React-Native apps ...

react-native-gifted-messenger

react-native-gifted-messenger

Ready-to-use chat interface for iOS and Android React-Native apps ...


Top Contributors

FaridSafi kfiroo sethx bpeters gnl alizbazar fengliu222 shauns swapkats ianlin koppelaar burgalon kesha-antonov cooperka wenkesj slavik0329 tommoor devbriguy calebmer corymsmith oney cnjon mvayngrib Mokto aksonov tadjik1 explorigin yanghuxiao austinkelleher niftylettuce

Dependencies

package version
@expo/react-native-action-sheet cribspot/react-native-action-sheet#b422c54f26d30b9
md5 2.2.1
moment 2.18.1
prop-types 15.5.10
react-native-communications 2.2.1
react-native-invertible-scroll-view 1.0.0
react-native-lightbox oblador/react-native-lightbox#c84a8543d4511fe6a44c
react-native-parsed-text 0.0.18
shallowequal 1.0.2
uuid 3.1.0
dev eslint 3.19.0
eslint-config-airbnb 15.0.2
eslint-config-cooperka 0.2.3
eslint-plugin-import 2.6.1
eslint-plugin-jsx-a11y 5.1.1
eslint-plugin-react 7.1.0
eslint-plugin-react-native 2.3.2

Releases

-   v0.1.2 zip tar
-   v0.1.0 zip tar
-   v0.0.23 zip tar
-   v0.0.9 zip tar
-   v0.0.8 zip tar
-   v0.0.3 zip tar
-   0.0.7 zip tar