react-native-gifted-chat

react-native-gifted-chat

Version 3.4.2
Published 2 days ago
451 kB
5 dependencies
MIT license

Install

npm i react-native-gifted-chat

yarn add react-native-gifted-chat

pnpm add react-native-gifted-chat

Overview

The most complete chat UI for React Native. Maintenance mode - active development continues in @kesha-antonov/react-native-chat

Index

Variables

variable Color

const Color: {
    defaultColor: string;
    backgroundTransparent: string;
    defaultBlue: string;
    leftBubbleBackground: string;
    black: string;
    white: string;
    carrot: string;
    emerald: string;
    peterRiver: string;
    wisteria: string;
    alizarin: string;
    turquoise: string;
    midnightBlue: string;
    optionTintColor: string;
    timeTextColor: string;
};

variable DATE_FORMAT

const DATE_FORMAT: string;

variable DEFAULT_REACTION_EMOJIS

const DEFAULT_REACTION_EMOJIS: string[];

Default set of emojis shown in the reaction quick-picker

variable GiftedChatContext

const GiftedChatContext: any;

variable LoadEarlierMessages

const LoadEarlierMessages: React.FC<LoadEarlierMessagesProps>;

variable TEST_ID

const TEST_ID: { WRAPPER: string; LOADING_WRAPPER: string; SEND_TOUCHABLE: string };

variable TIME_FORMAT

const TIME_FORMAT: string;

Functions

function Actions

Actions: ({
    actions,
    actionSheetOptionTintColor,
    icon,
    wrapperStyle,
    iconTextStyle,
    onPressActionButton,
    buttonStyle,
}: ActionsProps) => React.JSX.Element;

function Avatar

Avatar: <TMessage extends IMessage = IMessage>(
    props: AvatarProps<TMessage>
) => React.JSX.Element | null;

function Bubble

Bubble: <TMessage extends IMessage = IMessage>(
    props: BubbleProps<TMessage>
) => React.ReactElement;

function Composer

Composer: ({ text, textInputProps }: ComposerProps) => React.ReactElement;

function Day

Day: ({
    dateFormat,
    dateFormatCalendar,
    createdAt,
    containerStyle,
    wrapperStyle,
    textProps,
}: DayProps) => React.JSX.Element | null;

function disableMaintenanceNotice

disableMaintenanceNotice: () => void;

Turns off the dev-only maintenance notice. Call it once, before the first GiftedChat render (for example next to your app's root component).

function getColorSchemeStyle

getColorSchemeStyle: <T>(
    styles: T,
    baseName: string,
    colorScheme?: string | null
) => T[keyof T][];

function getStyleWithPosition

getStyleWithPosition: <T>(
    styles: T,
    baseName: string,
    position?: 'left' | 'right' | null
) => StyleProp<ViewStyle> | StyleProp<TextStyle>;

function GiftedAvatar

GiftedAvatar: (props: GiftedAvatarProps) => React.JSX.Element;

function GiftedChat

GiftedChat: typeof GiftedChatWrapper;

function InputToolbar

InputToolbar: <TMessage extends IMessage = IMessage>(
    props: InputToolbarProps<TMessage>
) => React.JSX.Element;

function LinkParser

LinkParser: ({
    text,
    matchers: customMatchers,
    email,
    phone,
    url,
    hashtag,
    mention,
    hashtagUrl,
    mentionUrl,
    linkStyle,
    onPress,
    stripPrefix,
    textStyle,
    TextComponent,
}: LinkParserProps) => React.ReactElement;

function Message

Message: <TMessage extends IMessage = IMessage>(
    props: MessageProps<TMessage>
) => React.JSX.Element | null;

function MessageAudio

MessageAudio: () => React.JSX.Element;

function MessageImage

MessageImage: <TMessage extends IMessage = IMessage>({
    containerStyle,
    imageProps,
    imageSourceProps,
    imageStyle,
    currentMessage,
}: MessageImageProps<TMessage>) => React.JSX.Element | null;

function MessageReactions

MessageReactions: <TMessage extends IMessage = IMessage>(
    props: MessageReactionsDisplayProps<TMessage>
) => React.ReactElement | null;

function MessageReply

MessageReply: <TMessage extends IMessage = IMessage>({
    replyMessage,
    currentMessage,
    position,
    containerStyle,
    containerStyleLeft,
    containerStyleRight,
    textStyle,
    textStyleLeft,
    textStyleRight,
    imageStyle,
    onPress,
}: MessageReplyProps<TMessage>) => React.JSX.Element;

function MessagesContainer

MessagesContainer: <TMessage extends IMessage>(
    props: MessagesContainerProps<TMessage>
) => React.JSX.Element;

function MessageText

MessageText: <TMessage extends IMessage>({
    currentMessage,
    position,
    containerStyle,
    textStyle,
    linkStyle: linkStyleProp,
    customTextStyle,
    onPress: onPressProp,
    matchers,
    email,
    phone,
    url,
    hashtag,
    mention,
    hashtagUrl,
    mentionUrl,
    stripPrefix,
}: MessageTextProps<TMessage>) => React.JSX.Element;

function MessageVideo

MessageVideo: () => React.JSX.Element;

ReactionPicker: <TMessage extends IMessage = IMessage>(
    props: ReactionPickerProps<TMessage>
) => React.ReactElement | null;

Lightweight quick-picker shown on long-press: a floating row of emojis anchored to the pressed bubble. For a full emoji browser, pass a custom component via reactions.renderReactionPicker (see the example app).

function ReplyPreview

ReplyPreview: ({
    replyMessage,
    onClearReply,
    containerStyle,
    textStyle,
    imageStyle,
}: ReplyPreviewProps) => React.JSX.Element;

function Send

Send: <TMessage extends IMessage = IMessage>({
    text,
    containerStyle,
    children,
    textStyle,
    label,
    isSendButtonAlwaysVisible,
    isTextOptional,
    sendButtonProps,
    onSend,
}: SendProps<TMessage>) => React.JSX.Element;

function SystemMessage

SystemMessage: <TMessage extends IMessage>({
    currentMessage,
    containerStyle,
    messageContainerStyle,
    textStyle,
    messageTextProps,
    children,
}: SystemMessageProps<TMessage>) => React.JSX.Element | null;

function Time

Time: <TMessage extends IMessage = IMessage>({
    position,
    containerStyle,
    currentMessage,
    timeFormat,
    timeTextStyle,
}: TimeProps<TMessage>) => React.JSX.Element | null;

function useChatContext

useChatContext: () => IGiftedChatContext;

function useColorScheme

useColorScheme: () => any;

Custom hook that returns the color scheme from GiftedChat context if provided, otherwise falls back to the system color scheme from React Native.
Returns
The current color scheme ('light', 'dark', null, or undefined)

Interfaces

interface ActionsProps

interface ActionsProps {}

property actions

actions?: Array<{
    title: string;
    action: () => void;
}>;

property actionSheetOptionTintColor

actionSheetOptionTintColor?: string;

property buttonStyle

buttonStyle?: StyleProp<ViewStyle>;

property icon

icon?: () => ReactNode;

property iconTextStyle

iconTextStyle?: StyleProp<TextStyle>;

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

method onPressActionButton

onPressActionButton: () => void;

interface AvatarProps

interface AvatarProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property imageStyle

imageStyle?: LeftRightStyle<ImageStyle>;

property isAvatarOnTop

isAvatarOnTop?: boolean;

property isAvatarVisibleForEveryMessage

isAvatarVisibleForEveryMessage?: boolean;

property nextMessage

nextMessage?: TMessage;

property onLongPressAvatar

onLongPressAvatar?: (user: User) => void;

property onPressAvatar

onPressAvatar?: (user: User) => void;

property position

position: 'left' | 'right';

property previousMessage

previousMessage?: TMessage;

property textStyle

textStyle?: TextStyle;

method renderAvatar

renderAvatar: (props: Omit<AvatarProps<TMessage>, 'renderAvatar'>) => ReactNode;

interface BubbleProps

interface BubbleProps<TMessage extends IMessage> {}

property bottomContainerStyle

bottomContainerStyle?: LeftRightStyle<ViewStyle>;

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property containerToNextStyle

containerToNextStyle?: LeftRightStyle<ViewStyle>;

property containerToPreviousStyle

containerToPreviousStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property isCustomViewBottom

isCustomViewBottom?: boolean;

property isInverted

isInverted?: boolean;

property isUsernameVisible

isUsernameVisible?: boolean;

property messageReply

messageReply?: BubbleReplyProps<TMessage>;

Message reply configuration

property messageTextProps

messageTextProps?: Partial<MessageTextProps<TMessage>>;

property nextMessage

nextMessage?: TMessage;

property onLongPressMessage

onLongPressMessage?: (context?: unknown, message?: unknown) => void;

property onPressMessage

onPressMessage?: (context?: unknown, message?: unknown) => void;

property onQuickReply

onQuickReply?: (replies: Reply[]) => void;

property position

position: 'left' | 'right';

property previousMessage

previousMessage?: TMessage;

property quickReplyContainerStyle

quickReplyContainerStyle?: StyleProp<ViewStyle>;

property quickReplyStyle

quickReplyStyle?: StyleProp<ViewStyle>;

property quickReplyTextStyle

quickReplyTextStyle?: StyleProp<TextStyle>;

property reactions

reactions?: ReactionsProps<TMessage>;

Emoji reactions configuration

property renderCustomView

renderCustomView?: (bubbleProps: BubbleProps<TMessage>) => React.ReactNode;

property renderMessageAudio

renderMessageAudio?: (
    props: RenderMessageAudioProps<TMessage>
) => React.ReactNode;

property renderMessageImage

renderMessageImage?: (
    props: RenderMessageImageProps<TMessage>
) => React.ReactNode;

property renderMessageText

renderMessageText?: (props: RenderMessageTextProps<TMessage>) => React.ReactNode;

property renderMessageVideo

renderMessageVideo?: (
    props: RenderMessageVideoProps<TMessage>
) => React.ReactNode;

property renderQuickReplies

renderQuickReplies?: (
    quickReplies: QuickRepliesProps<TMessage>
) => React.ReactNode;

property renderQuickReplySend

renderQuickReplySend?: () => React.ReactNode;

property renderTicks

renderTicks?: (currentMessage: TMessage) => React.ReactNode;

property renderTime

renderTime?: (timeProps: TimeProps<TMessage>) => React.ReactNode;

property renderUsername

renderUsername?: (user?: TMessage['user']) => React.ReactNode;

property textStyle

textStyle?: LeftRightStyle<TextStyle>;

property tickStyle

tickStyle?: StyleProp<TextStyle>;

property touchableProps

touchableProps?: ComponentProps<typeof Pressable>;

property user

user?: User;

property usernameStyle

usernameStyle?: TextStyle;

property wrapperStyle

wrapperStyle?: LeftRightStyle<ViewStyle>;

interface ComposerProps

interface ComposerProps {}

property composerHeight

composerHeight?: number;

property text

text?: string;

property textInputProps

textInputProps?: Partial<TextInputProps>;

interface DayProps

interface DayProps {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property createdAt

createdAt: Date | number;

property dateFormat

dateFormat?: string;

property dateFormatCalendar

dateFormatCalendar?: object;

property isAnimated

isAnimated?: boolean;

true when rendered as the floating/animated day header that sticks to the top while scrolling, false/undefined for the inline day separators. Use this in a custom renderDay to give the floating header a different look.

property textProps

textProps?: Partial<TextProps>;

Props to pass to the Text component (e.g., style, allowFontScaling, numberOfLines)

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

interface GiftedAvatarProps

interface GiftedAvatarProps {}

property avatarStyle

avatarStyle?: StyleProp<ImageStyle>;

property onLongPress

onLongPress?: (props: GiftedAvatarProps) => void;

property onPress

onPress?: (props: GiftedAvatarProps) => void;

property textStyle

textStyle?: StyleProp<TextStyle>;

property user

user?: User;

interface IGiftedChatContext

interface IGiftedChatContext {}

method actionSheet

actionSheet: () => {
    showActionSheetWithOptions: (
        options: ActionSheetOptions,
        callback: (buttonIndex?: number) => void | Promise<void>
    ) => void;
};

method getColorScheme

getColorScheme: () => ColorSchemeName | null | undefined;

method getLocale

getLocale: () => string;

interface IMessage

interface IMessage {}

property audio

audio?: string;

property createdAt

createdAt: Date | number;

property image

image?: string;

property location

location?: {
    latitude: number;
    longitude: number;
};

property pending

pending?: boolean;

property quickReplies

quickReplies?: QuickReplies;

property reactions

reactions?: MessageReaction[];

property received

received?: boolean;

property replyMessage

replyMessage?: ReplyMessage;

property sent

sent?: boolean;

property system

system?: boolean;

property text

text: string;

property user

user: User;

property video

video?: string;

interface InputToolbarProps

interface InputToolbarProps<TMessage extends IMessage> {}

property actions

actions?: Array<{
    title: string;
    action: () => void;
}>;

property actionSheetOptionTintColor

actionSheetOptionTintColor?: string;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property icon

icon?: () => React.ReactNode;

property onClearReply

onClearReply?: () => void;

Callback to clear reply

property onPressActionButton

onPressActionButton?: () => void;

property primaryStyle

primaryStyle?: StyleProp<ViewStyle>;

property renderAccessory

renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode;

property renderActions

renderActions?: (props: ActionsProps) => React.ReactNode;

property renderComposer

renderComposer?: (props: ComposerProps) => React.ReactNode;

property renderReplyPreview

renderReplyPreview?: (props: ReplyPreviewProps) => React.ReactNode;

Custom render for reply preview

property renderSend

renderSend?: (props: SendProps<TMessage>) => React.ReactNode;

property replyMessage

replyMessage?: ReplyMessage | null;

Reply message to show in preview

property replyPreviewContainerStyle

replyPreviewContainerStyle?: StyleProp<ViewStyle>;

Style for reply preview container

property replyPreviewTextStyle

replyPreviewTextStyle?: StyleProp<TextStyle>;

Style for reply preview text

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

interface LeftRightStyle

interface LeftRightStyle<T> {}

property left

left?: StyleProp<T>;

property right

right?: StyleProp<T>;

interface LinkMatcher

interface LinkMatcher {}

property baseUrl

baseUrl?: string;

property getLinkText

getLinkText?: (text: string) => string;

property getLinkUrl

getLinkUrl?: (text: string) => string;

property onPress

onPress?: (url: string, type: LinkType) => void;

property pattern

pattern: RegExp;

property renderLink

renderLink?: (
    text: string,
    url: string,
    index: number,
    type: LinkType
) => React.ReactNode;

property style

style?: StyleProp<TextStyle>;

property type

type: LinkType;

interface LoadEarlierMessagesProps

interface LoadEarlierMessagesProps {}

property activityIndicatorColor

activityIndicatorColor?: string;

property activityIndicatorSize

activityIndicatorSize?: number | 'small' | 'large';

property activityIndicatorStyle

activityIndicatorStyle?: StyleProp<ViewStyle>;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property isAvailable

isAvailable: boolean;

property isInfiniteScrollEnabled

isInfiniteScrollEnabled?: boolean;

property isLoading

isLoading: boolean;

property label

label?: string;

property onPress

onPress: () => void;

property textStyle

textStyle?: StyleProp<TextStyle>;

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

interface MessageAudioProps

interface MessageAudioProps<TMessage extends IMessage> {}

property audioProps

audioProps?: object;

property audioStyle

audioStyle?: StyleProp<ViewStyle>;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

interface MessageImageProps

interface MessageImageProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property imageProps

imageProps?: Partial<ImageProps>;

property imageSourceProps

imageSourceProps?: Partial<ImageURISource>;

property imageStyle

imageStyle?: StyleProp<ImageStyle>;

interface MessageProps

interface MessageProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property isInverted

isInverted?: boolean;

property isUserAvatarVisible

isUserAvatarVisible?: boolean;

property nextMessage

nextMessage?: TMessage;

property onMessageLayout

onMessageLayout?: (event: LayoutChangeEvent) => void;

property position

position: 'left' | 'right';

property previousMessage

previousMessage?: TMessage;

property reactions

reactions?: ReactionsProps<TMessage>;

Emoji reactions configuration

property renderAvatar

renderAvatar?: (props: AvatarProps<TMessage>) => React.ReactNode;

property renderBubble

renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode;

property renderDay

renderDay?: (props: DayProps) => React.ReactNode;

property renderSystemMessage

renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode;

property swipeToReply

swipeToReply?: SwipeToReplyProps<TMessage>;

Swipe to reply configuration

property user

user: User;

interface MessageReaction

interface MessageReaction {}

property emoji

emoji: string;

The emoji character (e.g. '👍')

property userIds

userIds: (string | number)[];

IDs of the users who reacted with this emoji

interface MessageReactionsDisplayProps

interface MessageReactionsDisplayProps<TMessage extends IMessage> {}

Props passed to the default (or custom) reactions-display component rendered below each bubble

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentUserId

currentUserId?: string | number;

property message

message: TMessage;

property onReactionPress

onReactionPress?: (emoji: string) => void;

property position

position: 'left' | 'right';

property reactionActiveStyle

reactionActiveStyle?: StyleProp<ViewStyle>;

property reactionCountStyle

reactionCountStyle?: StyleProp<TextStyle>;

property reactions

reactions: MessageReaction[];

property reactionStyle

reactionStyle?: StyleProp<ViewStyle>;

property reactionTextStyle

reactionTextStyle?: StyleProp<TextStyle>;

interface MessageReplyProps

interface MessageReplyProps<TMessage extends IMessage = IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Container style for the reply

property containerStyleLeft

containerStyleLeft?: StyleProp<ViewStyle>;

Container style for left position

property containerStyleRight

containerStyleRight?: StyleProp<ViewStyle>;

Container style for right position

property currentMessage

currentMessage: TMessage;

The current message containing the reply

property imageStyle

imageStyle?: StyleProp<ImageStyle>;

Image style for the reply

property onPress

onPress?: (replyMessage: ReplyMessage) => void;

Callback when reply is pressed

property position

position: 'left' | 'right';

Position of the bubble (left or right)

property replyMessage

replyMessage: ReplyMessage;

The reply message to display

property textStyle

textStyle?: StyleProp<TextStyle>;

Text style for the reply

property textStyleLeft

textStyleLeft?: StyleProp<TextStyle>;

Text style for left position

property textStyleRight

textStyleRight?: StyleProp<TextStyle>;

Text style for right position

interface MessageReplyStyleProps

interface MessageReplyStyleProps {}

Props for message reply display inside bubble

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style for message reply container

property containerStyleLeft

containerStyleLeft?: StyleProp<ViewStyle>;

Style for message reply container on left side

property containerStyleRight

containerStyleRight?: StyleProp<ViewStyle>;

Style for message reply container on right side

property imageStyle

imageStyle?: StyleProp<ImageStyle>;

Style for message reply image

property textStyle

textStyle?: StyleProp<TextStyle>;

Style for message reply text

property textStyleLeft

textStyleLeft?: StyleProp<TextStyle>;

Style for message reply text on left side

property textStyleRight

textStyleRight?: StyleProp<TextStyle>;

Style for message reply text on right side

interface MessagesContainerProps

interface MessagesContainerProps<TMessage extends IMessage = IMessage>
    extends Omit<TypingIndicatorProps, 'style'> {}

property dateFormat

dateFormat?: string;

Format to use for rendering dates; default is 'll'

property dateFormatCalendar

dateFormatCalendar?: object;

Format to use for rendering relative times

property forwardRef

forwardRef?: RefObject<AnimatedList<TMessage>>;

Ref for the FlatList message container

property isAlignedTop

isAlignedTop?: boolean;

Controls whether or not the message bubbles appear at the top of the chat

property isDayAnimationEnabled

isDayAnimationEnabled?: boolean;

Enable animated day label that appears on scroll; default is true

property isInverted

isInverted?: boolean;

Reverses display order of messages; default is true

property isScrollToBottomEnabled

isScrollToBottomEnabled?: boolean;

Enables the isScrollToBottomEnabled Component

property listProps

listProps?: AnimatedListProps<TMessage>;

Additional props for FlatList

property loadEarlierMessagesProps

loadEarlierMessagesProps?: LoadEarlierMessagesProps;

Props to pass to the LoadEarlierMessages component. The LoadEarlierMessages button is only visible when isAvailable is true. Includes isAvailable (controls button visibility), isInfiniteScrollEnabled (infinite scroll up when reach the top of messages container, automatically call onPress function if it exists - not yet supported for web), onPress (callback when button is pressed), isLoading (display loading indicator), label (override default "Load earlier messages" text), and styling props (containerStyle, wrapperStyle, textStyle, activityIndicatorStyle, activityIndicatorColor, activityIndicatorSize).

property messages

messages?: TMessage[];

Messages to display

property onQuickReply

onQuickReply?: (replies: Reply[]) => void;

Callback when quick reply is sent

property reactions

reactions?: ReactionsProps<TMessage>;

Emoji reactions configuration

property renderChatEmpty

renderChatEmpty?: () => React.ReactNode;

Custom component to render when messages are empty

property renderDay

renderDay?: (props: DayProps) => React.ReactNode;

Custom day above a message

property renderFooter

renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode;

Custom footer component on the ListView, e.g. 'User is typing...'

property renderLoadEarlier

renderLoadEarlier?: (props: LoadEarlierMessagesProps) => React.ReactNode;

Custom "Load earlier messages" button

property renderMessage

renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement;

Custom message container

property renderTypingIndicator

renderTypingIndicator?: () => React.ReactNode;

Custom typing indicator

property reply

reply?: ReplyProps<TMessage>;

Reply functionality configuration

property scrollToBottomComponent

scrollToBottomComponent?: () => React.ReactNode;

Scroll to bottom custom component

property scrollToBottomContentStyle

scrollToBottomContentStyle?: StyleProp<ViewStyle>;

Scroll to bottom content style

property scrollToBottomOffset

scrollToBottomOffset?: number;

Distance from bottom before showing scroll to bottom button

property scrollToBottomStyle

scrollToBottomStyle?: StyleProp<ViewStyle>;

Scroll to bottom wrapper style

property typingIndicatorStyle

typingIndicatorStyle?: StyleProp<ViewStyle>;

Style for TypingIndicator component

property user

user?: User;

User sending the messages: { _id, name, avatar }

interface MessageVideoProps

interface MessageVideoProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property videoProps

videoProps?: object;

property videoStyle

videoStyle?: StyleProp<ViewStyle>;

interface ParsedLink

interface ParsedLink {}

property index

index: number;

property length

length: number;

property text

text: string;

property type

type: LinkType;

property url

url: string;

interface QuickReplies

interface QuickReplies {}

property keepIt

keepIt?: boolean;

property type

type: 'radio' | 'checkbox';

property values

values: Reply[];

interface QuickRepliesProps

interface QuickRepliesProps<TMessage extends IMessage = IMessage> {}

property color

color?: string;

property currentMessage

currentMessage: TMessage;

property nextMessage

nextMessage?: TMessage;

property quickReplyContainerStyle

quickReplyContainerStyle?: StyleProp<ViewStyle>;

property quickReplyStyle

quickReplyStyle?: StyleProp<ViewStyle>;

property quickReplyTextStyle

quickReplyTextStyle?: StyleProp<TextStyle>;

property sendText

sendText?: string;

method onQuickReply

onQuickReply: (reply: Reply[]) => void;

method renderQuickReplySend

renderQuickReplySend: () => React.ReactNode;

interface ReactionPickerProps

interface ReactionPickerProps<TMessage extends IMessage> {}

Props passed to the default (or custom) reaction-picker component shown on long-press

property bubbleHeight

bubbleHeight?: number;

Measured height of the bubble container

property bubbleWidth

bubbleWidth?: number;

Measured width of the bubble container

property emojis

emojis: string[];

property message

message: TMessage;

property onDismiss

onDismiss: () => void;

property onSelect

onSelect: (emoji: string) => void;

property pageX

pageX?: number;

Horizontal screen-coordinate of the bubble's top-left corner

property pageY

pageY?: number;

Vertical screen-coordinate of the bubble's top edge

property pickerContainerStyle

pickerContainerStyle?: StyleProp<ViewStyle>;

property pickerEmojiStyle

pickerEmojiStyle?: StyleProp<TextStyle>;

property position

position: 'left' | 'right';

property visible

visible: boolean;

interface ReactionsProps

interface ReactionsProps<TMessage extends IMessage> {}

Top-level emoji-reactions configuration. Pass this as the reactions prop to <GiftedChat />.

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style for the container wrapping all reaction pills

property emojis

emojis?: string[];

Emoji options shown in the quick picker. ['👍', '❤️', '😂', '😮', '😢', '👎']

property isEnabled

isEnabled?: boolean;

Enable emoji reactions on messages. false

property onReactionPress

onReactionPress?: (message: TMessage, emoji: string) => void;

Called when the user selects an emoji in the picker or taps an existing reaction pill. Toggle logic is left to the consumer.

property pickerContainerStyle

pickerContainerStyle?: StyleProp<ViewStyle>;

Style for the floating quick-picker panel

property pickerEmojiStyle

pickerEmojiStyle?: StyleProp<TextStyle>;

Style for each emoji button inside the quick picker

property reactionActiveStyle

reactionActiveStyle?: StyleProp<ViewStyle>;

Style applied to the current-user's active reaction pill

property reactionCountStyle

reactionCountStyle?: StyleProp<TextStyle>;

Style for the count label inside each pill

property reactionStyle

reactionStyle?: StyleProp<ViewStyle>;

Style applied to every inactive reaction pill

property reactionTextStyle

reactionTextStyle?: StyleProp<TextStyle>;

Style for the emoji text inside each pill

property renderReactionPicker

renderReactionPicker?: (props: ReactionPickerProps<TMessage>) => React.ReactNode;

Override the emoji-picker component shown on long-press. Use this to provide a richer picker (e.g. a full emoji browser). See the example app for a react-native-emoji-chooser integration.

property renderReactions

renderReactions?: (
    props: MessageReactionsDisplayProps<TMessage>
) => React.ReactNode;

Override the reactions-display component rendered below the bubble

interface Reply

interface Reply {}

property messageId

messageId?: number | string;

property title

title: string;

property value

value: string;

interface ReplyMessage

interface ReplyMessage
    extends Pick<IMessage, '_id' | 'text' | 'user' | 'audio' | 'image'> {}

interface ReplyPreviewProps

interface ReplyPreviewProps {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Container style

property imageStyle

imageStyle?: StyleProp<ImageStyle>;

Image style

property onClearReply

onClearReply?: () => void;

Callback to clear the reply

property replyMessage

replyMessage: ReplyMessage;

The reply message to preview

property textStyle

textStyle?: StyleProp<TextStyle>;

Text style

interface ReplyPreviewStyleProps

interface ReplyPreviewStyleProps {}

Props for reply preview shown above input toolbar

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style for reply preview container

property imageStyle

imageStyle?: StyleProp<ImageStyle>;

Style for reply preview image

property textStyle

textStyle?: StyleProp<TextStyle>;

Style for reply preview text

interface ReplyProps

interface ReplyProps<TMessage extends IMessage> {}

Grouped props for reply functionality

property message

message?: ReplyMessage | null;

Reply message to show in input toolbar preview

property messageStyle

messageStyle?: MessageReplyStyleProps;

Message reply styling

property onClear

onClear?: () => void;

Callback when reply is cleared

property onPress

onPress?: (replyMessage: ReplyMessage) => void;

Callback when message reply is pressed inside bubble

property previewStyle

previewStyle?: ReplyPreviewStyleProps;

Reply preview styling

property renderMessageReply

renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode;

Custom render for message reply inside bubble

property renderPreview

renderPreview?: (props: ReplyPreviewProps) => React.ReactNode;

Custom render for reply preview in input toolbar

property swipe

swipe?: SwipeToReplyProps<TMessage>;

Swipe-to-reply configuration

interface SendProps

interface SendProps<TMessage extends IMessage> {}

property children

children?: React.ReactNode;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property isSendButtonAlwaysVisible

isSendButtonAlwaysVisible?: boolean;

Always show send button, even when text is empty

property isTextOptional

isTextOptional?: boolean;

Text is optional, allow sending empty messages (useful for media-only messages)

property label

label?: string;

property sendButtonProps

sendButtonProps?: Partial<TouchableOpacityProps>;

property text

text?: string;

property textStyle

textStyle?: StyleProp<TextStyle>;

method onSend

onSend: (
    messages: Partial<TMessage> | Partial<TMessage>[],
    shouldResetInputToolbar: boolean
) => void;

interface SwipeToReplyProps

interface SwipeToReplyProps<TMessage extends IMessage> {}

Props for swipe-to-reply gesture behavior

property actionContainerStyle

actionContainerStyle?: StyleProp<ViewStyle>;

Style for the swipe action container

property direction

direction?: 'left' | 'right';

Direction to swipe for reply; default is 'left' (swipe left, icon appears on right)

property isEnabled

isEnabled?: boolean;

Enable swipe to reply on messages; default is false

property onSwipe

onSwipe?: (message: TMessage) => void;

Callback when swipe to reply is triggered

property renderAction

renderAction?: (
    progress: SharedValue<number>,
    translation: SharedValue<number>,
    position: 'left' | 'right'
) => React.ReactNode;

Custom render for swipe action indicator

interface SystemMessageProps

interface SystemMessageProps<TMessage extends IMessage> {}

property children

children?: React.ReactNode;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property messageContainerStyle

messageContainerStyle?: StyleProp<ViewStyle>;

property messageTextProps

messageTextProps?: Partial<MessageTextProps<TMessage>>;

property textStyle

textStyle?: StyleProp<TextStyle>;

interface TimeProps

interface TimeProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property position

position?: 'left' | 'right';

property timeFormat

timeFormat?: string;

property timeTextStyle

timeTextStyle?: LeftRightStyle<TextStyle>;

interface User

interface User {}

property avatar

avatar?: string | number | renderFunction;

property name

name?: string;

Type Aliases

type IChatMessage

type IChatMessage = IMessage;

type LinkType

type LinkType = 'url' | 'email' | 'phone' | 'mention' | 'hashtag';

type MessageTextProps

type MessageTextProps<TMessage extends IMessage> = {
    position?: 'left' | 'right';
    currentMessage: TMessage;
    containerStyle?: LeftRightStyle<ViewStyle>;
    textStyle?: LeftRightStyle<TextStyle>;
    linkStyle?: LeftRightStyle<TextStyle>;
    customTextStyle?: StyleProp<TextStyle>;
    onPress?: (message: TMessage, url: string, type: LinkType) => void;
    matchers?: LinkMatcher[];
    email?: boolean;
    phone?: boolean;
    url?: boolean;
    hashtag?: boolean;
    mention?: boolean;
    hashtagUrl?: string;
    mentionUrl?: string;
    stripPrefix?: boolean;
};

type Omit

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

type RenderMessageAudioProps

type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
    BubbleProps<TMessage>,
    'containerStyle' | 'wrapperStyle'
> &
    MessageAudioProps<TMessage>;

type RenderMessageImageProps

type RenderMessageImageProps<TMessage extends IMessage> = Omit<
    BubbleProps<TMessage>,
    'containerStyle' | 'wrapperStyle'
> &
    MessageImageProps<TMessage>;

type RenderMessageTextProps

type RenderMessageTextProps<TMessage extends IMessage> = Omit<
    BubbleProps<TMessage>,
    'containerStyle' | 'wrapperStyle'
> &
    MessageTextProps<TMessage>;

type RenderMessageVideoProps

type RenderMessageVideoProps<TMessage extends IMessage> = Omit<
    BubbleProps<TMessage>,
    'containerStyle' | 'wrapperStyle'
> &
    MessageVideoProps<TMessage>;

Namespaces

namespace GiftedChat

namespace GiftedChat {}

function append

append: <TMessage extends IMessage>(
    currentMessages: TMessage[],
    messages: TMessage[],
    isInverted?: boolean
) => TMessage[];

function prepend

prepend: <TMessage extends IMessage>(
    currentMessages: TMessage[],
    messages: TMessage[],
    isInverted?: boolean
) => TMessage[];

namespace utils

module 'lib/utils.d.ts' {}

function isSameDay

isSameDay: (
    currentMessage: IMessage,
    diffMessage: IMessage | null | undefined
) => boolean;

function isSameUser

isSameUser: (
    currentMessage: IMessage,
    diffMessage: IMessage | null | undefined
) => boolean;

function renderComponentOrElement

renderComponentOrElement: <TProps extends Record<string, any>>(
    component: any,
    props: TProps
) => React.ReactNode;

function useCallbackDebounced

useCallbackDebounced: <T extends (...args: any[]) => any>(
    callbackFunc: T,
    deps: React.DependencyList | undefined,
    time: number
) => (...args: Parameters<T>) => void;

function useCallbackThrottled

useCallbackThrottled: <T extends (...args: any[]) => any>(
    callbackFunc: T,
    deps: React.DependencyList | undefined,
    time: number
) => (...args: Parameters<T>) => void;

Package Files (40)

Dependencies (5)

Dev Dependencies (45)

Peer Dependencies (6)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-gifted-chat.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-gifted-chat)

HTML

<a href="https://www.jsdocs.io/package/react-native-gifted-chat"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 days ago.
Package analyzed in 5180 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-gifted-chat

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Namespaces

Variables

variable Color

variable DATE_FORMAT

variable DEFAULT_REACTION_EMOJIS

variable GiftedChatContext

variable LoadEarlierMessages

variable TEST_ID

variable TIME_FORMAT

Functions

function Actions

function Avatar

function Bubble

function Composer

function Day

function disableMaintenanceNotice

function getColorSchemeStyle

function getStyleWithPosition

function GiftedAvatar

function GiftedChat

function InputToolbar

function LinkParser

function Message

function MessageAudio

function MessageImage

function MessageReactions

function MessageReply

function MessagesContainer

function MessageText

function MessageVideo

function ReactionPicker

function ReplyPreview

function Send

function SystemMessage

function Time

function useChatContext

function useColorScheme

Returns

Interfaces

interface ActionsProps

property actions

property actionSheetOptionTintColor

property buttonStyle

property icon

property iconTextStyle

property wrapperStyle

method onPressActionButton

interface AvatarProps

property containerStyle

property currentMessage

property imageStyle

property isAvatarOnTop

property isAvatarVisibleForEveryMessage

property nextMessage

property onLongPressAvatar

property onPressAvatar

property position

property previousMessage

property textStyle

method renderAvatar

interface BubbleProps

property bottomContainerStyle

property containerStyle

property containerToNextStyle

property containerToPreviousStyle

property currentMessage

property isCustomViewBottom

property isInverted

property isUsernameVisible

property messageReply

property messageTextProps

property nextMessage