react-native-gifted-chat
- Version 3.3.2
- Published
- 261 kB
- 5 dependencies
- MIT license
Install
npm i react-native-gifted-chatyarn add react-native-gifted-chatpnpm add react-native-gifted-chatOverview
The most complete chat UI for React Native
Index
Variables
Functions
Interfaces
Type Aliases
Namespaces
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> {}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 {}interface Reply
interface Reply {}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
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)
- @babel/core
- @babel/plugin-transform-react-jsx
- @babel/plugin-transform-unicode-property-regex
- @babel/preset-env
- @react-native-community/cli
- @react-native-community/cli-platform-android
- @react-native-community/cli-platform-ios
- @react-native/babel-preset
- @react-native/eslint-config
- @react-native/metro-config
- @react-native/typescript-config
- @stylistic/eslint-plugin
- @testing-library/dom
- @testing-library/react
- @testing-library/react-native
- @types/jest
- @types/react
- @types/react-dom
- @types/react-native
- @types/react-test-renderer
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- babel-jest
- eslint
- eslint-import-resolver-typescript
- eslint-plugin-import
- eslint-plugin-jest
- eslint-plugin-perfectionist
- eslint-plugin-react
- eslint-plugin-react-hooks
- husky
- jest
- json
- lint-staged
- react
- react-dom
- react-native
- react-native-gesture-handler
- react-native-keyboard-controller
- react-native-reanimated
- react-native-safe-area-context
- react-native-worklets
- react-test-renderer
- typescript
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[](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 .
Package analyzed in 3718 ms. - Missing or incorrect documentation? Open an issue for this package.
