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

# UI Components

> UI Components — CometChat documentation.

**UI Components** are building blocks of the UI Kit. **UI Components** are a set of custom classes specially designed to build a rich chat app. There are different UI Components available in the UI Kit Library.

### CometChatUI

**CometChatUI** is an option to launch a fully functional chat application using the UI Kit. In **CometChatUI** all the **UI Components** are interlinked and work together to launch a fully functional chat on your application.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/Esb0GoP81F5eUfZq/images/9248d0f2-1623200269-d18330f21ec58888107f4c2c7ab3e8e7.png?fit=max&auto=format&n=Esb0GoP81F5eUfZq&q=85&s=eafea6f5fd172c6a6770e8742c67787d" width="1659" height="1784" data-path="images/9248d0f2-1623200269-d18330f21ec58888107f4c2c7ab3e8e7.png" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatUI} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatUIView() {
      return (
        <View style={{flex: 1}}>
          <CometChatUI />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatUserListWithMessages

The `CometChatUserListWithMessages` is a component with a list of users. The component has all the necessary listeners and methods required to display the user's list and shows the set of the messages/chats of the selected user

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-4h3cKAJUX2gQz_u/images/acbd53e4-userlistwithmessages-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=-4h3cKAJUX2gQz_u&q=85&s=a380dc79b2b1b2772747af715527bd32" width="1080" height="2340" data-path="images/acbd53e4-userlistwithmessages-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUserListWithMessages } from '../cometchat-pro-react-native-ui-kit';

    function StackNavigator(props) {
      const Stack = createStackNavigator();

      return (
        <NavigationContainer>
          <Stack.Navigator
            headerMode="none"
            initialRouteName={"UserListWithMessages"}>
              <Stack.Screen name="UserListWithMessages" component={CometChatUserListWithMessages} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    ```
  </Tab>
</Tabs>

If you want to use this as a child component, then use the below code.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View} from 'react-native';
    import {CometChatUserListWithMessages} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatUserListWithMessagesView({navigation}) {
      return (
        <View style={{flex: 1}}>
          <CometChatUserListWithMessages navigation={navigation}/>
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatGroupListWithMessages

The `CometChatGroupWithMessages` is a component with a list of groups. The component has all the necessary listeners and methods required to display the group's list and shows the set of the messages/chats of the selected group

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/lFF45O1CcDkVMfu4/images/a28221f2-grouplistwithmessages-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=lFF45O1CcDkVMfu4&q=85&s=7ba397c81360c45b5bae94076773e322" width="1080" height="2340" data-path="images/a28221f2-grouplistwithmessages-04474c11983ddecac55d529a4fbd3440.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatGroupListWithMessages } from '../cometchat-pro-react-native-ui-kit';

    function StackNavigator(props) {
      const Stack = createStackNavigator();

      return (
        <NavigationContainer>
          <Stack.Navigator
            headerMode="none"
            initialRouteName={"GroupListWithMessages"}>
              <Stack.Screen name="GroupListWithMessages" component={CometChatGroupListWithMessages} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    ```
  </Tab>
</Tabs>

If you want to use this as a child component, then use the below code.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatGroupListWithMessages} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatGroupListWithMessagesView({navigation}) {
      return (
        <View style={{flex: 1}}>
          <CometChatGroupListWithMessages navigation={navigation} />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatMessages

The `CometChatMessages` is a component with a list of messages/chats and shows the message component header and message composer.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/FQNeiVxajtzWdB3i/images/b7b87251-messages-66dd979275e8e7da2d213881a71cfe92.jpg?fit=max&auto=format&n=FQNeiVxajtzWdB3i&q=85&s=c6363f956fabd2f2576283a2059d1302" width="1080" height="2340" data-path="images/b7b87251-messages-66dd979275e8e7da2d213881a71cfe92.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React, {useEffect, useState} from 'react';
    import {View} from 'react-native';
    import {CometChat} from '@cometchat-pro/react-native-chat';
    import {CometChatMessages} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatMessagesView({navigation}) {
      const [localUser, setLocalUser] = useState(null);
      useEffect(() => {
        var user = CometChat.getLoggedinUser().then(
          (user) => {
            console.log('user details:', {user});
            setLocalUser(user);
          },
          (error) => {
            console.log('error getting details:', {error});
          },
        );
      }, []);
      return (
        <View style={{flex: 1}}>
          {localUser ? (
            <CometChatMessages
              type={'user'}
              item={userOrGroupObject}//The object will be of user or group depending on type
              loggedInUser={localUser}
              actionGenerated={(actionType) => {
                console.log(actionType);
              }}
            />
          ) : null}
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

| Parameter       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Type     |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| type            | Value should be *string*. defines the type of chat. Its value can be *user* or "group".                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Optional |
| item            | Value should be *Object*. The object will be of user or group depending on type. This is an example object for user<br />\{ hasBlockedMe: false,<br />blockedByMe: false,<br />uid: 'cometchat-uid-3',<br />name: 'Nancy Grace',<br />avatar: '[https://data-us.cometchat.io/assets/images/avatars/cometchat-uid-3.webp'](https://data-us.cometchat.io/assets/images/avatars/cometchat-uid-3.webp'),<br />lastActiveAt: 1614597611,<br />role: 'default',<br />status: 'offline',<br />}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Required |
| loggedInUser    | Value should be *Object*. This props takes the details of current logged in user,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Required |
| actionGenerated | Value should be *function*. Tis is a callback function called when user perform certain actions on screen. List of actionType are as follow:<br />1)groupDeleted: This is called when user deletes the group.<br />2) membersUpdated: This is called when members of group are updated.<br />3)messageRead : This is called when last message is read.<br />4)messageComposed: is called when new message is composed.<br />5)messageDeleted: This is called when message is been deleted.<br />6)viewActualImage: This is called when user clicks on Image.<br />7)menuClicked: This is called when the menu in header has been clicked.<br />8)threadMessageComposed: This is called when new thread message has been composed<br />9)blockUser: This is called when user is blocked<br />10)updateThreadMessage: This is called when thread message is updated.<br />11)messageEdited: This is called when a message is edited.<br />12)groupUpdated: This is called when a group property has been updated. | Required |

### CometChatConversationListWithMessages

The `CometChatConversationListWithMessages` is a component with a list of recent conversations. The component has all the necessary listeners and methods required to display the recent conversation list and shows the set of the messages/chats of the selected recent conversation

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/fW0PxkjcCIs_jips/images/d723e25b-convolistwithmessages-ff13da12baea7e2336002f088fcd382c.jpg?fit=max&auto=format&n=fW0PxkjcCIs_jips&q=85&s=32cea91393cb2b07830ef1de28bf0a2f" width="1080" height="2340" data-path="images/d723e25b-convolistwithmessages-ff13da12baea7e2336002f088fcd382c.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatConversationListWithMessages } from '../cometchat-pro-react-native-ui-kit';

    function StackNavigator(props) {
      const Stack = createStackNavigator();

      return (
        <NavigationContainer>
          <Stack.Navigator
            headerMode="none"
            initialRouteName={"ConversationListWithMessages"}>
              <Stack.Screen name="ConversationListWithMessages" component={CometChatConversationListWithMessages} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    ```
  </Tab>
</Tabs>

If you want to use this as a child component, then use the below code.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatConversationListWithMessages} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatConversationListWithMessagesView({
      navigation,
    }) {
      return (
        <View style={{flex: 1}}>
          <CometChatConversationListWithMessages navigation={navigation} />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatUserList

The `CometChatUserList` is a component that displays the list of users available to chat. You can use this component within your app if you wish to display the list of users.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-MogY9MW_bOB3epD/images/4a33909a-userlist-c3520cbb6867f31ca453483a3f93bac0.jpg?fit=max&auto=format&n=-MogY9MW_bOB3epD&q=85&s=06175d492189e5de761dad61e5aa5ba7" width="1080" height="2340" data-path="images/4a33909a-userlist-c3520cbb6867f31ca453483a3f93bac0.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatUserList} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatUserListView({navigation}) {
      return (
        <View style={{flex: 1}}>
          <CometChatUserList
            friendsOnly={true}
            onItemClick={(item) => {
              console.log(item);
            }}
            navigation={navigation}
          />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

| Parameter   | Description                                                                                                                                    | Type     |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| friendsOnly | Value could be *Object* or *Number* This property when set to true will return only the friends of the logged-in user Default value is *false* | Optional |
| onItemClick | Value should be *function* This is a callback called when a user is clicked on user list                                                       | Optional |
| navigation  | Value should be *Object*. Pass the navigation object, if you want to refresh list on focus                                                     | Optional |

### CometChatGroupList

The `CometChatGroupList` is a component that displays the list of groups available. You can use this component within your app if you wish to display the list of groups.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/wITpHRGFWGJvJnmU/images/ec06afc9-grouplist-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=wITpHRGFWGJvJnmU&q=85&s=e2d4ca3554720bf40a399fba13a38de5" width="1080" height="2340" data-path="images/ec06afc9-grouplist-04474c11983ddecac55d529a4fbd3440.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatGroupList } from '../cometchat-pro-react-native-ui-kit';

    function StackNavigator(props) {
      const Stack = createStackNavigator();

      return (
        <NavigationContainer>
          <Stack.Navigator
            headerMode="none"
            initialRouteName={"GroupList"}>
              <Stack.Screen name="GroupList" component={CometChatGroupList} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    ```
  </Tab>
</Tabs>

If you want to use this as a child component, then use the below code.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View} from 'react-native';
    import {CometChatGroupList} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatGroupListView({navigation}) {
      return (
        <View style={{flex: 1}}>
          <CometChatGroupList navigation={navigation} />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatConversationList

You can use the `CometChatConversationList` component to display the list of recent conversations that the logged-in user was a part of.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/fW0PxkjcCIs_jips/images/d3c1ebed-convolist-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=fW0PxkjcCIs_jips&q=85&s=fb2bbf4ec61144244a76f0c49460dbe7" width="1080" height="2340" data-path="images/d3c1ebed-convolist-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatConversationList } from '../cometchat-pro-react-native-ui-kit';

    function StackNavigator(props) {
      const Stack = createStackNavigator();

      return (
        <NavigationContainer>
          <Stack.Navigator
            headerMode="none"
            initialRouteName={"ConversationList"}>
              <Stack.Screen name="ConversationList" component={CometChatConversationList} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
    ```
  </Tab>
</Tabs>

If you want to use this as a child component, then use the below code.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View} from 'react-native';
    import {CometChatConversationList} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatConversationListView({navigation}) {
      return (
        <View style={{flex: 1}}>
          <CometChatConversationList navigation={navigation} />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

### CometChatAvatar

This is an image view customize only to display Avatar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/aRTT1Z3XQ9tvRy7f/images/146d6bcc-avatar-c124d3abb15e4115c016f0d84e54145b.jpg?fit=max&auto=format&n=aRTT1Z3XQ9tvRy7f&q=85&s=91a37c81c49fb528ca4dd2528fa74b33" width="1080" height="2340" data-path="images/146d6bcc-avatar-c124d3abb15e4115c016f0d84e54145b.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatAvatar} from '../cometchat-pro-react-native-ui-kit';
    export default function AvatarView({user}) {
      return (
        <View style={{flex: 1, justifyContent: 'center'}}>
          <View
            style={{
              margin: '10%',
              elevation: 5,
              backgroundColor: '#fff',
              padding: '10%',
              alignItems: 'center',
              borderRadius: 5,
            }}>
            <Text style={{fontWeight: 'bold', fontSize: 26, marginBottom: '5%'}}>
              CometChatAvatar
            </Text>
            <CometChatAvatar
              image={{uri: user.avatar}}
              borderWidth={5}
              cornerRadius={1000}
              borderColor={'#707070'}
              textColor={'#000'}
            />
            <Text style={{marginTop: '5%', textAlign: 'center'}}>
              This is an image view customize only to display Avatar.
            </Text>
          </View>
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

| Parameter    | Description                                                                                                  | Type     |
| ------------ | ------------------------------------------------------------------------------------------------------------ | -------- |
| image        | Value could be *Object* or *Number* This property sets the source of avatar image.                           | Optional |
| name         | Value should be *String* This property sets the user name in avatar.                                         | Optional |
| borderWidth  | Value should be *Number*. This property sets the width of the component's four borders. Default value is *1* | Optional |
| cornerRadius | Value should be *Number*. This property sets border radius of the component. Default value is *1000*.        | Optional |
| textColor    | Value should be *Color*. This property sets the text color of component. Default value is \*black \*         | Optional |

### CometChatUserPresence

This component will be used to show the user's online or offline status. This component will show the color based on the user's status.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-4h3cKAJUX2gQz_u/images/b2b91894-presence-01183368fdc7a5e3d7c565543a2a64e4.gif?s=c2ccba19225790a94ebe42a523819cae" width="600" height="1300" data-path="images/b2b91894-presence-01183368fdc7a5e3d7c565543a2a64e4.gif" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React, {useState} from 'react';
    import {View, Text, TouchableOpacity} from 'react-native';
    import {CometChatUserPresence} from '../cometchat-pro-react-native-ui-kit';
    export default function CometChatUserPresenceView({user}) {
      const [status, setStatus] = useState(user.status);
      return (
        <View style={{flex: 1, justifyContent: 'center'}}>
          <View
            style={{
              margin: '10%',
              elevation: 5,
              backgroundColor: '#fff',
              padding: '5%',
              alignItems: 'center',
              borderRadius: 5,
            }}>
            <Text style={{fontWeight: 'bold', fontSize: 26, marginBottom: '5%'}}>
              CometChatUserPresence
            </Text>

            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-evenly',
                width: '100%',
              }}>
              <TouchableOpacity
                onPress={() => setStatus('online')}
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  padding: 10,
                  backgroundColor: 'lightgreen',
                }}>
                <Text>Online</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => setStatus('')}
                style={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  padding: 10,
                  backgroundColor: '#707070',
                }}>
                <Text>Offline</Text>
              </TouchableOpacity>
            </View>
            <View style={{position: 'relative'}}>
              <CometChatUserPresence
                status={status}
                borderWidth={0.5}
                borderColor={'red'}
                cornerRadius={0}
              />
            </View>
            <Text style={{marginTop: '15%', textAlign: 'center'}}>
              This view will be used to show the user status if the user is online
              or offline. This view will take user status and display the color
              accordingly
            </Text>
          </View>
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

| Parameter    | Description                                                                                                | Type     |
| ------------ | ---------------------------------------------------------------------------------------------------------- | -------- |
| borderWidth  | Value should be *Number* This property sets the width of the component's four borders Default value is *1* | Optional |
| borderColor  | Value should be *Color* This property sets the border colour of the component. Default value is \*#AAA \*  | Optional |
| cornerRadius | Value should be *Number*. This property sets border radius of the component Default value is *4.5*         | Optional |
| status       | Value should be *String* Takes the status of *user*                                                        | Optional |

### CometChatBadgeCount

The CometChatBadgeCount component can be used to show an unread count. You can use it in different scenarios according to their use case.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/aRTT1Z3XQ9tvRy7f/images/1067da0e-badge-4b035d5f075d4836ffbcc9b9fc21d51b.jpg?fit=max&auto=format&n=aRTT1Z3XQ9tvRy7f&q=85&s=ea89aa980fbc42ba8d9073e2ce08dc48" width="1080" height="2340" data-path="images/1067da0e-badge-4b035d5f075d4836ffbcc9b9fc21d51b.jpg" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View, Text} from 'react-native';
    import {CometChatBadgeCount} from '../cometchat-pro-react-native-ui-kit';
    export default function CometChatBadgeCountView() {
      return (
        <View style={{flex: 1, justifyContent: 'center'}}>
          <View
            style={{
              margin: '5%',
              elevation: 5,
              backgroundColor: '#fff',
              padding: '10%',
              alignItems: 'center',
              borderRadius: 5,
            }}>
            <Text style={{fontWeight: 'bold', fontSize: 26, marginBottom: '5%'}}>
              CometChatBadgeCount
            </Text>
            <View>
              <CometChatBadgeCount count={1} />
            </View>
            <Text style={{marginTop: '5%', textAlign: 'center'}}>
              The CometChatBadgeCount component can be used to show an unread count.
              You can use it in different scenarios according to their use case.
            </Text>
          </View>
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

| Parameter | Description                                                         | Type     |
| --------- | ------------------------------------------------------------------- | -------- |
| count     | Value should be *String*. This property sets the count on the badge | Optional |