FaridSafi/react-native-gifted-chat


💬 The most complete chat UI for React Native

https://gifted.chat

License: MIT

Language: TypeScript

Keywords: chat, component, react-native


   react-native-gifted-chat

💬 Gifted Chat

The most complete chat UI for React Native

npm downloads npm version build

 build  deployed


demo

Sponsor



Coding Bootcamp in Paris co-founded by Farid Safi

Click to learn more

Features

  • Write with TypeScript (since 0.8.0)
  • 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
  • Multi-line TextInput
  • InputToolbar avoiding keyboard
  • Redux support
  • System message

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

You have a question ?

  1. Please check this readme and may find a response
  2. Please ask on StackOverflow first: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
  3. Find response on existing issues
  4. Try to keep issues for issues

Example

import React from 'react'
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://placeimg.com/140/140/any',
          },
        },
      ],
    })
  }

  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!

"Slack" example

See the files in 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

{
  _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',
  // You can also add a video prop:
  video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
  // Any additional custom parameters are passed through
}

e.g. System Message

{
  _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)
  • 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
  • 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())
  • inverted (Bool) - Reverses display order of messages; default is true
  • renderUsernameOnMessage (Bool) - Indicate whether to show the user's username inside the message bubble; default is false
  • 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
  • videoProps (Object) - Extra props to be passed to the <Video> component created by the default renderMessageVideo
  • 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 footer component on the ListView, e.g. 'User is typing...'; see 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)
  • 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
  • textInputProps (Object) - Extra props to be passed to the <TextInput>
  • 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
  • parsePatterns (Function) - Custom parse patterns for react-native-parsed-text used to linkify message content (like URLs and phone numbers), e.g.:
 <GiftedChat
   parsePatterns={(linkStyle) => [
     { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
     { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
   ]}
 />
  • extraData (Object) - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
  • minComposerHeight (Object) - Custom min height of the composer.
  • maxComposerHeight (Object) - Custom max height of the composer.
  • scrollToBottom (Bool) - Enables the scrollToBottom Component (Default is false)
  • scrollToBottomComponent (Function) - Custom Scroll To Bottom Component container
  • scrollToBottomOffset (Integer) - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
  • alignTop (Boolean) Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)

Imperative methods

  • focusTextInput() - Open the keyboard and focus the text input box

Notes for 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):

<GiftedChat
  text={customText}
  onInputTextChanged={text => 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:

    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:windowSoftInputMode="adjustResize"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
  • For Expo, there are almost 2 solutions to fix it:

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

Notes for local development

You can use 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

License

Author

Feel free to ask me questions on Twitter @FaridSafi!

Contributors

Project Statistics

Sourcerank 14
Repository Size 44.1 MB
Stars 8,198
Forks 2,424
Watchers 197
Open issues 57
Dependencies 3,854
Contributors 123
Tags 48
Created
Last updated
Last pushed

Top Contributors See all

Farid Safi Xavier Carpentier Kfir Golan Kevin Cooper Kevin Cooper greenkeeper[bot] Bruno tafelito Jérôme GROSSÉ Brennen Peters David Leonardi George Lipov Aaron Lee Santiago Carmuega Albert Nazander Nandini Parimi Ian Yu-Hsun Lin Shaun Stanworth mluffy Moe

Packages Referencing this Repo

sme-react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.9.0 - Published - 8.2K stars
react-native-gifted-chat-fall
The most complete chat UI for React Native
Latest release 0.7.3 - Published - 8.2K stars
@jemmyphan/react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.6.1 - Published - 8.2K stars
react-native-updated-gift-chat
The most complete chat UI for React Native
Latest release 0.5.9 - Updated - 8.2K stars
iamsee-react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.4.3 - Published - 8.2K stars
@alexal1/react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.4.3 - Updated - 8.2K stars
chadmg-react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.4.11 - Updated - 8.2K stars
@jamesism/react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.4.3 - Published - 8.2K stars
react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.9.7 - Updated - 8.2K stars
react-native-gifted-messenger
Chat UI for iOS and Android React-Native apps
Latest release 0.1.4 - Updated - 8.2K stars
react-native-gifted-chat-new
The most complete chat UI for React Native
Latest release 0.0.6 - Updated - 8.2K stars
react-native-gifted-chat-skools
The most complete chat UI for React Native
Latest release 0.4.3 - Published - 8.2K stars
react-native-gifted-chat-assac
The most complete chat UI for React Native
Latest release 0.4.6 - Updated - 8.2K stars
react-native-gifted-chat-1mg
The most complete chat UI for React Native
Latest release 0.0.12 - Updated - 8.2K stars
@sherwinw/react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.0.4 - Updated - 8.2K stars
@hammadj/react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.9.7 - Published - 8.2K stars
darkas-react-native-gifted-chat
The most complete chat UI for React Native
Latest release 0.9.6 - Updated - 8.2K stars
rn-falcon-gifted-chat
The most complete chat UI for React Native
Latest release 0.9.3 - Updated - 8.2K stars
react-native-gifted-messenger-edi
The chat of your next React-Native Apps
Latest release 0.0.26 - Updated - 8.2K stars
react-native-gifted-chat-fix
修复了react-native-video冲突
Latest release 0.7.3 - Published - 8.2K stars

Recent Tags See all

v0.9.11 June 28, 2019
v0.9.10 June 28, 2019
v0.9.9 June 28, 2019
v0.9.8 June 27, 2019
v0.9.7 June 26, 2019
v0.9.6 June 13, 2019
v0.9.5 June 13, 2019
v0.9.4 June 09, 2019
v0.9.2 May 28, 2019
v0.9.1 May 27, 2019
v0.9.0 May 21, 2019
v0.8.2 May 13, 2019
v0.8.1 May 13, 2019
v0.8.0 April 30, 2019
v0.7.3 April 03, 2019

Interesting Forks See all

johniak/react-web-gifted-chat
💬 The most complete chat UI for React
JavaScript - MIT - Last pushed - 58 stars - 27 forks
oney/react-native-gifted-messenger
Ready-to-use chat interface for iOS and Android React-Native apps
Java - Last pushed - 12 stars - 6 forks
expo/react-native-gifted-chat
💬 The most complete chat UI for React Native
JavaScript - MIT - Last pushed - 5 stars - 1 forks
rt2zz/react-native-base-messenger
Ready-to-use chat interface for iOS and Android React-Native apps
JavaScript - Last pushed - 4 stars - 1 forks
ideo/react-native-gifted-chat
💬 The most complete chat UI for React Native
JavaScript - Last pushed - 4 stars - 1 forks

Something wrong with this page? Make a suggestion

Last synced: 2019-04-30 08:43:05 UTC

Login to resync this repository