> ## 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/XgQ9DxAoWn0btB5m/images/5db8fafe-1631680500-231a118a2c3e7c1412cec712a27b842d.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=e63056f17cf5c2f8511e1cfdc3ee3b8e" width="1659" height="1784" data-path="images/5db8fafe-1631680500-231a118a2c3e7c1412cec712a27b842d.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/mNTojjz_O28of40c/images/f1ee3e6a-1631680503-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=9707174cf7dee18d226d1b6b2f5f0ebd" width="1080" height="2340" data-path="images/f1ee3e6a-1631680503-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,| 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 |
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/19qJLi95IaEk2j9s/images/ff7dc5ff-1631680505-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=19qJLi95IaEk2j9s&q=85&s=58eecb432590beb10deb583878114926" width="1080" height="2340" data-path="images/ff7dc5ff-1631680505-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/XgQ9DxAoWn0btB5m/images/61829f0c-1631680507-66dd979275e8e7da2d213881a71cfe92.jpg?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=12d0f32fc46f37d7d3ed7927e213316b" width="1080" height="2340" data-path="images/61829f0c-1631680507-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/k0f_g7UwNe_JINeP/images/44dfa048-1631680508-ff13da12baea7e2336002f088fcd382c.jpg?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=88f01f90e7f68d7adda5b73bba8ddeee" width="1080" height="2340" data-path="images/44dfa048-1631680508-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/Xgdtn9VZPDi47bm-/images/279acfcc-1631680510-c3520cbb6867f31ca453483a3f93bac0.jpg?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=c50b8132288eacadeb7a1909b0dd93fc" width="1080" height="2340" data-path="images/279acfcc-1631680510-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/k0f_g7UwNe_JINeP/images/41eed007-1631680512-04474c11983ddecac55d529a4fbd3440.jpg?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=bafdbfc0fce1c864e90cb5e57b78f96f" width="1080" height="2340" data-path="images/41eed007-1631680512-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/2JiXkJ8lq6PmPGlJ/images/719923ee-1631680513-852a0ffd44ad4e47c05ad10cd2f0cbe6.jpg?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=1c72abdb45c5c1c7638c291a494f55cf" width="1080" height="2340" data-path="images/719923ee-1631680513-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/7a4hqm7gLVRmX34O/images/04ee8cf5-1631680515-c124d3abb15e4115c016f0d84e54145b.jpg?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=8434475443b0565b80e363fb0813c3f1" width="1080" height="2340" data-path="images/04ee8cf5-1631680515-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/k0f_g7UwNe_JINeP/images/436a7fbe-1631680516-36a12818ab932dd8f413b0a3644bd97c.gif?s=4890cba5dad1f6aeae4dc6fc1dd55e2e" width="600" height="1300" data-path="images/436a7fbe-1631680516-36a12818ab932dd8f413b0a3644bd97c.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/Gp90C5sdVtuRR4t7/images/7e4545a4-1631680521-4b035d5f075d4836ffbcc9b9fc21d51b.jpg?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=490b4d3fb0958c6a50eba4ebb9dfd628" width="1080" height="2340" data-path="images/7e4545a4-1631680521-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 |