MediaSFU React Native
    Preparing search index...

    Variable ParticipantsModalConst

    ParticipantsModal: React.FC<ParticipantsModalOptions> = ...

    ParticipantsModal centralizes participant management actions—mute, message, remove—within a flexible modal. It adapts to co-host permissions, supports direct messaging shortcuts, and offers render overrides for tailor-made participant experiences.

    • Real-time list synchronized through parameters.getUpdatedAllParams.
    • Inline filtering with keyboard friendly TextInput.
    • Built-in handlers for muting, messaging, and removal, all overrideable.
    • Separate render components for primary and "others" participant lists.
    • Corner anchoring and theming via position and backgroundColor props.
    • Render overrides to swap container/content for custom UI frameworks.
    • Close button provides descriptive labels for assistive tech.
    • Participant actions surface through Pressables, inheriting screen reader cues.

    Modal configuration options.

    Rendered participant management modal.

    <ParticipantsModal
      isParticipantsModalVisible={visible}
      onParticipantsClose={handleClose}
      onParticipantsFilterChange={setFilter}
      participantsCounter={participants.length}
      parameters={parameters}
    />

    <ParticipantsModal
      isParticipantsModalVisible
      onParticipantsClose={close}
      onParticipantsFilterChange={setQuery}
      participantsCounter={filtered.length}
      onMuteParticipants={customMute}
      onMessageParticipants={customMessage}
      onRemoveParticipants={customRemove}
      backgroundColor="#151d2c"
      style={{ borderRadius: 24 }}
      parameters={params}
    />

    <ParticipantsModal
      {...props}
      RenderParticipantList={MyParticipantGrid}
      RenderParticipantListOthers={MyOverflowList}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility