> ## 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 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>