ChannelAddMembersForm

A form for adding new members to a channel. It presents a searchable list of users, tracks the current selection, and exposes a confirm control in its header that adds the selected users to the channel, plus the notification list. The confirm button is disabled until at least one user is selected and shows a loading state while the request is in flight. Needs to be wrapped in a ChannelDetailsContextProvider that supplies the channel.

This is the form that the ChannelAddMembersButton renders inside its modal. You can render it yourself — in your own modal or a navigation screen — when building a custom members screen.

Best Practices

• Mount the form where the add-members UI should appear and dismiss it through onClose (it is also called after members are added).
• Wrap it in ChannelDetailsContextProvider so the user search can resolve the channel.
• Pass a custom searchSource to the form (or to ChannelAddMembersProvider) when you need to change how users are queried; otherwise rely on the built-in selection and submission handling rather than tracking selected users yourself.
• Override and configure building blocks like ChannelAddMembersFormHeader, ChannelAddMembersFormContent or AddMemberSearchResultItem by wrapping the form in WithComponents with an overrides map.

General Usage

import {
  OverlayProvider,
  Chat,
  ChannelDetailsContextProvider,
  ChannelAddMembersForm,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <ChannelDetailsContextProvider channel={channel}>
          <ChannelAddMembersForm onClose={() => navigation.goBack()} />
        </ChannelDetailsContextProvider>
      </Chat>
    </OverlayProvider>
  );
};

Props

Building blocks

ChannelAddMembersFormHeader

The header rendered above the list. It exposes the close control and the confirm button that adds the selected members (disabled until a user is selected, with a loading state while the request is in flight).

ChannelAddMembersFormContent

The user search and selection list rendered inside the form.

It renders an AddMemberSearchResultItem per matching user: