import React, { RefObject } from 'react'; import { TextInput, StyleProp, TextStyle, ViewStyle } from 'react-native'; import { KeyboardProvider, KeyboardAvoidingViewProps } from 'react-native-keyboard-controller'; import { ActionsProps } from '../Actions'; import { AvatarProps } from '../Avatar'; import { BubbleProps } from '../Bubble'; import { ActionSheetOptions } from '../ChatContext'; import { AttachmentAction } from '../components/AttachmentSheet'; import { ComposerProps } from '../Composer'; import { ChatLabels } from '../i18n'; import { ChatIcons } from '../Icons'; import { InputToolbarProps } from '../InputToolbar'; import { MessageImageProps } from '../MessageImage'; import { AnimatedList, MessagesContainerProps } from '../MessagesContainer'; import { MessageTextProps } from '../MessageText'; import { AudioRecordingProps, IMessage, LeftRightStyle, MessageAudioProps, MessageLocationProps, MessageMenuItem, MessageVideoProps, User, VideoRecordingProps } from '../Models'; import { QuickRepliesProps } from '../QuickReplies'; import { ReactionsProps } from '../Reactions'; import { ReplyProps } from '../Reply'; import { SendProps } from '../Send'; import { SystemMessageProps } from '../SystemMessage'; import { PartialChatTheme } from '../Theme'; import { TimeProps } from '../Time'; export interface ChatProps extends Partial, 'messageReplyContainerStyle'>> { messagesContainerRef?: RefObject>; textInputRef?: RefObject; isUsernameVisible?: boolean; messagesContainerStyle?: StyleProp; text?: string; initialText?: string; user?: User; locale?: string; /** * Force right-to-left layout on or off. Defaults to auto-detecting from `locale` (Arabic, * Hebrew, Persian, Urdu, and a few others). Set this to override the guess - e.g. `true` for * an RTL language not in the auto-detected set, or `false` to keep LTR layout for one of them. */ forceRTL?: boolean; colorScheme?: 'light' | 'dark'; theme?: PartialChatTheme; darkTheme?: PartialChatTheme; icons?: ChatIcons; labels?: Partial; timeFormat?: string; dateFormat?: string; dateFormatCalendar?: object; isUserAvatarVisible?: boolean; isAvatarVisibleForEveryMessage?: boolean; isAvatarOnTop?: boolean; imageProps?: MessageImageProps; /** * @deprecated Not read anywhere - the input toolbar has no height floor. Use * `textInputProps.style` to constrain the composer instead. Will be removed * in 5.0.0. See https://github.com/kesha-antonov/react-native-chat/issues/14 */ minInputToolbarHeight?: number; textInputProps?: Partial>; isSendButtonAlwaysVisible?: boolean; imageStyle?: StyleProp; /** * @deprecated Not read anywhere - `Composer` derives its minimum from its own * stylesheet and grows via `onContentSizeChange`. Use `textInputProps.style` * to constrain the composer instead. Will be removed in 5.0.0. * See https://github.com/kesha-antonov/react-native-chat/issues/14 */ minComposerHeight?: number; /** * @deprecated Not read anywhere. Use `textInputProps.style` to constrain the * composer instead. Will be removed in 5.0.0. * See https://github.com/kesha-antonov/react-native-chat/issues/14 */ maxComposerHeight?: number; actions?: AttachmentAction[]; actionSheetOptionTintColor?: string; quickReplyStyle?: StyleProp; quickReplyTextStyle?: StyleProp; quickReplyContainerStyle?: StyleProp; isCustomViewBottom?: boolean; timeTextStyle?: LeftRightStyle; actionSheet?: () => { showActionSheetWithOptions: (options: ActionSheetOptions, callback: (buttonIndex: number) => void | Promise) => void; }; onPressAvatar?: (user: User) => void; onLongPressAvatar?: (user: User) => void; messageIdGenerator?: (message?: TMessage) => string; onSend?: (messages: TMessage[]) => void; renderLoading?: () => React.ReactNode; renderAvatar?: null | ((props: AvatarProps) => React.ReactNode); renderBubble?: (props: BubbleProps) => React.ReactNode; renderSystemMessage?: (props: SystemMessageProps) => React.ReactNode; onPressMessage?: (context: unknown, message: TMessage) => void; onLongPressMessage?: (context: unknown, message: TMessage) => void; renderUsername?: (user: User) => React.ReactNode; renderMessageText?: (messageText: MessageTextProps) => React.ReactNode; renderMessageImage?: (props: MessageImageProps) => React.ReactNode; renderMessageVideo?: (props: MessageVideoProps) => React.ReactNode; renderMessageAudio?: (props: MessageAudioProps) => React.ReactNode; renderMessageLocation?: (props: MessageLocationProps) => React.ReactNode; renderCustomView?: (props: BubbleProps) => React.ReactNode; renderTime?: (props: TimeProps) => React.ReactNode; renderChatFooter?: () => React.ReactNode; renderInputToolbar?: React.ComponentType> | React.ReactElement | ((props: InputToolbarProps) => React.ReactNode) | null; renderComposer?: (props: ComposerProps) => React.ReactNode; renderActions?: (props: ActionsProps) => React.ReactNode; renderSend?: (props: SendProps) => React.ReactNode; renderAccessory?: (props: InputToolbarProps) => React.ReactNode; onPressActionButton?: () => void; messageTextProps?: Partial>; renderQuickReplies?: (quickReplies: QuickRepliesProps) => React.ReactNode; renderQuickReplySend?: () => React.ReactNode; keyboardProviderProps?: React.ComponentProps; /** * Render the built-in `KeyboardProvider` wrapper. * Turn this off when your app already mounts its own `KeyboardProvider` * (e.g. once at the root), or when the default `statusBarTranslucent` / * `navigationBarTranslucent` edge-to-edge behavior causes layout shift, * flicker on mount, or a header/content jump on Android/Expo. * Default is `true`. */ enableKeyboardProvider?: boolean; /** Props for KeyboardAvoidingView. Use `keyboardVerticalOffset` to account for headers or iOS predictive text bar (~44pt). */ keyboardAvoidingViewProps?: KeyboardAvoidingViewProps; /** * Render the `GestureHandlerRootView` Chat mounts around itself. Unlike * `KeyboardProvider`, an existing `GestureHandlerRootView` can't be detected from * here - `react-native-gesture-handler` doesn't expose that publicly - so turn * this off yourself when your app (or a library it uses, e.g. a bottom sheet) * already mounts one at the root. Nesting a second one is not just redundant: it * changes the native view hierarchy around the composer, which has been observed * to make a rare Fabric/Yoga layout assertion on iOS more likely (#17). Default is * `true`. */ enableGestureHandlerRootView?: boolean; /** Enable animated day label that appears on scroll; default is true */ isDayAnimationEnabled?: boolean; /** Reply functionality configuration */ reply?: ReplyProps; /** Emoji reactions configuration */ reactions?: ReactionsProps; /** Telegram-style long-press context menu actions (array or per-message function) */ messageActions?: MessageMenuItem[] | ((message: TMessage) => MessageMenuItem[]); /** * Controls whether message bubbles attach the tap / long-press gestures that * `reactions` and `messageActions` rely on. Pass `false` (or a predicate * returning `false`) for messages rendering natively interactive content - * a video player with its own controls, a map, a WebView - whose touches * must not compete with the bubble. * Note: with gestures off, those messages can no longer open the reaction * picker or the context menu. * @default true */ isMessageGestureEnabled?: boolean | ((message: TMessage) => boolean); /** Show an emoji button inset on the left of the composer field; called on press */ onPressEmoji?: () => void; /** * Whether the composer accepts multiple lines. `true` (default) keeps the * return key inserting a newline; `false` turns it into Send. */ isMultiline?: boolean; /** Telegram-style hold-to-record voice messages (needs optional expo-audio) */ audioRecording?: AudioRecordingProps; /** Record-and-send video messages from the camera (needs optional expo-image-picker) */ videoRecording?: VideoRecordingProps; } //# sourceMappingURL=types.d.ts.map