💬 Gifted Chat

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

demo

^{Sponsored by Pusher Chatkit:}

this.onSend(messages)} user={{ _id: 1, }} /> ) } } ``` ## Advanced example See [`example/App.js`](example/App.js) for a working demo! ## "Slack" example See the files in [`example-slack-message`](example-slack-message) for an example of how to override the default UI to make something that looks more like Slack -- with usernames displayed and all messages on the left. ## Message object e.g. Chat Message ```js { _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 } ``` e.g. System Message ```js { _id: 1, text: 'This is a system message', createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)), system: true, // 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](#notes-for-redux)) * **`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](https://github.com/kelektiv/node-uuid) * **`user`** _(Object)_ - User sending the messages: `{ _id, name, avatar }` * **`onSend`** _(Function)_ - Callback when sending a message * **`alwaysShowSend`** _(Bool)_ - Always show send button in input text composer; default `false`, show only when text input is not empty * **`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()`](https://github.com/ZY-Market/react-native-gifted-chat/blob/master@%7B2017-09-25%7D/src/Bubble.js#L96-L119)) * **`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 [``](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage` * **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-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](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](https://github.com/ZY-Market/react-native-gifted-chat/pull/487)) * **`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 [``](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details * **`textInputProps`** _(Object)_ - Extra props to be passed to the [``](https://facebook.github.io/react-native/docs/textinput.html) * **`keyboardShouldPersistTaps`** _(Enum)_ - Determines whether the keyboard should stay visible after a tap; see [``](https://facebook.github.io/react-native/docs/scrollview.html) 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](https://github.com/taskrabbit/react-native-parsed-text) used to linkify message content (like URLs and phone numbers), e.g.: ```js [ { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber }, { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag }, ]} /> ``` ## Imperative methods * `focusTextInput()` - Open the keyboard and focus the text input box ## Notes for [Redux](https://github.com/reactjs/redux) The `messages` prop should work out-of-the-box with Redux. In most cases this is all you need. If you decide to specify a `text` prop, GiftedChat will no longer manage its own internal `text` state and will defer entirely to your prop. This is great for using a tool like Redux, but there's one extra step you'll need to take: simply implement `onInputTextChanged` to receive typing events and reset events (e.g. to clear the text `onSend`): ```js this.setCustomText(text)} /* ... */ /> ``` ## Notes for Android If you are using Create React Native App / Expo, no Android specific installation steps are required -- you can skip this section. Otherwise we recommend modifying your project configuration as follows. * Make sure you have `android:windowSoftInputMode="adjustResize"` in your `AndroidManifest.xml`: ```xml ``` * For **Expo**, there are almost 2 solutions to fix it: * adding KeyboardAvoidingView after GiftedChat * adding an opaque background status bar on app.json https://docs.expo.io/versions/latest/guides/configuration.html#androidstatusbar * If you plan to use `GiftedChat` inside a `Modal`, see [#200](https://github.com/ZY-Market/react-native-gifted-chat/issues/200). ## Notes for local development You can use [`wml`](https://github.com/wix/wml) to keep the example app in sync with any changes you make to the library during development. Steps: 1. Install it: `npm install -g wml` 2. Configure it: `wml add . example/node_modules/react-native-gifted-chat` from the root directory 3. `cd example` 4. `npm start` 5. `wml start` in another terminal window (doesn't matter where) Note that it's important for `wml start` to come **after** `npm start`, or you'll get `Can't find entry file index.js` errors. If you have any issues, you can clear your watches using `watchman watch-del-all` and try again. ## Questions * [How can I set Bubble color for each user?](https://github.com/ZY-Market/react-native-gifted-chat/issues/672) * [How can I pass style props to InputToolbar design and customize it's color and other styles properties?](https://github.com/ZY-Market/react-native-gifted-chat/issues/662) * [How can I change the color of the message box?](https://github.com/ZY-Market/react-native-gifted-chat/issues/640) * [Is there a way to manually dismiss the keyboard?](https://github.com/ZY-Market/react-native-gifted-chat/issues/647) * [I want to implement a popover that pops right after clicking on a specific avatar, what is the best implementation in this case and how?](https://github.com/ZY-Market/react-native-gifted-chat/issues/660) * [Why Textinput is hidden on Android?](https://github.com/ZY-Market/react-native-gifted-chat/issues/680#issuecomment-359699364) * [How to use renderLoading?](https://github.com/ZY-Market/react-native-gifted-chat/issues/298) * [Can I use MySql to save the message?](https://github.com/ZY-Market/react-native-gifted-chat/issues/738) ## License * [MIT](LICENSE) ## Author Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi)! ## Contributors * Kevin Cooper [cooperka](https://github.com/cooperka) * Kfir Golan [kfiroo](https://github.com/kfiroo) * Bruno Cascio [brunocascio](https://github.com/brunocascio) * Xavier Carpentier [xcarpentier](https://github.com/xcarpentier) * [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)