react-native-gifted-chat

react-native-gifted-chat

Version 2.8.1
Published 7 months ago
393 kB
8 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 Bubble

const Bubble: React.FC<BubbleProps<IMessage>>;

variable DATE_FORMAT

const DATE_FORMAT: string;

variable DEFAULT_PLACEHOLDER

const DEFAULT_PLACEHOLDER: string;

variable GiftedChatContext

const GiftedChatContext: any;

variable MAX_COMPOSER_HEIGHT

const MAX_COMPOSER_HEIGHT: number;

variable Message

let Message: React.FC<MessageProps<IMessage>>;

variable MIN_COMPOSER_HEIGHT

const MIN_COMPOSER_HEIGHT: number;

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: ({
    options,
    optionTintColor,
    icon,
    wrapperStyle,
    iconTextStyle,
    onPressActionButton,
    containerStyle,
}: ActionsProps) => React.JSX.Element;

function Avatar

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

function Composer

Composer: ({
    composerHeight,
    disableComposer,
    keyboardAppearance,
    multiline,
    onInputSizeChanged,
    onTextChanged,
    placeholder,
    placeholderTextColor,
    text,
    textInputAutoFocus,
    textInputProps,
    textInputStyle,
}: ComposerProps) => React.ReactElement;

function Day

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

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 isSameDay

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

function isSameUser

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

function LoadEarlier

LoadEarlier: ({
    isLoadingEarlier,
    onLoadEarlier,
    label,
    containerStyle,
    wrapperStyle,
    textStyle,
    activityIndicatorColor,
    activityIndicatorSize,
    activityIndicatorStyle,
}: LoadEarlierProps) => React.ReactElement;

function MessageContainer

MessageContainer: <TMessage extends IMessage = IMessage>(
    props: MessageContainerProps<TMessage>
) => React.JSX.Element;

function MessageImage

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

function MessageText

MessageText: <TMessage extends IMessage = IMessage>({
    currentMessage,
    optionTitles,
    position,
    containerStyle,
    textStyle,
    linkStyle: linkStyleProp,
    customTextStyle,
    parsePatterns,
    textProps,
}: MessageTextProps<TMessage>) => React.JSX.Element;

function Send

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

function SystemMessage

SystemMessage: <TMessage extends IMessage = IMessage>({
    currentMessage,
    containerStyle,
    wrapperStyle,
    textStyle,
}: 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;

Interfaces

interface ActionsProps

interface ActionsProps {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property icon

icon?: () => ReactNode;

property iconTextStyle

iconTextStyle?: StyleProp<TextStyle>;

property options

options?: {
    [key: string]: () => void;
};

property optionTintColor

optionTintColor?: string;

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

renderAvatarOnTop?: boolean;

property showAvatarForEveryMessage

showAvatarForEveryMessage?: boolean;

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 inverted

inverted?: boolean;

property isCustomViewBottom

isCustomViewBottom?: boolean;

property nextMessage

nextMessage?: TMessage;

property optionTitles

optionTitles?: string[];

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 renderUsernameOnMessage

renderUsernameOnMessage?: boolean;

property textStyle

textStyle?: LeftRightStyle<TextStyle>;

property tickStyle

tickStyle?: StyleProp<TextStyle>;

property touchableProps

touchableProps?: object;

property user

user?: User;

property usernameStyle

usernameStyle?: TextStyle;

property wrapperStyle

wrapperStyle?: LeftRightStyle<ViewStyle>;

method onLongPress

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

method onPress

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

method onQuickReply

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

method renderCustomView

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

method renderMessageAudio

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

method renderMessageImage

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

method renderMessageText

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

method renderMessageVideo

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

method renderQuickReplies

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

method renderQuickReplySend

renderQuickReplySend: () => React.ReactNode;

method renderTicks

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

method renderTime

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

method renderUsername

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

interface ComposerProps

interface ComposerProps {}

property composerHeight

composerHeight?: number;

property disableComposer

disableComposer?: boolean;

property keyboardAppearance

keyboardAppearance?: TextInputProps['keyboardAppearance'];

property multiline

multiline?: boolean;

property placeholder

placeholder?: string;

property placeholderTextColor

placeholderTextColor?: string;

property text

text?: string;

property textInputAutoFocus

textInputAutoFocus?: boolean;

property textInputProps

textInputProps?: Partial<TextInputProps>;

property textInputStyle

textInputStyle?: TextInputProps['style'];

method onInputSizeChanged

onInputSizeChanged: (layout: { width: number; height: number }) => void;

method onTextChanged

onTextChanged: (text: string) => void;

interface DayProps

interface DayProps {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property createdAt

createdAt: Date | number;

property dateFormat

dateFormat?: string;

property dateFormatCalendar

dateFormatCalendar?: object;

property textStyle

textStyle?: StyleProp<TextStyle>;

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 getLocale

getLocale: () => string;

interface IMessage

interface IMessage {}

property audio

audio?: string;

property createdAt

createdAt: Date | number;

property image

image?: string;

property pending

pending?: boolean;

property quickReplies

quickReplies?: QuickReplies;

property received

received?: boolean;

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 accessoryStyle

accessoryStyle?: StyleProp<ViewStyle>;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property icon

icon?: () => React.ReactNode;

property options

options?: {
    [key: string]: () => void;
};

property optionTintColor

optionTintColor?: string;

property primaryStyle

primaryStyle?: StyleProp<ViewStyle>;

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

method onPressActionButton

onPressActionButton: () => void;

method renderAccessory

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

method renderActions

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

method renderComposer

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

method renderSend

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

interface LeftRightStyle

interface LeftRightStyle<T> {}

property left

left?: StyleProp<T>;

property right

right?: StyleProp<T>;

interface LoadEarlierProps

interface LoadEarlierProps {}

property activityIndicatorColor

activityIndicatorColor?: string;

property activityIndicatorSize

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

property activityIndicatorStyle

activityIndicatorStyle?: StyleProp<ViewStyle>;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property isLoadingEarlier

isLoadingEarlier?: boolean;

property label

label?: string;

property textStyle

textStyle?: StyleProp<TextStyle>;

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

method onLoadEarlier

onLoadEarlier: () => void;

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 MessageContainerProps

interface MessageContainerProps<TMessage extends IMessage = IMessage> {}

property alignTop

alignTop?: boolean;

property extraData

extraData?: object;

property forwardRef

forwardRef?: RefObject<AnimatedList<TMessage>>;

property infiniteScroll

infiniteScroll?: boolean;

property inverted

inverted?: boolean;

property invertibleScrollViewProps

invertibleScrollViewProps?: object;

property isLoadingEarlier

isLoadingEarlier?: boolean;

property isScrollToBottomEnabled

isScrollToBottomEnabled?: boolean;

property isTyping

isTyping?: boolean;

property listViewProps

listViewProps?: ListViewProps;

property loadEarlier

loadEarlier?: boolean;

property messages

messages?: TMessage[];

property scrollToBottomOffset

scrollToBottomOffset?: number;

property scrollToBottomStyle

scrollToBottomStyle?: StyleProp<ViewStyle>;

property user

user?: User;

method handleOnScroll

handleOnScroll: (event: ReanimatedScrollEvent) => void;

method onLoadEarlier

onLoadEarlier: () => void;

method onQuickReply

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

method renderChatEmpty

renderChatEmpty: () => React.ReactNode;

method renderFooter

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

method renderLoadEarlier

renderLoadEarlier: (props: LoadEarlierProps) => React.ReactNode;

method renderMessage

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

method renderTypingIndicator

renderTypingIndicator: () => React.ReactNode;

method scrollToBottomComponent

scrollToBottomComponent: () => React.ReactNode;

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

property lightboxProps

lightboxProps?: LightboxProps;

interface MessageProps

interface MessageProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property inverted

inverted?: boolean;

property nextMessage

nextMessage?: TMessage;

property position

position: 'left' | 'right';

property previousMessage

previousMessage?: TMessage;

property showUserAvatar

showUserAvatar?: boolean;

property user

user: User;

method onMessageLayout

onMessageLayout: (event: LayoutChangeEvent) => void;

method renderAvatar

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

method renderBubble

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

method renderDay

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

method renderSystemMessage

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

method shouldUpdateMessage

shouldUpdateMessage: (
    props: MessageProps<IMessage>,
    nextProps: MessageProps<IMessage>
) => boolean;

interface MessageTextProps

interface MessageTextProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: LeftRightStyle<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property customTextStyle

customTextStyle?: StyleProp<TextStyle>;

property linkStyle

linkStyle?: LeftRightStyle<TextStyle>;

property optionTitles

optionTitles?: string[];

property parsePatterns

parsePatterns?: (linkStyle: TextStyle) => [];

property position

position?: 'left' | 'right';

property textProps

textProps?: TextProps;

property textStyle

textStyle?: LeftRightStyle<TextStyle>;

interface MessageVideoProps

interface MessageVideoProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property lightboxProps

lightboxProps?: LightboxProps;

property videoProps

videoProps?: object;

property videoStyle

videoStyle?: StyleProp<ViewStyle>;

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 SendProps

interface SendProps<TMessage extends IMessage> {}

property alwaysShowSend

alwaysShowSend?: boolean;

property children

children?: React.ReactNode;

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property disabled

disabled?: boolean;

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 SystemMessageProps

interface SystemMessageProps<TMessage extends IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property textStyle

textStyle?: StyleProp<TextStyle>;

property wrapperStyle

wrapperStyle?: StyleProp<ViewStyle>;

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 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[],
    inverted?: boolean
) => TMessage[];

function prepend

prepend: <TMessage extends IMessage>(
    currentMessages: TMessage[],
    messages: TMessage[],
    inverted?: 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;

Dependencies (8)

Peer Dependencies (4)

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 7 months ago.
Package analyzed in 5026 ms.
Missing or incorrect documentation? Open an issue for this package.