💬 Gifted Chat

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

This is a fork from [Github] (https://github.com/FaridSafi/react-native-gifted-chat)

DEMO

https://github.com/maherzaidoune/GiftedChat_Video

Features

• 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
• Multiline 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 i react-native-gifted-chat-video-support --save

Example

1import { GiftedChat } from 'react-native-gifted-chat'
2
3class Example extends React.Component {
4  state = {
5    messages: [],
6  }
7
8  componentWillMount() {
9    this.setState({
10      messages: [
11        {
12          _id: 1,
13          text: 'Hello developer',
14          createdAt: new Date(),
15          user: {
16            _id: 2,
17            name: 'React Native',
18            avatar: 'https://placeimg.com/140/140/any',
19          },
20        },
21      ],
22    })
23  }
24
25  onSend(messages = []) {
26    this.setState(previousState => ({
27      messages: GiftedChat.append(previousState.messages, messages),
28    }))
29  }
30
31  render() {
32    return (
33      <GiftedChat
34        messages={this.state.messages}
35        onSend={messages => this.onSend(messages)}
36        user={{
37          _id: 1,
38        }}
39      />
40    )
41  }
42}

##Video chat msg

e.g. Chat Message

1
2{
3  _id: 1,
4  text: 'My video message',
5  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
6  user: {
7    _id: 2,
8    name: 'React Native',
9    avatar: 'https://facebook.github.io/react/img/logo_og.png',
10  },
11  video: url,
12  // Any additional custom parameters are passed through
13}

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

1{
2  _id: 1,
3  text: 'My message',
4  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
5  user: {
6    _id: 2,
7    name: 'React Native',
8    avatar: 'https://facebook.github.io/react/img/logo_og.png',
9  },
10  image: 'https://facebook.github.io/react/img/logo_og.png',
11  // Any additional custom parameters are passed through
12}

e.g. System Message

1{
2  _id: 1,
3  text: 'This is a system message',
4  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
5  system: true,
6  // Any additional custom parameters are passed through
7}

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

• renderMessage (Function) - Custom message container

• renderMessageText (Function) - Custom message text

• renderMessageImage (Function) - Custom message image

• videoProps (Object) - Extra props to be passed to the <Image> component created by the default renderMessageVideo

• 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) - 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.:

  1<GiftedChat
  2  parsePatterns={(linkStyle) => [
  3    { type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
  4    { pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
  5  ]}
  6/>

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

1<GiftedChat
2  text={customText}
3  onInputTextChanged={text => this.setCustomText(text)}
4  /* ... */
5/>

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:

  1<activity
  2  android:name=".MainActivity"
  3  android:label="@string/app_name"
  4  android:windowSoftInputMode="adjustResize"
  5  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

• 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

Questions

• How can I set Bubble color for each user?
• How can I pass style props to InputToolbar design and customize it's color and other styles properties?
• How can I change the color of the message box?
• Is there a way to manually dismiss the keyboard?
• 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?
• Why Textinput is hidden on Android?
• How to use renderLoading?
• Can I use MySql to save the message?

License

• MIT