ChannelAddMembersContext

ChannelAddMembersContext is provided by ChannelAddMembersProvider. Mount the provider around your "add members to channel" UI to access the selection state and submit handler. If you are not familiar with the React Context API, see the React docs.

ChannelAddMembersProvider must be rendered inside a ChannelDetailsContextProvider (it reads the target channel from ChannelDetailsContext) and inside Chat because it depends on ChatContext to build the user search source.

Best Practices

  • Render ChannelAddMembersProvider inside a ChannelDetailsContextProvider so the target channel is available.
  • Subscribe to the selectionStore with useIsSelectionEmpty / useIsSelected rather than reading its state directly, so components re-render only on the slices they care about.
  • Use searchSource for querying and paginating users; it is pre-configured to autocomplete by name. Pass a custom UserSearchSource to ChannelAddMembersProvider to override it.
  • await submit() and handle the rejection — it throws when adding members fails.
  • Keep the provider scoped to the add-members flow.

Basic Usage

Wrap your add-members UI in the providers:

import {
  ChannelDetailsContextProvider,
  ChannelAddMembersProvider,
} from "stream-chat-react-native";

<ChannelDetailsContextProvider channel={channel}>
  <ChannelAddMembersProvider searchSource={customSearchSource}>
    {/* add members UI */}
  </ChannelAddMembersProvider>
</ChannelDetailsContextProvider>;

Consume ChannelAddMembersContext in any child of the provider:

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

const { selectionStore, searchSource, submit } = useContext(
  ChannelAddMembersContext,
);

Alternatively, use the useChannelAddMembersContext hook to consume ChannelAddMembersContext.

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

const { selectionStore, searchSource, submit } = useChannelAddMembersContext();

Values

ValueDescriptionType
selectionStore *A SelectionStore tracking the ids of the currently selected users. Subscribe to slices with useIsSelectionEmpty and useIsSelected, and mutate with its select / deselect / toggle methods.SelectionStore
searchSource *A UserSearchSource used to query and paginate users to add. Pre-configured to autocomplete by name.UserSearchSource
submit *Adds the currently selected members to the channel. Resolves on success and rejects if the request fails.() => Promise<void>

Examples

Submitting the selection

import { Button } from "react-native";
import {
  useChannelAddMembersContext,
  useIsSelectionEmpty,
} from "stream-chat-react-native";

const AddMembersButton = () => {
  const { selectionStore, submit } = useChannelAddMembersContext();
  const isSelectionEmpty = useIsSelectionEmpty(selectionStore);

  return (
    <Button
      title="Add"
      disabled={isSelectionEmpty}
      onPress={async () => {
        try {
          await submit();
        } catch (error) {
          // handle the failure (e.g. show a toast)
        }
      }}
    />
  );
};
Previous
ChannelDetailsContext
Next
ChannelEditDetailsContext