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.

ChannelEditDetailsProvider must be rendered inside a ChannelDetailsContextProvider — it reads the target channel from ChannelDetailsContext 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:

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:

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

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

Alternatively, use the useChannelEditDetailsContext hook to consume ChannelEditDetailsContext.

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

const { store, submit } = useChannelEditDetailsContext();

Values

Examples

Saving edited changes

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)
        }
      }}
    />
  );
};