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
| 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 |
- 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}}
/>