Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface IProps<T>

Type parameters

  • T

Hierarchy

  • IProps

Index

Properties

Methods

Properties

Optional FooterComponent

FooterComponent: FooterComponent

A component that renders at the bottom of the list, above the user input. Can be used to provide suggested inputs values. The Suggestions component is often used here

Optional HeaderComponent

HeaderComponent: HeaderComponent

A component that renders at the top of the list. Can be used to render a button that loads data.

example
const ref: List<string> | undefined = undefined;
const load = () => {
  if (ref) {
    ref.load();
  }
}
const header = <Button title="Load old Messages" onPress={load} />
<List<string>
  ref={(instance: List<string>) => ref = instance}
  loadThreshold={0}
  HeaderComponent={header}
/>

Optional MessagesEmptyComponent

MessagesEmptyComponent: MessagesEmptyComponent

The component to render when the messages array is empty

Optional MessagesLoadingComponent

MessagesLoadingComponent: MessagesLoadingComponent | null

The component to render when old messages are being loaded. Defaults to an ActivityIndicator

Optional extraData

extraData: any

As the component is pure, this can be used to force a re-render. Often used when derived components require the header and footer callbacks to re-run.

Optional length

length: undefined | number

The length of the messages array. This can be set explicitly to force a re-render of the Chat. Usually, this isn't needed as the component does a check of the length after the onSend/onLoad/etc functions run (which often update the messages array)

Optional loadThreshold

loadThreshold: undefined | number

The percentage threshold to use when older messages should automatically be loaded. Can be set to 0 to prevent automatic invoking of onLoad. The Chat#load function can be used to explicitly invoke onLoad

messages

messages: MessagesImmutable<T>

The list of messages. The message at the start of the array is shown first.

Optional theme

theme: ITheme

Theming support for the input

Methods

Optional onLoad

  • onLoad(): Promise<void>

  • Invoked when more historical messages should be loaded. This occurs on mount and then when the user has scrolled back through the list of messages. The loadThreshold property can be used to customise when the function gets invoked. It can also be set to 0 to prevent automatic loading and the explicit Chat#load function can be used to invoke this callback.

    Returns Promise<void>

onRenderMessage

  • onRenderMessage(message: IMessageImmutable<T>, index: number, disabled: boolean): Element

  • Performs rendering of a message. The user property can be used to determine if the message is from the current user by comparing it with the user property set on the component.

    Parameters

    • message: IMessageImmutable<T>

      the message data to render

    • index: number

      the index of the message that is being rendered in the messages array. 0 is the current message, increasing values are historical messages

    • disabled: boolean

      the state of the chat messages

    Returns Element

    a rendered element to display