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

# Create Group

> Create Group — CometChat documentation.

## Overview

`CometChatCreateGroup` is a [Component](/ui-kit/react-native/v4/components-overview#components) enabling users to create various types of groups, including public, private, and password-protected ones. This functionality enables users to curate their group settings according to their preferences and needs.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mNTojjz_O28of40c/images/f5bc6097-create_group_overview_cometchat_screens-001813f3be0c76737071311151e802d2.png?fit=max&auto=format&n=mNTojjz_O28of40c&q=85&s=4e6a0994acc4182c8f0819e24f27449d" alt="Image" width="4498" height="3120" data-path="images/f5bc6097-create_group_overview_cometchat_screens-001813f3be0c76737071311151e802d2.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4a593808-create_group_overview_cometchat_screens-f6ba21613180040af5dad76f754aa9b7.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=6cbd035ee2307155bf311fe196bcbe27" alt="Image" width="4498" height="3120" data-path="images/4a593808-create_group_overview_cometchat_screens-f6ba21613180040af5dad76f754aa9b7.png" />
  </Tab>
</Tabs>

***

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the Create Groups component into your Application.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatCreateGroup } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      return <CometChatCreateGroup />;
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/react-native/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

##### 1. onCreatePress

The `onCreatePress` action is activated when you click the create Group button. This returns the created groups.

You can override this action using the following code snippet.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatCreateGroup } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const onCreatePressHandler = (
        groupName: string,
        groupType: string,
        password: string
      ) => {
        //code
      };

      return (
        <CometChatCreateGroup
          onCreatePress={onCreatePressHandler}
        ></CometChatCreateGroup>
      );
    }
    ```
  </Tab>
</Tabs>

##### 2. onBack

The `onBack` event is typically triggered when the back/close button is clicked and it does not carry a default action.

With the following code snippet, you can effortlessly override this default operation.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatCreateGroup } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const onBackHandler = () => {
        //code
      };

      return <CometChatCreateGroup onBack={onBackHandler} />;
    }
    ```
  </Tab>
</Tabs>

### Filters

**Filters** allow you to customize the data displayed in a list within a `Component`. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using `RequestBuilders` of Chat SDK.

The `CreateGroup` component does not have any exposed filters.

### Events

[Events](/ui-kit/react-native/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

Events emitted by the Create Group component is as follows.

| Event              | Description                                         |
| ------------------ | --------------------------------------------------- |
| **ccGroupCreated** | Triggers when the user creates a group successfully |

<Tabs>
  <Tab title="Adding Listeners">
    ```tsx theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.addGroupListener("GROUP_LISTENER_ID", {
      ccGroupCreated: ({ group }) => {
        //code
      },
    });
    ```
  </Tab>
</Tabs>

***

<Tabs>
  <Tab title="Removing Listeners">
    ```tsx theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.removeGroupListener("GROUP_LISTENER_ID");
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the Create Groups component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using **Style** you can **customize** the look and feel of the component in your app, These parameters typically control elements such as the **color**, **size**, **shape**, and **fonts** used within the component.

##### 1. CreateGroup Style

You can set the `CreateGroupStyle` to the `Create Group` Component to customize the styling.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7b4a1bcc-create_group_style_cometchat_screens-6cf147ed69425ce163ba3f6b958a1035.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=1a959612e9dbd0ec3b71473619cb4739" alt="Image" width="4498" height="3120" data-path="images/7b4a1bcc-create_group_style_cometchat_screens-6cf147ed69425ce163ba3f6b958a1035.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2a29bc84-create_group_style_cometchat_screens-f2e068471c780a05178800b0cf9a74a5.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=401a97c258b5d1344009df20dde374c7" alt="Image" width="4498" height="3120" data-path="images/2a29bc84-create_group_style_cometchat_screens-f2e068471c780a05178800b0cf9a74a5.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatCreateGroup } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      const createGroupStyle: CreateGroupStyleInterface = {
        background: "#d2cafa",
        createIconTint: "red",
        closeIconTint: "red",
      };

      return <CometChatCreateGroup createGroupStyle={createGroupStyle} />;
    }
    ```
  </Tab>
</Tabs>

List of properties exposed by CreateGroupStyle

| Property                         | Description                                                          | Code                                                 |
| -------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------- |
| **border**                       | Used to set border                                                   | `border?: BorderStyleInterface,`                     |
| **borderRadius**                 | Used to set border radius                                            | `borderRadius?: number;`                             |
| **background**                   | Used to set background colour                                        | `background?: string;`                               |
| **height**                       | Used to set height                                                   | `height?: string` \| `number ;`                      |
| **width**                        | Used to set width                                                    | `width?: string` \| `number`                         |
| **tabColor**                     | Sets the color for group type tabs                                   | `tabColor?: string;`                                 |
| **selectedTabColor**             | Sets the color for selected group type tab                           | `selectedTabColor?: string;`                         |
| **createIconTint**               | Sets the create icon tint                                            | `createIconTint?: sring`                             |
| **closeIconTint**                | Sets the close icon tint                                             | `closeIconTint?: sring`                              |
| **titleTextStyle**               | Sets the font style for the title                                    | `titleTextStyle?: FontStyleInterface`                |
| **passwordInputTextStyle**       | Sets the font style for the password input field                     | `passwordInputTextStyle?: FontStyleInterface;`       |
| **nameInputTextStyle**           | Sets the font style for group name field                             | `nameInputTextStyle?: FontStyleInterface;`           |
| **passwordPlaceholderTextStyle** | Sets the font style for placeholder text in the password input field | `passwordPlaceholderTextStyle?: FontStyleInterface;` |
| **namePlaceholderTextStyle**     | Sets the font style for placeholder text in the name input field     | `namePlaceholderTextStyle?: FontStyleInterface;`     |
| **namePlaceholderTextStyle**     | Sets the font style for placeholder text in the name input field     | `namePlaceholderTextStyle?: FontStyleInterface;`     |
| **tabTextStyle**                 | Sets the font style for group type tabs                              | `tabTextStyle?: FontStyleInterface;`                 |
| **selectedTabTextStyle**         | Sets the font style for selected group type tab                      | `selectedTabTextStyle?: FontStyleInterface;`         |

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    import { CometChatCreateGroup } from "@cometchat/chat-uikit-react-native";

    function App(): React.JSX.Element {
      return (
        <CometChatCreateGroup title="Custom Title" disableCloseButton={true} />
      );
    }
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/5550bc4d-create_group_custom_title_cometchat_screens-865f2818b9566b3a88e33ea90b7d39d9.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=35544ef5211898426e9e9341acef111a" alt="Image" width="4498" height="3120" data-path="images/5550bc4d-create_group_custom_title_cometchat_screens-865f2818b9566b3a88e33ea90b7d39d9.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/55fb7402-create_group_custom_title_cometchat_screens-a8e545ec7a1121e0e7d6134f648070a7.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=098cb1d5a09b92da20365ebb1067cc36" alt="Image" width="4498" height="3120" data-path="images/55fb7402-create_group_custom_title_cometchat_screens-a8e545ec7a1121e0e7d6134f648070a7.png" />
  </Tab>
</Tabs>

| Property                    | Description                              | Code                               |
| --------------------------- | ---------------------------------------- | ---------------------------------- |
| **title**                   | Custom title for the component           | `title?: string;`                  |
| **passwordPlaceholderText** | Custom text for the password placeholder | `passwordPlaceholderText?: string` |
| **namePlaceholderText**     | Custom text for the name placeholder     | `namePlaceholderText?: string`     |
| **disableCloseButton**      | Used to disable close button             | `disableCloseButton?: boolean`     |

***

### Advance

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

the `Create Group` component does not offer any advanced functionalities beyond this level of customization.

***