react-native-gifted-chat

  • Version 3.3.2
  • Published
  • 261 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 DATE_FORMAT

const DATE_FORMAT: string;

    variable GiftedChatContext

    const GiftedChatContext: any;

      variable TEST_ID

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

        variable TIME_FORMAT

        const TIME_FORMAT: string;

          Functions

          function useChatContext

          useChatContext: () => any;

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

                                                interface LeftRightStyle<T> {}

                                                  property left

                                                  left?: StyleProp<T>;

                                                    property right

                                                    right?: StyleProp<T>;

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

                                                                          interface QuickReplies {}

                                                                            property keepIt

                                                                            keepIt?: boolean;

                                                                              property type

                                                                              type: 'radio' | 'checkbox';

                                                                                property values

                                                                                values: Reply[];

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

                                                                                                      Namespaces

                                                                                                      namespace utils

                                                                                                      module 'src/utils.ts' {}

                                                                                                        function isSameDay

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

                                                                                                          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,
                                                                                                              time: number
                                                                                                              ) => (...args: Parameters<T>) => void;

                                                                                                                function useCallbackThrottled

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

                                                                                                                  Package Files (7)

                                                                                                                  Dependencies (5)

                                                                                                                  Dev Dependencies (44)

                                                                                                                  Peer Dependencies (6)

                                                                                                                  Badge

                                                                                                                  To add a badge like this onejsDocs.io badgeto 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>