The most complete chat UI for React Native (formerly known as Gifted Messenger)
React Native minimum version 0.29.0
npm install react-native-gifted-chat --save
- Add
android:windowSoftInputMode="adjustResize"
to your Android Manifestandroid/app/src/main/AndroidManifest.xml
<!-- ... -->
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:windowSoftInputMode="adjustResize"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<!-- ... -->
- If you plan to use
GiftedChat
inside aModal
, see #200
import { GiftedChat } from 'react-native-gifted-chat';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {messages: []};
this.onSend = this.onSend.bind(this);
}
componentWillMount() {
this.setState({
messages: [
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
],
});
}
onSend(messages = []) {
this.setState((previousState) => {
return {
messages: GiftedChat.append(previousState.messages, messages),
};
});
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={this.onSend}
user={{
_id: 1,
}}
/>
);
}
}
See example/App.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',
// additional custom parameters
}
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
You can also customize the base components with the following props:
containerStyle
lets you pass a style to all containers (kinda dangerous?)wrapperStyle
lets you pass a style to all wrappers (kinda dangerous?)imageStyle
lets you customize the style ofImage
simageProps
will override the already defined props on the image (for example if you pass a style inimageProps
, it will override the predefined style and theimageStyle
prop you could have passed)textStyle
will apply a style to all TextssendTextStyle
will customize the style of the text of the Send buttonsendLabel
will customize the text of the Send buttonloadEarlierTextStyle
will customize the style of the text of the Load earlier messages buttonloadEarlierLabel
will customize the text of the Load earlier messages buttonactivityIndicatorStyle
will the style of the loaderskeyboardDismissMode
allows you to change the keyboardDismissMode (default value isinteractive
)
- 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
Feel free to ask me questions on Twitter @FaridSafi !