index.d.ts

import * as React from "react";
import {
  TextStyle,
  ViewStyle,
  TextInputProperties,
  TextInput,
  ImageStyle,
  ListView,
  ListViewProperties,
  ImageProperties,
  TextProperties
} from "react-native";

declare module "react-native-gifted-chat" {
  interface LeftRightStyle<T> {
    left: T;
    right: T;
  }

  export interface User {
    _id: any;
    name?: string;
    avatar?: string;
  }

  interface ChatMessage {
    _id: any;
    text: string;
    createdAt: Date;
    user: {
      _id: any;
      name: string;
      avatar: string;
    };
  }

  interface SystemMessage {
    _id: any;
    text: string;
    createdAt: Date;
    system: true;
  }

  type IMessage = ChatMessage | SystemMessage;

  interface ActionsProps {
    // todo: onSend is not used
    onSend?(): void;
    options?: any;
    optionTintColor?: string;
    icon?(): void;
    wrapperStyle?: ViewStyle;
    containerStyle?: ViewStyle;
    iconTextStyle?: ViewStyle;
  }

  export class Actions extends React.Component<ActionsProps> {}

  interface AvatarProps {
    renderAvatarOnTop: boolean;
    position: "left" | "right";
    currentMessage: IMessage;
    previousMessage: IMessage;
    nextMessage: IMessage;
    onPressAvatar(): void;
    renderAvatar(props: AvatarProps): JSX.Element;
    containerStyle: {
      left: any;
      right: any;
    };
    imageStyle: {
      left: any;
      right: any;
    };
    // TODO: remove in next major release
    isSameDay(currentMessage: IMessage, message: IMessage): boolean;
    isSameUser(currentMessage: IMessage, message: IMessage): boolean;
  }

  class Avatar extends React.Component<AvatarProps> {}

  interface BubbleProps {
    user: User;
    touchableProps?: object;
    onLongPress?(): void;
    renderMessageImage?(messageImageProps: MessageImageProps): JSX.Element;
    renderMessageText?(messageTextProps: MessageTextProps): JSX.Element;
    renderCustomView?(bubbleProps: BubbleProps): JSX.Element;
    renderTime?(timeProps: TimeProps): JSX.Element;
    renderTicks?(currentMessage: IMessage): JSX.Element;
    position?: "left" | "right";
    currentMessage?: IMessage;
    nextMessage?: IMessage;
    previousMessage?: IMessage;
    containerStyle?: LeftRightStyle<ViewStyle>;
    wrapperStyle: LeftRightStyle<ViewStyle>;
    bottomContainerStyle: LeftRightStyle<ViewStyle>;
    tickStyle: TextStyle;
    containerToNextStyle: LeftRightStyle<ViewStyle>;
    containertoPreviousStyle: LeftRightStyle<ViewStyle>;
    // TODO: remove in next major release
    isSameDay?(currentMessage: IMessage, inextMessage: IMessage): boolean;
    isSameUser?(currentMessage: IMessage, nextMessage: IMessage): boolean;
  }

  class Bubble extends React.Component<BubbleProps> {}

  interface ComposerProps {
    composerHeight?: number;
    text?: string;
    placeholder?: string;
    placeholderTextCoolor?: string;
    textInputProps?: Partial<TextInputProperties>;
    onTextChanged?(text: string): void;
    onInputSizeChanged?(contentSize: number): void;
    multiline?: boolean;
    textInputStyle?: TextInputProperties["style"];
    textInputAutoFocus?: boolean;
    keyboardAppearance: TextInputProperties["keyboardAppearance"];
  }

  class Composer extends React.Component<ComposerProps> {}

  interface DayProps {
    currentMessage?: IMessage;
    previousMessage?: IMessage;
    containerStyle?: ViewStyle;
    wrapperStyle?: ViewStyle;
    textStyle?: TextStyle;
    // TODO: remove in next major release
    isSameDay?(currentMessage: IMessage, inextMessage: IMessage): boolean;
    isSameUser?(currentMessage: IMessage, nextMessage: IMessage): boolean;
    dateFormat?: string;
  }

  export class Day extends React.Component<DayProps> {}

  interface GiftedAvatarProps {
    user?: User;
    onPress?(): void;
    avatarStyle?: ImageStyle;
    textStyle?: TextStyle;
  }

  class GiftedAvatarProps extends React.Component<GiftedAvatarProps> {}

  export interface GiftedChatProps {
    /* Messages to display */
    messages?: any[];
    /* Input text; default is undefined, but if specified, it will override GiftedChat's internal state */
    text?: string;
    /* Placeholder when text is empty; default is 'Type a message...' */
    placeholder?: string;
    /* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
    messageIdGenerator?<T extends any>(message: T): string;
    /* User sending the messages: { _id, name, avatar } */
    user?: User;
    /* Callback when sending a message */
    onSend<T extends any>(messages: T[]): void;
    /*  Locale to localize the dates */
    locale?: string;
    /* Format to use for rendering times; default is 'LT' */
    timeFormat?: string;
    /* Format to use for rendering dates; default is 'll' */
    dateFormat?: string;
    /* Animates the view when the keyboard appears */
    isAnimated?: boolean;
    /* Enables the "Load earlier messages" button */
    loadEarlier?: boolean;
    /*Callback when loading earlier messages*/
    onLoadEarlier?(): void;
    /*Display an ActivityIndicator when loading earlier messages*/
    isLoadingEarlier?: boolean;
    /*  Render a loading view when initializing */
    renderLoading?(): JSX.Element;
    /* Custom "Load earlier messages" button */
    renderLoadEarlier?(props: LoadEarlierProps): JSX.Element;
    /* Custom message avatar; set to null to not render any avatar for the message */
    renderAvatar?(props: AvatarProps): JSX.Element;
    /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
    showUserAvatar?: boolean;
    /* Callback when a message avatar is tapped */
    onPressAvatar?(user: User): void;
    /* Render the message avatar at the top of consecutive messages, rather than the bottom; default is false */
    renderAvatarOnTop?: boolean;
    /* Custom message bubble */
    renderBubble?(props: BubbleProps): JSX.Element;
    /*Custom system message */
    renderSystemMessage?(): JSX.Element;
    /* Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions()) */
    onLongPress?(context: any, message: any): void;
    /* Reverses display order of messages; default is true */
    inverted?: boolean;
    /*Custom message container */
    renderMessage?(message: any): JSX.Element;
    /* Custom message text */
    renderMessageText?(messageText: string): JSX.Element;
    /* Custom message image */
    renderMessageImage?(props: MessageImageProps): JSX.Element;
    /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
    imageProps?: MessageProps;
    /*Extra props to be passed to the MessageImage's Lightbox */
    lightboxProps?: any;
    /* Custom view inside the bubble */
    renderCustomView?(): JSX.Element;
    /*Custom day above a message*/
    renderDay?(): JSX.Element;
    /* Custom time inside a message */
    renderTime?(): JSX.Element;
    /* Custom footer component on the ListView, e.g. 'User is typing...' */
    renderFooter?(): JSX.Element;
    /* Custom component to render below the MessageContainer (separate from the ListView) */
    renderChatFooter?(): JSX.Element;
    /* Custom message composer container */
    renderInputToolbar?(props: InputToolbarProps): JSX.Element;
    /*  Custom text input message composer */
    renderComposer?(): JSX.Element;
    /* Custom action button on the left of the message composer */
    renderActions?(): JSX.Element;
    /* Custom send button; you can pass children to the original Send component quite easily, for example to use a custom icon (example) */
    renderSend?(): JSX.Element;
    /*Custom second line of actions below the message composer */
    renderAccessory?(): JSX.Element;
    /*Callback when the Action button is pressed (if set, the default actionSheet will not be used) */
    onPressActionButton?(): void;
    /*Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar) */
    bottomOffset?: number;
    /* Minimum height of the input toolbar; default is 44 */
    minInputToolbarHeight?: number;
    /*Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details */
    listViewProps?: any;
    /*  Extra props to be passed to the <TextInput> */
    textInputProps?: any;
    /*Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs */
    keyboardShouldPersistTaps?: any;
    /* Callback when the input text changes */
    onInputTextChanged?(text: string): void;
    /*Max message composer TextInput length */
    maxInputLength?: number;
    /* Custom parse patterns for react-native-parsed-text used to linkify message content (like URLs and phone numbers) */
    parsePatterns?(): JSX.Element;
  }

  export class GiftedChat extends React.Component<GiftedChatProps> {
    static append(
      currentMessages: any[],
      messages: any[],
      inverted?: boolean
    ): any[];
    static prepend(
      currentMessages: any[],
      messages: any[],
      inverted?: boolean
    ): any[];
  }

  interface InputToolbarProps {
    renderAccessory?(props: InputToolbarProps): JSX.Element;
    renderActions?(props: InputToolbarProps): JSX.Element;
    renderSend?(props: InputToolbarProps): JSX.Element;
    renderComposer?(props: InputToolbarProps): JSX.Element;
    onPressActionButton?(): void;
    containerStyle?: ViewStyle;
    primaryStyle?: ViewStyle;
    accessoryStyle?: ViewStyle;
  }
  export class InputToolbar extends React.Component<InputToolbarProps> {}

  interface LoadEarlierProps {
    onLoadEarlier?(): void;
    isLoadingEarlier: boolean;
    label?: string;
    containerStyle?: ViewStyle;
    wrapperStyle?: ViewStyle;
    textStyle?: TextStyle;
    activityIndicatorStyle?: ViewStyle;
  }

  class LoadEarlier extends React.Component<LoadEarlierProps> {}

  interface MessageProps {
    // TODO: this is not used
    renderAvatar(props: AvatarProps): JSX.Element;
    showUserAvatar?: boolean;
    renderBubble(props: BubbleProps): JSX.Element;
    renderDay(props: DayProps): JSX.Element;
    renderSystemMessage(props: SystemMessageProps): JSX.Element;
    position?: "left" | "right";
    currentMessage?: IMessage;
    nextMessage?: IMessage;
    previousMessage?: IMessage;
    user?: User;
    inverted?: boolean;
    containerStyle: LeftRightStyle<ViewStyle>;
  }

  class Message extends React.Component<MessageProps> {}

  interface MessageContainerProps {
    messages?: IMessage[];
    user?: User;
    renderFooter?(props: MessageContainerProps): JSX.Element;
    renderMessage?(props: MessageProps): JSX.Element;
    renderLoadEarlier?(props: LoadEarlierProps): JSX.Element;
    // todo: not used
    onLoadEarlier?(): void;
    listViewProps: Partial<ListViewProperties>;
    inverted?: boolean;
    loadEarlier?: boolean;
    // todo: should be InvertibleScrollView props
    invertibleScrollViewProps?: object;
  }

  class MessageContainer extends React.Component<MessageContainerProps> {}

  interface MessageImageProps {
    currentMessage?: IMessage;
    containerStyle?: ViewStyle;
    imageStyle?: ImageStyle;
    imageProps?: Partial<ImageProperties>;
    // todo: should be LightBox properties
    lightboxProps?: object;
  }

  class MessageImage extends React.Component<MessageImageProps> {}

  interface MessageTextProps {
    position: "left" | "right";
    currentMessage?: IMessage;
    containerStyle?: LeftRightStyle<ViewStyle>;
    textStyle?: LeftRightStyle<TextStyle>;
    linkStyle?: LeftRightStyle<LinkStyle>;
    parsePatterns?(linkStyle: LinkStyle): any;
    textProps?: TextProperties;
    customTextStyle?: TextStyle;
  }

  class MessageText extends React.Component<MessageTextProps> {}

  interface SendProps {
    text?: string;
    onSend?({ text }: { text: string }, b: boolean): void;
    label?: string;
    containerStyle?: ViewStyle;
    textStyle?: TextStyle;
    children?: React.ReactNode;
  }

  class Send extends React.Component<SendProps> {}

  interface SystemMessageProps {
    currentMessage?: IMessage;
    containerStyle?: ViewStyle;
    wrapperStyle?: ViewStyle;
    textStyle?: TextStyle;
  }

  class SystemMessage extends React.Component<SystemMessageProps> {}

  interface TimeProps {
    position?: "left" | "right";
    currentMessage?: IMessage;
    containerStyle?: LeftRightStyle<ViewStyle>;
    textStyle?: LeftRightStyle<TextStyle>;
    timeFormat?: string;
  }

  class Time extends React.Component<TimeProps> {}
}