# 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](https://reactjs.org/docs/context.html).

`ChannelAddMembersProvider` 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 inside [`Chat`](/chat/docs/sdk/react-native/core-components/chat/) because it depends on [`ChatContext`](/chat/docs/sdk/react-native/contexts/chat-context/) 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:

```tsx
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:

```tsx
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`.

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

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

## Values

| Value               | Description                                                                                                                                                                                            | Type                  |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| `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`](https://github.com/GetStream/stream-chat-js/blob/master/src/search_controller.ts) 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

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


---

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

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