ChatiumFor developersPlaygroundPricing
Sign in

FlatList

Properties

  • class (string): An additional CSS class for the root element of the list.
  • classList (Record<string, boolean | undefined>): An object of classes for dynamic style management. Allows adding or removing classes based on state.
  • disabled (boolean): If set to true, disables interaction with the list (e.g., prevents clicks).
  • items (FlatListItem[]): An array of list items. Each item represents a FlatListItem object that can contain a title text, content, and information about whether the item is a separator.
  • selected (FlatListItem['id']): The identifier of the selected item. If provided, the item with this identifier will be marked as selected.
  • onClick *(function(item: FlatListItem)): A click handler function for list items. It takes the clicked list item as an argument.

FlatListItem

The FlatListItem object represents a list item in the FlatList component. This object can contain data for displaying the title, content, and can also be used as a list separator.

FlatListItem Properties

  • id (string | number | null | boolean | Date): The identifier of the list item. This field is used to identify the item and to mark it as selected through the selected property of the FlatList component.
  • title (string): The title of the list item. This is a required field displayed in the interface. If the content property is not used, the title will be the main displayed text of the item.
  • separator (true): If set to true, the item will act as a separator in the list. Separators are typically displayed as visual boundaries between groups of list items. If this parameter is set, the item is rendered with the class FlatList__separator and may display its title or content as a separator.
  • content (JSXElement): An optional property for custom content that will be displayed instead of the title. Can be used to display JSX components or other complex content in the list item.

Important Points

  • clickHandler: The event handler for clicking on a list item. It extracts the index of the clicked item and calls the onClick function if it was provided.