papua-react-native-gifted-chat
v0.0.4
Published
The most complete chat UI for React Native
Downloads
20
Maintainers
Readme
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
<!-- ... -->
<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
Example
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,
}}
/>
);
}
}
Advanced example
See example/App.js
Message object
{
_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
}
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 imageimageProps
(Object) - extra props to be passed to the<Image>
component created by the defaultrenderMessageImage
lightboxProps
(Object) - extra props to be passed to the MessageImage's LightboxrenderCustomView
(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 composeronPressActionButton
(Function) - callback to perform custom logic when the Action button is pressed (the defaultactionSheet
will not be used)bottomOffset
(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 !