The most complete chat UI for React Native & Web
This package is a fork of react-native-gifted-chat with the following key improvements:
- Removed unstable react-native-reanimated dependency for more reliable keyboard handling
- Replaced FlatList with FlashList for better performance
- Fixed Android keyboard issues including blank space problems
- Keyboard Handling: Removed react-native-reanimated dependency which was causing keyboard height calculation issues on Android
- Performance: Migrated from FlatList to FlashList for improved scrolling and rendering performance
- Bug Fixes: Resolved Android keyboard blank space issues
- Up to 5x faster list rendering with FlashList
- More reliable keyboard behavior on Android
- Reduced bundle size by removing reanimated dependency
- Write with TypeScript
- 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
- Multi-line TextInput
- InputToolbar avoiding keyboard
- Redux support
- System message
- Quick Reply messages (bot)
- Typing indicator
- Supports react-native-web
Yarn:
yarn add expo-gifted-chat react-native-keyboard-controller react-native-safe-area-context react-native-get-random-values
Npm:
npm install --save expo-gifted-chat react-native-keyboard-controller react-native-safe-area-context react-native-get-random-values
Expo
npx expo install expo-gifted-chat react-native-keyboard-controller react-native-safe-area-context react-native-get-random-values
npx pod-install
Follow guide: react-native-safe-area-context
- Both dependencies are removed since
0.11.0
. - You still be able to provide a
video
but you need to providerenderMessageVideo
prop.
TEST_ID
is exported as constants that can be used in your testing library of choice
Gifted Chat uses onLayout
to determine the height of the chat container. To trigger onLayout
during your tests, you can run the following bits of code.
const WIDTH = 200 // or any number
const HEIGHT = 2000 // or any number
const loadingWrapper = getByTestId(TEST_ID.LOADING_WRAPPER)
fireEvent(loadingWrapper, 'layout', {
nativeEvent: {
layout: {
width: WIDTH,
height: HEIGHT,
},
},
})
import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'expo-gifted-chat'
export function Example() {
const [messages, setMessages] = useState([])
useEffect(() => {
setMessages([
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
},
},
])
}, [])
const onSend = useCallback((messages = []) => {
setMessages((previousMessages) =>
GiftedChat.append(previousMessages, messages)
)
}, [])
return (
<GiftedChat
messages={messages}
onSend={(messages) => onSend(messages)}
user={{
_id: 1,
}}
/>
)
}
export interface IMessage {
_id: string | number
text: string
createdAt: Date | number
user: User
image?: string
video?: string
audio?: string
system?: boolean
sent?: boolean
received?: boolean
pending?: boolean
quickReplies?: QuickReplies
}
{
_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',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
e.g. System Message
{
_id: 1,
text: 'This is a system message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
system: true,
// Any additional custom parameters are passed through
}
e.g. Chat Message with Quick Reply options
interface Reply {
title: string
value: string
messageId?: number | string
}
interface QuickReplies {
type: 'radio' | 'checkbox'
values: Reply[]
keepIt?: boolean
}
{
_id: 1,
text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
createdAt: new Date(),
quickReplies: {
type: 'radio', // or 'checkbox',
keepIt: true,
values: [
{
title: '😋 Yes',
value: 'yes',
},
{
title: '📷 Yes, let me show you with a picture!',
value: 'yes_picture',
},
{
title: '😞 Nope. What?',
value: 'no',
},
],
},
user: {
_id: 2,
name: 'React Native',
},
},
{
_id: 2,
text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
createdAt: new Date(),
quickReplies: {
type: 'checkbox', // or 'radio',
values: [
{
title: 'Yes',
value: 'yes',
},
{
title: 'Yes, let me show you with a picture!',
value: 'yes_picture',
},
{
title: 'Nope. What?',
value: 'no',
},
],
},
user: {
_id: 2,
name: 'React Native',
},
}
-
messageContainerRef
(FlashList ref) - Ref to the flashList -
textInputRef
(TextInput ref) - Ref to the text input -
messages
(Array) - Messages to display -
isTyping
(Bool) - Typing Indicator state; defaultfalse
. If you userenderFooter
it will override this. -
text
(String) - Input text; default isundefined
, but if specified, it will override GiftedChat's internal state (e.g. for redux; see notes below) -
placeholder
(String) - Placeholder whentext
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; defaultfalse
, show only when text input is not empty -
locale
(String) - Locale to localize the dates. You need first to import the locale you need (ie.require('dayjs/locale/de')
orimport 'dayjs/locale/fr'
) -
timeFormat
(String) - Format to use for rendering times; default is'LT'
(see Day.js Format) -
dateFormat
(String) - Format to use for rendering dates; default is'll'
(see Day.js Format) -
loadEarlier
(Bool) - Enables the "load earlier messages" button, required forinfiniteScroll
-
onLoadEarlier
(Function) - Callback when loading earlier messages -
isLoadingEarlier
(Bool) - Display anActivityIndicator
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 tonull
to not render any avatar for the message -
showUserAvatar
(Bool) - Whether to render an avatar for the current user; default isfalse
, 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 isfalse
-
onPressAvatar
(Function(user
)) - Callback when a message avatar is tapped -
onLongPressAvatar
(Function(user
)) - Callback when a message avatar is long-pressed -
renderAvatarOnTop
(Bool) - Render the message avatar at the top of consecutive messages, rather than the bottom; default isfalse
-
renderBubble
(Function) - Custom message bubble -
renderTicks
(Function(message
)) - Custom ticks indicator to display message status -
renderSystemMessage
(Function) - Custom system message -
onPress
(Function(context
,message
)) - Callback when a message bubble is pressed -
onLongPress
(Function(context
,message
)) - Callback when a message bubble is long-pressed -
inverted
(Bool) - Reverses display order ofmessages
; default istrue
-
renderUsernameOnMessage
(Bool) - Indicate whether to show the user's username inside the message bubble; default isfalse
-
renderUsername
(Function) - Custom Username container -
renderMessage
(Function) - Custom message container -
renderMessageText
(Function) - Custom message text -
renderMessageImage
(Function) - Custom message image -
renderMessageVideo
(Function) - Custom message video -
imageProps
(Object) - Extra props to be passed to the<Image>
component created by the defaultrenderMessageImage
-
videoProps
(Object) - Extra props to be passed to the video component created by the requiredrenderMessageVideo
-
lightboxProps
(Object) - Extra props to be passed to theMessageImage
's Lightbox -
isCustomViewBottom
(Bool) - Determine whether renderCustomView is displayed before or after the text, image and video views; default isfalse
-
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 App.tsx for an example. Overrides default typing indicator that triggers whenisTyping
is true. -
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 -
renderActions
(Function) - Custom action button on the left of the message composer -
renderSend
(Function) - Custom send button; you can pass children to the originalSend
component quite easily, for example, to use a custom icon -
renderAccessory
(Function) - Custom second line of actions below the message composer -
onPressActionButton
(Function) - Callback when the Action button is pressed (if set, the defaultactionSheet
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 is44
-
listViewProps
(Object) - Extra props to be passed to the messages<ListView>
; some props can't be overridden, see the code inMessageContainer.render()
for details -
textInputProps
(Object) - Extra props to be passed to the<TextInput>
-
textInputStyle
(Object) - Custom style to be passed to the<TextInput>
-
multiline
(Bool) - Indicates whether to allow the<TextInput>
to be multiple lines or not; defaulttrue
. -
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 linking message content (like URLs and phone numbers), e.g.:
<GiftedChat
parsePatterns={(linkStyle) => [
{ type: 'phone', style: linkStyle, onPress: this.onPressPhoneNumber },
{ pattern: /#(\w+)/, style: { ...linkStyle, styles.hashtag }, onPress: this.onPressHashtag },
]}
/>
-
extraData
(Object) - Extra props for re-rendering FlashList on demand. This will be useful for rendering footer etc. -
minComposerHeight
(Object) - Custom min-height of the composer. -
maxComposerHeight
(Object) - Custom max height of the composer.
-
scrollToBottom
(Bool) - Enables the scroll to bottom Component (Default is false) -
scrollToBottomComponent
(Function) - Custom Scroll To Bottom Component container -
scrollToBottomOffset
(Integer) - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200) -
scrollToBottomStyle
(Object) - Custom style for Bottom Component container -
alignTop
(Boolean) Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom) -
onQuickReply
(Function) - Callback when sending a quick reply (to backend server) -
renderQuickReplies
(Function) - Custom all quick reply view -
quickReplyStyle
(StyleProp) - Custom quick reply view style -
renderQuickReplySend
(Function) - Custom quick reply send view -
shouldUpdateMessage
(Function) - Lets the message component know when to update outside of normal cases. -
infiniteScroll
(Bool) - infinite scroll up when reach the top of messages container, automatically call onLoadEarlier function if exist (not yet supported for the web). You need to addloadEarlier
prop too. -
isStatusBarTranslucentAndroid
(Bool) - If you use translucent status bar on Android, set this option to true. Ignored on iOS.