react-native-gifted-chat

react-native-gifted-chat

Version 3.3.3
Published 10 days ago
407 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

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 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 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 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;

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 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 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: () => 'light' | 'dark' | 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 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 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 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 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 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;

Dependencies (5)

Dev Dependencies (44)

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 8 days ago.
Package analyzed in 5044 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 GiftedChatContext

variable LoadEarlierMessages

variable TEST_ID

variable TIME_FORMAT

Functions

function Actions

function Avatar

function Bubble

function Composer

function Day

function getColorSchemeStyle

function getStyleWithPosition

function GiftedAvatar

function GiftedChat

function InputToolbar

function LinkParser

function Message

function MessageAudio

function MessageImage

function MessageReply

function MessagesContainer

function MessageText

function MessageVideo

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

property onLongPressMessage

property onPressMessage

property onQuickReply

property position