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

# List Item

> List Item — CometChat documentation.

## How to integrate CometChatListItem ?

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    let listItemStyle: ListItemStyleInterface = {
        backgroundColor: "rgba(150,150,150,0.7)",
        height: 85,
        width: "100%",
        titleColor: "blue",
        titleFont: {fontSize: 22}
      }
    let statusIndicatorStyle: StatusIndicatorStyleInterface = {
        height: 40,
        width: 40
      }

      let avatarStyle: AvatarStyleInterface = {
        border: {borderWidth: 1},
        height: 65,
        width: 65,
        borderRadius: 20,
      }
     let name = "Andrew Joseph";
    let avatar = require('./images/cometchat-uid-1.webp");

    <CometChatListItem
            key={id}
            avatarName={name}
            title={name}
            listItemStyle={listItemStyle}
            avatarURL={avatar}
            statusIndicatorColor={'grey'}
            SubtitleView={() => <View>{/* your view*/}</View>}
            TailView={() => <View>{/* your view*/}</View>}
            statusIndicatorStyle={statusIndicatorStyle}
            avatarStyle={avatarStyle}
            onPress={() => {
              console.log("Item pressed");
            }}
            onLongPress={() => {
    					console.log("Item long pressed");
            }}
          />
    ```
  </Tab>
</Tabs>

## Properties

| Properties | Type | Description |
| - | - | - |
| avatarURL | ImageType | sets image to be shown in avatar in the leading view |
| avatarName | string | sets name to be shown in avatar in the leading view if avatarURL is not available |
| id | string \| number | unique id for the widget |
| statusIndicatorColor | string | sets colour of the status indicator |
| statusIndicatorIcon | ImageType | sets icon of the status indicator |
| title | string | sets the title to display |
| SubtitleView | React.FC | sets custom subtitle below the title |
| TailView | React.FC | sets the custom tail view |
| options | () => CometChatOptions\[] | list of option available for the list item |
| hideSeparator | boolean | used to hide the divider separating the list items |
| listItemStyle | ListItemStyle | used to customise the appearance of this widget |
| avatarStyle | AvatarStyle | used to customise the Avatar shown in the leading view |
| statusIndicatorStyle | StyleProp\<ViewStyle> | used to customise the status indicator |
| onPress | Function | callback when user press on list item |
| onLongPress | Function | callback when user long press on list item |
| headViewContainerStyle | StyleProp\<ViewStyle> | Head view contains the Avatar of list item & styles can be customise by this |
| tailViewContainerStyle | StyleProp\<ViewStyle> | Tail view contains the tail section of list item & styles can be customise by this |
| bodyViewContainerStyle | StyleProp\<ViewStyle> | Body view contains the tile & subtitle view of list item & styles can be customise by this |

## ListItemStyle

ListItemStyle is the class containing attributes to customise appearance of this widget.

| Properties | Type |
| - | - |
| titleFont | FontStyleInterface |
| titleColor | string |
| height | number \| string |
| width | number \| string |
| backgroundColor | string |
| border | BorderStyleInterface |
| borderRadius | number |

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatListItem
      SubtitleView={() => <Text>{"online"}</Text>}
      hideSeparator={false}
      title={"Andrew Joseph"}
      avatarName={"Andrew Joseph"}
      avatarURL={{ uri: "https://data-us.cometchat.io/assets/images/avatars/cometchat-uid-3.webp" }}
      statusIndicatorColor={"rgb(0,255,0)"}
      listItemStyle={{ backgroundColor: "rgb(0,0,0)", titleColor:'rgb(20,20,20)',height: 60}}
     />
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.