Gifted Chat
The most complete chat UI for React Native (formerly known as Gifted Messenger)
Dependency
React Native minimum version 0.29.0
Installation
npm install react-native-gifted-chat --save
Android installation
- Add
android:windowSoftInputMode="adjustResize"
to your Android Manifestandroid/app/src/main/AndroidManifest.xml
<!-- ... --><!-- ... -->
- If you plan to use
GiftedChat
inside aModal
, see #200
Example
import GiftedChat from 'react-native-gifted-chat'; Component { ; thisstate = messages: ; thisonSend = thisonSend; } { this; } { this; } { return <GiftedChat = = = /> ; }
Advanced example
See example/App.js
Message object
_id: 1 text: 'My message' createdAt: Date 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 displayuser
(Object) - user sending the messages{_id, name, avatar}
onSend
(Function) - function to call when sending a messagelocale
(String) - localize the datesisAnimated
(Bool) - animates the view when the keyboard appearsloadEarlier
(Bool) - enables the load earlier message buttononLoadEarlier
(Function) - function to call when loading earlier messagesisLoadingEarlier
(Bool) - display an ActivityIndicator when loading earlier messagesrenderLoading
(Function) - render a loading view when initializingrenderLoadEarlier
(Function) - render the load earlier buttonrenderAvatar
(Function) - renders the message avatarrenderBubble
(Function) - render the message bubblerenderMessage
(Function) - render the message containerrenderMessageText
(Function) - render the message textrenderMessageImage
(Function) - render the message imagerenderCustomView
(Function) - render a custom view inside the bubblerenderDay
(Function) - render the day above a messagerenderTime
(Function) - render the message timerenderFooter
(Function) - renders a fixed bottom view. Can be used for 'is typing message', see example/App.jsrenderInputToolbar
(Function) - render the composer containerrenderActions
(Function) - renders an action button on the left of the message composerrenderComposer
(Function) - render the text input message composerrenderSend
(Function) - render the send buttonrenderAccessory
(Function) - renders a second line of actions below the message composerbottomOffset
(Integer) - distance of the chat from the bottom of the screen, useful if you display a tab bar
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 !