# Manage chat group attributes (/en/realtime-media/im/build/build-groups-rooms-and-threads/chat-group/manage-group-attributes/react-native)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Chat groups enable real-time messaging among multiple users.

    This page shows how to use the Chat SDK to manage the attributes of a chat group in your app.

    ## Understand the tech [#understand-the-tech-3]

    The Chat SDK provides the `ChatGroup`, `ChatGroupManager`, and `ChatGroupEventListener` classes for chat group management, which allows you to implement the following features:

    * Update the name and description of a chat group
    * Retrieve and update the announcements of a chat group
    * Manage the shared files in a chat group
    * Update the extension fields of a chat group

    ## Prerequisites [#prerequisites-3]

    Before proceeding, ensure that you meet the following requirements:

    * You have initialized the Chat SDK. For details, [SDK quickstart](../../../get-started-sdk).
    * You understand the call frequency limits of the Chat APIs supported by different pricing plans as described in [Limitations](../../limitations).
    * You understand the number of chat groups and chat group members supported by different pricing plans as described in [Pricing Plan Details](../../../reference/pricing-plan-details).

    ## Implementation [#implementation-3]

    This section describes how to call the APIs provided by the Chat SDK to implement chat group features.

    ### Update the chat group name [#update-the-chat-group-name-1]

    The chat group owner and admins can call `changeGroupName` to set and update the chat group name. The maximum length of a chat group name is 128 characters.

    The following code sample shows how to update the chat group name:

    ```typescript
    ChatClient.getInstance()
      .groupManager.changeGroupName(groupId, local_name)
      .then(() => {
        console.log("update group name success.");
      })
      .catch((reason) => {
        console.log("update group name fail.", reason);
      });
    ```

    ### Update the chat group description [#update-the-chat-group-description-1]

    The chat group owner and admins can call `changeGroupDescription` to set and update the chat group description. The maximum length of a chat group description is 512 characters.

    The following code sample shows how to update the chat group description:

    ```typescript
    ChatClient.getInstance()
      .groupManager.changeGroupDescription(groupId, desc)
      .then(() => {
        console.log("update group description success.");
      })
      .catch((reason) => {
        console.log("update group description fail.", reason);
      });
    ```

    ### Update the chat group avatar [#update-the-chat-group-avatar-1]

    Since SDK v1.4.0, the chat group owner and admins can call `updateGroupAvatar` to set or update the chat group avatar. You can also set the avatar when you create the group; see [Create a chat group](./manage-chat-groups#create-a-chat-group).

    ```typescript
    const groupId = '<GROUP_ID>';
    const avatar = '<AVATAR_URL>';
    ChatClient.getInstance()
      .groupManager.updateGroupAvatar(groupId, avatar)
      .then(() => console.log('update group avatar success'))
      .catch((e) => console.log('update group avatar failed', e));
    ```

    Once the avatar is changed, all the other chat group members receive the `onDetailChanged` event:

    ```typescript
    ChatClient.getInstance().groupManager.addGroupListener({
      onDetailChanged(group) {
        console.log('group detail changed: ', group);
      },
    });
    ```

    ### Update the chat group announcements [#update-the-chat-group-announcements-1]

    Only the chat group owner and admins can call `updateGroupAnnouncement` to set and update the announcements. Once the chat group announcements are updated, all the other chat group members receive the `IGroupManagerDelegate#onAnnouncementChanged` callback. The maximum total length of chat group announcements is 512 characters.

    The following code sample shows how to update the chat group announcements:

    ```typescript
    ChatClient.getInstance()
      .groupManager.updateGroupAnnouncement(groupId, announcement)
      .then(() => {
        console.log("update ann success.");
      })
      .catch((reason) => {
        console.log("update ann fail.", reason);
      });
    ```

    ### Retrieve the chat group announcements [#retrieve-the-chat-group-announcements-1]

    All chat group members can call `fetchAnnouncementFromServer` to retrieve the chat group announcements from the server.

    The following code sample shows how to retrieve the chat group announcements:

    ```typescript
    ChatClient.getInstance()
      .groupManager.fetchAnnouncementFromServer(groupId)
      .then((ann) => {
        console.log("get ann success.", ann);
      })
      .catch((reason) => {
        console.log("get ann fail.", reason);
      });
    ```

    ### Manage the chat group shared files [#manage-the-chat-group-shared-files-1]

    #### Upload chat group shared files [#upload-chat-group-shared-files-1]

    All chat group members can call `uploadGroupSharedFile` to upload shared files to a chat group. The maximum file size is 10 MB. Once a shared file is uploaded, all the other chat group members receive the `ChatGroupEventListener#onSharedFileAdded` callback.

    The following code sample shows how to upload chat group shared files:

    ```typescript
    // Set the file status callback. This callback is triggered to notify the upload and download progress, and the success and failure state of operations on shared files.
    const callback = new (class implements ChatGroupFileStatusCallback {
      that: any;
      constructor(t: any) {
        this.that = t;
      }
      onProgress(groupId: string, filePath: string, progress: number): void {
        console.log(`onProgress: `, groupId, filePath, progress);
      }
      onError(groupId: string, filePath: string, error: ChatError): void {
        console.log(`onError: `, groupId, filePath, error);
      }
      onSuccess(groupId: string, filePath: string): void {
        console.log(`onSuccess: `, groupId, filePath);
      }
    })(this);
    ChatClient.getInstance()
      .groupManager.uploadGroupSharedFile(groupId, filePath, callback)
      .then(() => {
        console.log("upload file success.");
      })
      .catch((reason) => {
        console.log("upload file fail.", reason);
      });
    ```

    #### Delete chat group shared files [#delete-chat-group-shared-files-1]

    All chat group members can call `removeGroupSharedFile` to delete shared files in a chat group. Once a shared file is deleted, all the other chat group members receive the `ChatGroupEventListener#onSharedFileDeleted` callback. The chat group owner and chat group admins can delete all of the shared files, whereas chat group members can only delete the shared files that they have personally uploaded.

    The following code sample shows how to delete chat group shared files:

    ```typescript
    ChatClient.getInstance()
      .groupManager.removeGroupSharedFile(groupId, fileId)
      .then(() => {
        console.log("remove file success.");
      })
      .catch((reason) => {
        console.log("remove file fail.", reason);
      });
    ```

    #### Retrieve the shared file list [#retrieve-the-shared-file-list-1]

    All chat group members can call `fetchGroupFileListFromServer` to retrieve the list of shared files in a chat group from the server.

    The following code sample shows how to retrieve the list of shared files in a chat group:

    ```typescript
    // Retrieve the shared files with pagination.
    ChatClient.getInstance()
      .groupManager.fetchGroupFileListFromServer(groupId, pageSize, pageNum)
      .then(() => {
        console.log("get file success.");
      })
      .catch((reason) => {
        console.log("get file fail.", reason);
      });
    ```

    ### Update the chat group extension fields [#update-the-chat-group-extension-fields-1]

    Only the chat group owner and admins can call `updateGroupExtension` to update the extension fields of a chat group. The extension fields enable users to perform customized operations on a chat group. The maximum length of each extension field is 8 KB, and it must be in the JSON format.

    The following code sample shows how to update the chat group extension fields:

    ```typescript
    // Set the extension fields.
    const extension = { key: "value" };
    ChatClient.getInstance()
      .groupManager.updateGroupExtension(groupId, JSON.stringify(extension))
      .then(() => {
        console.log("update success.");
      })
      .catch((reason) => {
        console.log("update fail.", reason);
      });
    ```

    ### Listen for chat group events [#listen-for-chat-group-events-3]

    For details, see [Chat Group Events](./manage-chat-groups#listen-for-chat-group-events).