react-native-gifted-chat

react-native-gifted-chat

Version 2.6.4
Published 1 month ago
410 kB
10 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 DATE_FORMAT

const DATE_FORMAT: string;

variable DEFAULT_PLACEHOLDER

const DEFAULT_PLACEHOLDER: string;

variable GiftedChatContext

const GiftedChatContext: React.Context<IGiftedChatContext>;

variable MAX_COMPOSER_HEIGHT

const MAX_COMPOSER_HEIGHT: number;

variable MIN_COMPOSER_HEIGHT

const MIN_COMPOSER_HEIGHT: number;

variable Send

const Send: {
    <TMessage extends IMessage = IMessage>({
        text,
        containerStyle,
        children,
        textStyle,
        label,
        alwaysShowSend,
        disabled,
        sendButtonProps,
        onSend,
    }: SendProps<TMessage>): React.JSX.Element | null;
    propTypes: {
        text: PropTypes.Requireable<string>;
        onSend: PropTypes.Requireable<(...args: any[]) => any>;
        label: PropTypes.Requireable<string>;
        containerStyle: PropTypes.Requireable<number | boolean | object>;
        textStyle: PropTypes.Requireable<number | boolean | object>;
        children: PropTypes.Requireable<PropTypes.ReactElementLike>;
        alwaysShowSend: PropTypes.Requireable<boolean>;
        disabled: PropTypes.Requireable<boolean>;
        sendButtonProps: PropTypes.Requireable<object>;
    };
};

variable StylePropType

const StylePropType: PropTypes.Requireable<number | boolean | object>;

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: typeof Actions;

function Avatar

Avatar: typeof Avatar;

function Composer

Composer: typeof Composer;

function Day

Day: <TMessage extends IMessage = IMessage>({
    dateFormat,
    currentMessage,
    previousMessage,
    containerStyle,
    wrapperStyle,
    textStyle,
}: DayProps<TMessage>) => React.JSX.Element | null;

function GiftedAvatar

GiftedAvatar: typeof GiftedAvatar;

function GiftedChat

GiftedChat: typeof GiftedChat;

function InputToolbar

InputToolbar: typeof InputToolbar;

function isSameDay

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

function isSameUser

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

function LoadEarlier

LoadEarlier: typeof LoadEarlier;

function MessageImage

MessageImage: typeof MessageImage;

function MessageText

MessageText: typeof MessageText;

function SystemMessage

SystemMessage: typeof SystemMessage;

function Time

Time: typeof Time;

function useChatContext

useChatContext: () => IGiftedChatContext;

Classes

class Bubble

class Bubble<TMessage extends IMessage = IMessage> extends React.Component<
    BubbleProps<TMessage>
> {}

property contextType

static contextType: React.Context<IGiftedChatContext>;

property defaultProps

static defaultProps: {
    touchableProps: {};
    onPress: null;
    onLongPress: null;
    renderMessageImage: null;
    renderMessageVideo: null;
    renderMessageAudio: null;
    renderMessageText: null;
    renderCustomView: null;
    renderUsername: null;
    renderTicks: null;
    renderTime: null;
    renderQuickReplies: null;
    onQuickReply: null;
    position: string;
    currentMessage: { text: null; createdAt: null; image: null };
    nextMessage: {};
    previousMessage: {};
    containerStyle: {};
    wrapperStyle: {};
    bottomContainerStyle: {};
    tickStyle: {};
    usernameStyle: {};
    containerToNextStyle: {};
    containerToPreviousStyle: {};
};

property onLongPress

onLongPress: () => void;

property onPress

onPress: () => void;

property propTypes

static propTypes: {
    user: PropTypes.Validator<object>;
    touchableProps: PropTypes.Requireable<object>;
    onLongPress: PropTypes.Requireable<(...args: any[]) => any>;
    renderMessageImage: PropTypes.Requireable<(...args: any[]) => any>;
    renderMessageVideo: PropTypes.Requireable<(...args: any[]) => any>;
    renderMessageAudio: PropTypes.Requireable<(...args: any[]) => any>;
    renderMessageText: PropTypes.Requireable<(...args: any[]) => any>;
    renderCustomView: PropTypes.Requireable<(...args: any[]) => any>;
    isCustomViewBottom: PropTypes.Requireable<boolean>;
    renderUsernameOnMessage: PropTypes.Requireable<boolean>;
    renderUsername: PropTypes.Requireable<(...args: any[]) => any>;
    renderTime: PropTypes.Requireable<(...args: any[]) => any>;
    renderTicks: PropTypes.Requireable<(...args: any[]) => any>;
    renderQuickReplies: PropTypes.Requireable<(...args: any[]) => any>;
    onQuickReply: PropTypes.Requireable<(...args: any[]) => any>;
    position: PropTypes.Requireable<string>;
    optionTitles: PropTypes.Requireable<string[]>;
    currentMessage: PropTypes.Requireable<object>;
    nextMessage: PropTypes.Requireable<object>;
    previousMessage: PropTypes.Requireable<object>;
    containerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    wrapperStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    bottomContainerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    tickStyle: PropTypes.Requireable<number | boolean | object>;
    usernameStyle: PropTypes.Requireable<number | boolean | object>;
    containerToNextStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    containerToPreviousStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
};

method render

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

method renderBubbleContent

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

method renderCustomView

renderCustomView: () => React.ReactNode;

method renderMessageAudio

renderMessageAudio: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderMessageImage

renderMessageImage: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderMessageText

renderMessageText: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderMessageVideo

renderMessageVideo: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderQuickReplies

renderQuickReplies: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderTicks

renderTicks: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderTime

renderTime: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderUsername

renderUsername: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method styledBubbleToNext

styledBubbleToNext: () =>
    | (
          | StyleProp<ViewStyle>
          | { borderBottomLeftRadius: number }
          | { borderBottomRightRadius: number }
      )[]
    | null;

method styledBubbleToPrevious

styledBubbleToPrevious: () =>
    | (
          | StyleProp<ViewStyle>
          | { borderTopLeftRadius: number }
          | { borderTopRightRadius: number }
      )[]
    | null;

class Message

class Message<TMessage extends IMessage = IMessage> extends React.Component<
    MessageProps<TMessage>
> {}

property defaultProps

static defaultProps: {
    renderAvatar: undefined;
    renderBubble: null;
    renderDay: null;
    renderSystemMessage: null;
    position: string;
    currentMessage: {};
    nextMessage: {};
    previousMessage: {};
    user: {};
    containerStyle: {};
    showUserAvatar: boolean;
    inverted: boolean;
    shouldUpdateMessage: undefined;
    onMessageLayout: undefined;
};

property propTypes

static propTypes: {
    renderAvatar: PropTypes.Requireable<(...args: any[]) => any>;
    showUserAvatar: PropTypes.Requireable<boolean>;
    renderBubble: PropTypes.Requireable<(...args: any[]) => any>;
    renderDay: PropTypes.Requireable<(...args: any[]) => any>;
    renderSystemMessage: PropTypes.Requireable<(...args: any[]) => any>;
    position: PropTypes.Requireable<string>;
    currentMessage: PropTypes.Requireable<object>;
    nextMessage: PropTypes.Requireable<object>;
    previousMessage: PropTypes.Requireable<object>;
    user: PropTypes.Requireable<object>;
    inverted: PropTypes.Requireable<boolean>;
    containerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    shouldUpdateMessage: PropTypes.Requireable<(...args: any[]) => any>;
    onMessageLayout: PropTypes.Requireable<(...args: any[]) => any>;
};

method render

render: () => React.JSX.Element | null;

method renderAvatar

renderAvatar: () => React.JSX.Element | null;

method renderBubble

renderBubble: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderDay

renderDay: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderSystemMessage

renderSystemMessage: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method shouldComponentUpdate

shouldComponentUpdate: (nextProps: MessageProps<TMessage>) => boolean;

class MessageContainer

class MessageContainer<
    TMessage extends IMessage = IMessage
> extends React.PureComponent<MessageContainerProps<TMessage>, State> {}

property defaultProps

static defaultProps: {
    messages: never[];
    user: {};
    isTyping: boolean;
    renderChatEmpty: null;
    renderFooter: null;
    renderMessage: null;
    onLoadEarlier: () => void;
    onQuickReply: () => void;
    inverted: boolean;
    loadEarlier: boolean;
    listViewProps: {};
    invertibleScrollViewProps: {};
    extraData: null;
    scrollToBottom: boolean;
    scrollToBottomOffset: number;
    alignTop: boolean;
    scrollToBottomStyle: {};
    infiniteScroll: boolean;
    isLoadingEarlier: boolean;
};

property handleOnScroll

handleOnScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;

property keyExtractor

keyExtractor: (item: TMessage) => string;

property onEndReached

onEndReached: ({ distanceFromEnd }: { distanceFromEnd: number }) => void;

property onLayoutList

onLayoutList: () => void;

property propTypes

static propTypes: {
    messages: PropTypes.Requireable<object[]>;
    isTyping: PropTypes.Requireable<boolean>;
    user: PropTypes.Requireable<object>;
    renderChatEmpty: PropTypes.Requireable<(...args: any[]) => any>;
    renderFooter: PropTypes.Requireable<(...args: any[]) => any>;
    renderMessage: PropTypes.Requireable<(...args: any[]) => any>;
    renderLoadEarlier: PropTypes.Requireable<(...args: any[]) => any>;
    onLoadEarlier: PropTypes.Requireable<(...args: any[]) => any>;
    listViewProps: PropTypes.Requireable<object>;
    inverted: PropTypes.Requireable<boolean>;
    loadEarlier: PropTypes.Requireable<boolean>;
    invertibleScrollViewProps: PropTypes.Requireable<object>;
    extraData: PropTypes.Requireable<object>;
    scrollToBottom: PropTypes.Requireable<boolean>;
    scrollToBottomOffset: PropTypes.Requireable<number>;
    scrollToBottomComponent: PropTypes.Requireable<(...args: any[]) => any>;
    alignTop: PropTypes.Requireable<boolean>;
    scrollToBottomStyle: PropTypes.Requireable<number | boolean | object>;
    infiniteScroll: PropTypes.Requireable<boolean>;
};

property renderChatEmpty

renderChatEmpty: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

property renderFooter

renderFooter: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

property renderHeaderWrapper

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

property renderLoadEarlier

renderLoadEarlier: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

property renderRow

renderRow: ({
    item,
    index,
}: ListRenderItemInfo<TMessage>) => React.ReactElement | null;

property renderTypingIndicator

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

property scrollToBottom

scrollToBottom: (animated?: boolean) => void;

property state

state: { showScrollBottom: boolean; hasScrolled: boolean };

method render

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

method renderScrollBottomComponent

renderScrollBottomComponent: () =>
    | string
    | number
    | boolean
    | React.JSX.Element
    | Iterable<React.ReactNode>
    | null
    | undefined;

method renderScrollToBottomWrapper

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

method scrollTo

scrollTo: (options: { animated?: boolean; offset: number }) => void;

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<TMessage extends IMessage = IMessage> {}

property containerStyle

containerStyle?: StyleProp<ViewStyle>;

property currentMessage

currentMessage: TMessage;

property dateFormat

dateFormat?: string;

property inverted

inverted?: boolean;

property nextMessage

nextMessage?: TMessage;

property previousMessage

previousMessage?: TMessage;

property textProps

textProps?: TextProps;

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 GiftedChatProps

interface GiftedChatProps<TMessage extends IMessage = IMessage> {}

property alignTop

alignTop?: boolean;

property alwaysShowSend

alwaysShowSend?: boolean;

property bottomOffset

bottomOffset?: number;

property dateFormat

dateFormat?: string;

property disableComposer

disableComposer?: boolean;

property extraData

extraData?: object;

property imageProps

imageProps?: Message<TMessage>['props'];

property imageStyle

imageStyle?: StyleProp<ViewStyle>;

property infiniteScroll

infiniteScroll?: boolean;

property initialText

initialText?: string;

property inverted

inverted?: boolean;

property isCustomViewBottom

isCustomViewBottom?: boolean;

property isLoadingEarlier

isLoadingEarlier?: boolean;

property isStatusBarTranslucentAndroid

isStatusBarTranslucentAndroid?: boolean;

If you use translucent status bar on Android, set this option to true. Ignored on iOS.

property isTyping

isTyping?: boolean;

property keyboardShouldPersistTaps

keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';

property lightboxProps

lightboxProps?: LightboxProps;

property listViewProps

listViewProps?: object;

property loadEarlier

loadEarlier?: boolean;

property locale

locale?: string;

property maxComposerHeight

maxComposerHeight?: number;

property maxInputLength

maxInputLength?: number;

property messageContainerRef

messageContainerRef?: React.RefObject<FlatList<IMessage>>;

property messages

messages?: TMessage[];

property messagesContainerStyle

messagesContainerStyle?: StyleProp<ViewStyle>;

property minComposerHeight

minComposerHeight?: number;

property minInputToolbarHeight

minInputToolbarHeight?: number;

property options

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

property optionTintColor

optionTintColor?: string;

property parsePatterns

parsePatterns?: (linkStyle?: TextStyle) => {
    type?: string;
    pattern?: RegExp;
    style?: StyleProp<TextStyle> | object;
    onPress?: unknown;
    renderText?: unknown;
}[];

property placeholder

placeholder?: string;

property quickReplyContainerStyle

quickReplyContainerStyle?: StyleProp<ViewStyle>;

property quickReplyStyle

quickReplyStyle?: StyleProp<ViewStyle>;

property quickReplyTextStyle

quickReplyTextStyle?: StyleProp<TextStyle>;

property renderAvatar

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

property renderAvatarOnTop

renderAvatarOnTop?: boolean;

property renderUsernameOnMessage

renderUsernameOnMessage?: boolean;

property scrollToBottom

scrollToBottom?: boolean;

property scrollToBottomStyle

scrollToBottomStyle?: StyleProp<ViewStyle>;

property showAvatarForEveryMessage

showAvatarForEveryMessage?: boolean;

property showUserAvatar

showUserAvatar?: boolean;

property text

text?: string;

property textInputProps

textInputProps?: object;

property textInputRef

textInputRef?: React.RefObject<TextInput>;

property timeFormat

timeFormat?: string;

property timeTextStyle

timeTextStyle?: LeftRightStyle<TextStyle>;

property user

user?: User;

method actionSheet

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

method messageIdGenerator

messageIdGenerator: (message?: TMessage) => string;

method onInputTextChanged

onInputTextChanged: (text: string) => void;

method onLoadEarlier

onLoadEarlier: () => void;

method onLongPress

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

method onLongPressAvatar

onLongPressAvatar: (user: User) => void;

method onPress

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

method onPressActionButton

onPressActionButton: () => void;

method onPressAvatar

onPressAvatar: (user: User) => void;

method onQuickReply

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

method onSend

onSend: (messages: TMessage[]) => void;

method renderAccessory

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

method renderActions

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

method renderBubble

renderBubble: (props: any) => React.ReactNode;

method renderChatEmpty

renderChatEmpty: () => React.ReactNode;

method renderChatFooter

renderChatFooter: () => React.ReactNode;

method renderComposer

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

method renderCustomView

renderCustomView: (props: any) => React.ReactNode;

method renderDay

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

method renderFooter

renderFooter: () => React.ReactNode;

method renderInputToolbar

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

method renderLoadEarlier

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

method renderLoading

renderLoading: () => React.ReactNode;

method renderMessage

renderMessage: (message: any) => React.ReactElement;

method renderMessageAudio

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

method renderMessageImage

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

method renderMessageText

renderMessageText: (messageText: MessageTextProps<TMessage>) => React.ReactNode;

method renderMessageVideo

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

method renderQuickReplies

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

method renderQuickReplySend

renderQuickReplySend: () => React.ReactNode;

method renderSend

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

method renderSystemMessage

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

method renderTime

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

method renderUsername

renderUsername: (user: User) => React.ReactNode;

method scrollToBottomComponent

scrollToBottomComponent: () => React.ReactNode;

method shouldUpdateMessage

shouldUpdateMessage: (props: any, nextProps: any) => boolean;

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> {}

property alignTop

alignTop?: boolean;

property extraData

extraData?: object;

property forwardRef

forwardRef?: RefObject<FlatList<TMessage>>;

property infiniteScroll

infiniteScroll?: boolean;

property inverted

inverted?: boolean;

property invertibleScrollViewProps

invertibleScrollViewProps?: object;

property isLoadingEarlier

isLoadingEarlier?: boolean;

property isTyping

isTyping?: boolean;

property listViewProps

listViewProps: object;

property loadEarlier

loadEarlier?: boolean;

property messages

messages?: TMessage[];

property scrollToBottom

scrollToBottom?: boolean;

property scrollToBottomOffset

scrollToBottomOffset?: number;

property scrollToBottomStyle

scrollToBottomStyle?: StyleProp<ViewStyle>;

property user

user?: User;

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: any) => React.ReactElement;

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: any) => React.ReactNode;

method renderDay

renderDay: (props: DayProps<TMessage>) => 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 Actions

namespace Actions {}

variable propTypes

var propTypes: {
    options: PropTypes.Requireable<object>;
    optionTintColor: PropTypes.Requireable<string>;
    icon: PropTypes.Requireable<(...args: any[]) => any>;
    onPressActionButton: PropTypes.Requireable<(...args: any[]) => any>;
    wrapperStyle: PropTypes.Requireable<number | boolean | object>;
    containerStyle: PropTypes.Requireable<number | boolean | object>;
};

namespace Avatar

namespace Avatar {}

variable propTypes

var propTypes: {
    renderAvatarOnTop: PropTypes.Requireable<boolean>;
    showAvatarForEveryMessage: PropTypes.Requireable<boolean>;
    position: PropTypes.Requireable<string>;
    currentMessage: PropTypes.Requireable<object>;
    previousMessage: PropTypes.Requireable<object>;
    nextMessage: PropTypes.Requireable<object>;
    onPressAvatar: PropTypes.Requireable<(...args: any[]) => any>;
    onLongPressAvatar: PropTypes.Requireable<(...args: any[]) => any>;
    renderAvatar: PropTypes.Requireable<(...args: any[]) => any>;
    containerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    imageStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
};

namespace Composer

namespace Composer {}

variable propTypes

var propTypes: {
    composerHeight: PropTypes.Requireable<number>;
    text: PropTypes.Requireable<string>;
    placeholder: PropTypes.Requireable<string>;
    placeholderTextColor: PropTypes.Requireable<string>;
    textInputProps: PropTypes.Requireable<object>;
    onTextChanged: PropTypes.Requireable<(...args: any[]) => any>;
    onInputSizeChanged: PropTypes.Requireable<(...args: any[]) => any>;
    multiline: PropTypes.Requireable<boolean>;
    disableComposer: PropTypes.Requireable<boolean>;
    textInputStyle: PropTypes.Requireable<number | boolean | object>;
    textInputAutoFocus: PropTypes.Requireable<boolean>;
    keyboardAppearance: PropTypes.Requireable<string>;
};

namespace GiftedAvatar

namespace GiftedAvatar {}

variable propTypes

var propTypes: {
    user: PropTypes.Requireable<object>;
    onPress: PropTypes.Requireable<(...args: any[]) => any>;
    onLongPress: PropTypes.Requireable<(...args: any[]) => any>;
    avatarStyle: PropTypes.Requireable<number | boolean | object>;
    textStyle: PropTypes.Requireable<number | boolean | object>;
};

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 InputToolbar

namespace InputToolbar {}

variable propTypes

var propTypes: {
    renderAccessory: PropTypes.Requireable<(...args: any[]) => any>;
    renderActions: PropTypes.Requireable<(...args: any[]) => any>;
    renderSend: PropTypes.Requireable<(...args: any[]) => any>;
    renderComposer: PropTypes.Requireable<(...args: any[]) => any>;
    onPressActionButton: PropTypes.Requireable<(...args: any[]) => any>;
    containerStyle: PropTypes.Requireable<number | boolean | object>;
    primaryStyle: PropTypes.Requireable<number | boolean | object>;
    accessoryStyle: PropTypes.Requireable<number | boolean | object>;
};

namespace LoadEarlier

namespace LoadEarlier {}

variable propTypes

var propTypes: {
    onLoadEarlier: PropTypes.Requireable<(...args: any[]) => any>;
    isLoadingEarlier: PropTypes.Requireable<boolean>;
    label: PropTypes.Requireable<string>;
    containerStyle: PropTypes.Requireable<number | boolean | object>;
    wrapperStyle: PropTypes.Requireable<number | boolean | object>;
    textStyle: PropTypes.Requireable<number | boolean | object>;
    activityIndicatorStyle: PropTypes.Requireable<number | boolean | object>;
    activityIndicatorColor: PropTypes.Requireable<string>;
    activityIndicatorSize: PropTypes.Requireable<string>;
};

namespace MessageImage

namespace MessageImage {}

variable propTypes

var propTypes: {
    currentMessage: PropTypes.Requireable<object>;
    containerStyle: PropTypes.Requireable<number | boolean | object>;
    imageSourceProps: PropTypes.Requireable<object>;
    imageStyle: PropTypes.Requireable<number | boolean | object>;
    imageProps: PropTypes.Requireable<object>;
    lightboxProps: PropTypes.Requireable<object>;
};

namespace MessageText

namespace MessageText {}

variable propTypes

var propTypes: {
    position: PropTypes.Requireable<string>;
    optionTitles: PropTypes.Requireable<string[]>;
    currentMessage: PropTypes.Requireable<object>;
    containerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    textStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    linkStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    parsePatterns: PropTypes.Requireable<(...args: any[]) => any>;
    textProps: PropTypes.Requireable<object>;
    customTextStyle: PropTypes.Requireable<number | boolean | object>;
};

namespace SystemMessage

namespace SystemMessage {}

variable propTypes

var propTypes: {
    currentMessage: PropTypes.Requireable<object>;
    containerStyle: PropTypes.Requireable<number | boolean | object>;
    wrapperStyle: PropTypes.Requireable<number | boolean | object>;
    textStyle: PropTypes.Requireable<number | boolean | object>;
};

namespace Time

namespace Time {}

variable propTypes

var propTypes: {
    position: PropTypes.Requireable<string>;
    currentMessage: PropTypes.Requireable<object>;
    containerStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
    timeFormat: PropTypes.Requireable<string>;
    timeTextStyle: PropTypes.Requireable<
        PropTypes.InferProps<{
            left: PropTypes.Requireable<number | boolean | object>;
            right: PropTypes.Requireable<number | boolean | object>;
        }>
    >;
};

namespace utils

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

variable StylePropType

const StylePropType: PropTypes.Requireable<number | boolean | object>;

function isSameDay

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

function isSameUser

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

Dependencies (10)

Peer Dependencies (5)

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