> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# List Base

> List Base — CometChat documentation.

`CometChatListBase` is a scaffolding widget which displays contents passed as child used across `CometChatConversations`, `CometChatGroups` & `CometChatUsers`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d272be23-1645037818-d1afd1c50f2171fb76094fbefb71ed4a.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=b4af2a6ecfeb2a7d811caab33aaef1fe" width="854" height="206" data-path="images/d272be23-1645037818-d1afd1c50f2171fb76094fbefb71ed4a.png" />
</Frame>

***

### Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatListBase(
      title: "Title",
      container: <childWidget>,
    );
    ```
  </Tab>
</Tabs>

***

### Parameters

| Parameter          | Type                 | Description                                                                 |
| ------------------ | -------------------- | --------------------------------------------------------------------------- |
| **title**          | String               | Used to set title in the app bar                                            |
| **style**          | ListBaseStyle        | Used to set style for the component                                         |
| **showBackButton** | bool                 | Used to toggle visibility of backButton                                     |
| **placeholder**    | String               | placeholder for search text field                                           |
| **backIcon**       | Widget               | Used to update back button                                                  |
| **hideSearch**     | bool                 | Used to toggle search bar visibility                                        |
| **searchBoxIcon**  | Widget               | Used to alter searchBox                                                     |
| **container**      | Widget               | Used to Give. child widget to list base                                     |
| **menuOptions**    | List\<Widget>        | used to give menu options visible at top right corner                       |
| **onSearch**       | Function(String val) | Function which will be triggered when click on search icon                  |
| **searchText**     | String               | if passed this text will be preloaded                                       |
| **onBack**         | VoidCallback         | used to set a call back triggered on tapping the back button in the app bar |

##### Example

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatListBase(
      title: <title>,
      hideSearch: <hideSearch>,
      backIcon: <backIcon>,
      placeholder: <placeholder>,
      showBackButton: <showBackButton>,
      searchBoxIcon: <searchBoxIcon>,
      onSearch: (String search){
        // Will evaluate when click on search icon
      },
      searchText: <searchText>,
      theme: <theme>,
      style: <style>,
      container: <childWidget> // Replace with your child widget
      menuOptions: [
        // List of menuOptions
      ],
    );
    ```
  </Tab>
</Tabs>

***

## Style

style is an instance of ListBaseStyle and responsible for styling of CometChatListBase

| Properties                 | Type      | Description                                             |
| -------------------------- | --------- | ------------------------------------------------------- |
| **background**             | Color     | used to set background color                            |
| **border**                 | BoxBorder | used to set border                                      |
| **borderRadius**           | double    | used to modify the border radius                        |
| **titleStyle**             | TextStyle | used to set title style                                 |
| **searchBoxRadius**        | double    | used to set the search box radius                       |
| **searchTextStyle**        | TextStyle | used to set search field text style                     |
| **searchPlaceholderStyle** | TextStyle | used to set text style of hint text in the search field |
| **searchBorderWidth**      | double    | used to set search text field border width              |
| **searchBorderColor**      | Color     | used to set the search text field border color          |
| **searchBoxBackground**    | Color     | used to set the search text field background color      |
| **searchIconTint**         | Color     | used to set the search text field border color          |
| **backIconTint**           | Color     | used to set the color of back icon                      |
| **gradient**               | Gradient  | used to set gradient background                         |
| **height**                 | double    | used to set height                                      |
| **width**                  | double    | used to set width                                       |

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ListBaseStyle _style  = ListBaseStyle(
      background: <backgroundColor>,
      titleStyle: <titleStyle>,
      searchBorderColor: <SearchBorderColor>,
      searchBorderWidth: <searchBorderWidth>,
      searchBoxBackground: <SearchBoxBackgroundColor>,
      searchBoxRadius: <SearchboxCornerRadius>,
      searchTextStyle: <SearchTextStyle>,
    );
    ```
  </Tab>
</Tabs>