Skip to main content

​
How to integrate CometChatListItem ?

  • TypeScript
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");
        }}
      />

​
Properties

PropertiesTypeDescription
avatarURLImageTypesets image to be shown in avatar in the leading view
avatarNamestringsets name to be shown in avatar in the leading view if avatarURL is not available
idstring | numberunique id for the widget
statusIndicatorColorstringsets colour of the status indicator
statusIndicatorIconImageTypesets icon of the status indicator
titlestringsets the title to display
SubtitleViewReact.FCsets custom subtitle below the title
TailViewReact.FCsets the custom tail view
options() => CometChatOptions[]list of option available for the list item
hideSeparatorbooleanused to hide the divider separating the list items
listItemStyleListItemStyleused to customise the appearance of this widget
avatarStyleAvatarStyleused to customise the Avatar shown in the leading view
statusIndicatorStyleStyleProp<ViewStyle>used to customise the status indicator
onPressFunctioncallback when user press on list item
onLongPressFunctioncallback when user long press on list item
headViewContainerStyleStyleProp<ViewStyle>Head view contains the Avatar of list item & styles can be customise by this
tailViewContainerStyleStyleProp<ViewStyle>Tail view contains the tail section of list item & styles can be customise by this
bodyViewContainerStyleStyleProp<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.
PropertiesType
titleFontFontStyleInterface
titleColorstring
heightnumber | string
widthnumber | string
backgroundColorstring
borderBorderStyleInterface
borderRadiusnumber
  • TypeScript
<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}}
 />