sme-react-native-gifted-chat

The most complete chat UI for React Native

Usage no npm install needed!

<script type="module">
  import smeReactNativeGiftedChat from 'https://cdn.skypack.dev/sme-react-native-gifted-chat';
</script>

README

   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



Scalable chat API/Server written in Go

API Tour | React Native Gifted tutorial

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
  • Quick Reply messages (bot)

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
}

e.g. Chat Message with Quick Reply options

See PR #1211

interface Reply {
  title: string
  value: string
  messageId?: any
}

interface QuickReplies {
  type: 'radio' | 'checkbox'
  values: Reply[]
  keepIt?: boolean
}
  {
    _id: 1,
    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
    createdAt: new Date(),
    quickReplies: {
      type: 'radio', // or 'checkbox',
      keepIt: true,
      values: [
        {
          title: '😋 Yes',
          value: 'yes',
        },
        {
          title: '📷 Yes, let me show you with a picture!',
          value: 'yes_picture',
        },
        {
          title: '😞 Nope. What?',
          value: 'no',
        },
      ],
    },
    user: {
      _id: 2,
      name: 'React Native',
    },
  },
  {
    _id: 2,
    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
    createdAt: new Date(),
    quickReplies: {
      type: 'checkbox', // or 'radio',
      values: [
        {
          title: 'Yes',
          value: 'yes',
        },
        {
          title: 'Yes, let me show you with a picture!',
          value: 'yes_picture',
        },
        {
          title: 'Nope. What?',
          value: 'no',
        },
      ],
    },
    user: {
      _id: 2,
      name: 'React Native',
    },
  }

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)
  • onQuickReply (Function) - Callback when sending a quick reply (to backend server)
  • renderQuickReply (Function) - Custom quick reply view

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

  1. Install yarn add -g expo-cli
  2. expo start

Questions

License

Author

Feel free to ask me questions on Twitter @FaridSafi!

Contributors