# 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

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

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

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

### Update the chat group name

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

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

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

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

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

#### Upload chat group shared files

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

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

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

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

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