Skip to content
Permalink
Browse files

Implement renderChatEmpty prop to allow showing custom view as ListEm…

…ptyView when message are empty.
  • Loading branch information
javascripter authored and xcarpentier committed Nov 20, 2019
1 parent 13832e5 commit 5f844e39ff1d24712a20870236878b9b468cb96d
Showing with 18 additions and 7 deletions.
  1. +1 −0 README.md
  2. +4 −0 src/GiftedChat.tsx
  3. +13 −7 src/MessageContainer.tsx
@@ -309,6 +309,7 @@ interface QuickReplies {
- **`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](example/App.js) for an example
- **`renderChatEmpty`** _(Function)_ - Custom component to render in the ListView when messages are empty
- **`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
@@ -153,6 +153,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
renderTime?(props: Time['props']): React.ReactNode
/* Custom footer component on the ListView, e.g. 'User is typing...' */
renderFooter?(): React.ReactNode
/* Custom component to render in the ListView when messages are empty */
renderChatEmpty?(): React.ReactNode
/* Custom component to render below the MessageContainer (separate from the ListView) */
renderChatFooter?(): React.ReactNode
/* Custom message composer container */
@@ -237,6 +239,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
renderDay: null,
renderTime: null,
renderFooter: null,
renderChatEmpty: null,
renderChatFooter: null,
renderInputToolbar: null,
renderComposer: null,
@@ -298,6 +301,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
renderDay: PropTypes.func,
renderTime: PropTypes.func,
renderFooter: PropTypes.func,
renderChatEmpty: PropTypes.func,
renderChatFooter: PropTypes.func,
renderInputToolbar: PropTypes.func,
renderComposer: PropTypes.func,
@@ -31,7 +31,8 @@ const styles = StyleSheet.create({
alignItems: 'flex-start',
},
contentContainerStyle: {
justifyContent: 'flex-end',
flexGrow: 1,
justifyContent: 'flex-start',
},
headerWrapper: {
flex: 1,
@@ -71,6 +72,7 @@ export interface MessageContainerProps<TMessage extends IMessage> {
extraData?: any
scrollToBottomOffset?: number
forwardRef?: RefObject<FlatList<IMessage>>
renderChatEmpty?(): React.ReactNode
renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
renderMessage?(props: Message['props']): React.ReactNode
renderLoadEarlier?(props: LoadEarlier['props']): React.ReactNode
@@ -89,6 +91,7 @@ export default class MessageContainer<
static defaultProps = {
messages: [],
user: {},
renderChatEmpty: null,
renderFooter: null,
renderMessage: null,
onLoadEarlier: () => {},
@@ -107,6 +110,7 @@ export default class MessageContainer<
static propTypes = {
messages: PropTypes.arrayOf(PropTypes.object),
user: PropTypes.object,
renderChatEmpty: PropTypes.func,
renderFooter: PropTypes.func,
renderMessage: PropTypes.func,
renderLoadEarlier: PropTypes.func,
@@ -294,6 +298,13 @@ export default class MessageContainer<
return null
}

renderChatEmpty = () => {
if (this.props.renderChatEmpty) {
return this.props.renderChatEmpty()
}
return <View style={styles.container} />
}

renderHeaderWrapper = () => (
<View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>
)
@@ -338,12 +349,6 @@ export default class MessageContainer<
keyExtractor = (item: TMessage) => `${item._id}`

render() {
if (
!this.props.messages ||
(this.props.messages && this.props.messages.length === 0)
) {
return <View style={styles.container} />
}
const { inverted } = this.props
return (
<View
@@ -366,6 +371,7 @@ export default class MessageContainer<
contentContainerStyle={styles.contentContainerStyle}
renderItem={this.renderRow}
{...this.props.invertibleScrollViewProps}
ListEmptyComponent={this.renderChatEmpty}
ListFooterComponent={
inverted ? this.renderHeaderWrapper : this.renderFooter
}

0 comments on commit 5f844e3

Please sign in to comment.
You can’t perform that action at this time.