# ChannelEditDetailsContext

`ChannelEditDetailsContext` is provided by `ChannelEditDetailsProvider`. Mount the provider around your channel-editing UI to access the editable form state and submit handler. If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

`ChannelEditDetailsProvider` must be rendered inside a [`ChannelDetailsContextProvider`](/chat/docs/sdk/react-native/contexts/channel-details-context/) — it reads the target `channel` from [`ChannelDetailsContext`](/chat/docs/sdk/react-native/contexts/channel-details-context/) and snapshots its name and image into an `EditChannelDetailsStore` at construction. The snapshot is intentionally **not** updated by WebSocket events, so an inbound `channel.updated` does not clobber the user's in-progress edits. Mount the provider once per edit session.

## Best Practices

- Render `ChannelEditDetailsProvider` inside a `ChannelDetailsContextProvider` so the target channel is available.
- Subscribe to the `store` with `useIsNameEdited` / `useIsImageEdited` / `useAreChannelDetailsEdited` to drive a "Save" button's enabled state, and mutate with the store's `setCurrentName` / `setUpdatedImage` / `setPendingAction` methods.
- `await submit()` and handle the rejection — it throws an `AggregateError` when one or more updates fail.
- Pass `compressImageQuality` / `doFileUploadRequest` to `ChannelEditDetailsProvider` to customize how the picked channel image is compressed and uploaded.
- Keep the provider scoped to the edit flow and remount it for each new edit session.

## Basic Usage

Wrap your channel-editing UI in the providers:

```tsx
import {
  ChannelDetailsContextProvider,
  ChannelEditDetailsProvider,
} from "stream-chat-react-native";

<ChannelDetailsContextProvider channel={channel}>
  <ChannelEditDetailsProvider
    compressImageQuality={0.8}
    doFileUploadRequest={customUpload}
  >
    {/* edit channel UI */}
  </ChannelEditDetailsProvider>
</ChannelDetailsContextProvider>;
```

Consume `ChannelEditDetailsContext` in any child of the provider:

```tsx
import { useContext } from "react";
import { ChannelEditDetailsContext } from "stream-chat-react-native";

const { store, submit } = useContext(ChannelEditDetailsContext);
```

Alternatively, use the `useChannelEditDetailsContext` hook to consume `ChannelEditDetailsContext`.

```tsx
import { useChannelEditDetailsContext } from "stream-chat-react-native";

const { store, submit } = useChannelEditDetailsContext();
```

## Values

| Value                  | Description                                                                                                                                                                                                     | Type                      |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| `store` \*             | An `EditChannelDetailsStore` holding the editable form state (name + picked image) and the pending image-picker action. Subscribe with `useIsNameEdited`, `useIsImageEdited`, and `useAreChannelDetailsEdited`. | `EditChannelDetailsStore` |
| `submit` \*            | Saves the edited channel details (name and/or image). Resolves once every update succeeds and rejects with an `AggregateError` if any of them fail.                                                             | `() => Promise<void>`     |
| `compressImageQuality` | Compression quality (from `0` to `1`, where `1` is best quality) applied to the channel image picked during editing. Seeded from the provider prop of the same name.                                            | `number`                  |
| `doFileUploadRequest`  | Override the upload request used to upload the channel image. Seeded from the provider prop of the same name.                                                                                                   | `GlobalFileUploadRequest` |

## Examples

### Saving edited changes

```tsx
import { Button } from "react-native";
import {
  useAreChannelDetailsEdited,
  useChannelEditDetailsContext,
} from "stream-chat-react-native";

const SaveButton = () => {
  const { store, submit } = useChannelEditDetailsContext();
  const areChannelDetailsEdited = useAreChannelDetailsEdited(store);

  return (
    <Button
      title="Save"
      disabled={!areChannelDetailsEdited}
      onPress={async () => {
        try {
          await submit();
        } catch (error) {
          // handle the failure (e.g. show a toast)
        }
      }}
    />
  );
};
```


---

This page was last updated at 2026-06-30T12:00:28.238Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/contexts/channel-edit-details-context/](https://getstream.io/chat/docs/sdk/react-native/contexts/channel-edit-details-context/).