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

# 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-rn-guide-message-privately/mkn0UqPQ5BXljCV1/images/9248d0f2-1623200269-d18330f21ec58888107f4c2c7ab3e8e7.png?fit=max&auto=format&n=mkn0UqPQ5BXljCV1&q=85&s=865823c26d3f8ef346e0983bfbdb314e" 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-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/acbd53e4-userlistwithmessages-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=28018b8e1f57910efbeaa743196b2dac" 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-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a28221f2-grouplistwithmessages-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=8730f5139348c17390ad17433a90579c" 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-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b7b87251-messages-66dd979275e8e7da2d213881a71cfe92.jpg?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=6f56e06bdc3c15e2392020a67225a971" 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-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d723e25b-convolistwithmessages-ff13da12baea7e2336002f088fcd382c.jpg?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=ac149f6f36c9f0fb726cd405ec01778c" 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-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4a33909a-userlist-c3520cbb6867f31ca453483a3f93bac0.jpg?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=84402832add40cb8678b62cc20eae8c1" 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-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/ec06afc9-grouplist-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=58ca76cb96e463a3ed8469f818e14a92" 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-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d3c1ebed-convolist-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=14797c7b573873d69b94cad57cdae150" 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-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/146d6bcc-avatar-c124d3abb15e4115c016f0d84e54145b.jpg?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=bdd36ce9858d0d58a6867360d8d7ced3" 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-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/b2b91894-presence-01183368fdc7a5e3d7c565543a2a64e4.gif?s=3264edd0efa9bc2e3273f74b44ab4d96" 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-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/1067da0e-badge-4b035d5f075d4836ffbcc9b9fc21d51b.jpg?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=0bd965aebc5ae81e439bf4e12609b656" 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 |