MediaSFU React Native (Expo)
    Preparing search index...

    Variable CoHostModalConst

    CoHostModal: React.FC<CoHostModalOptions> = ...

    CoHostModal - Co-host assignment and responsibility management interface

    CoHostModal is a React Native component that provides host users with controls to assign a co-host from participant list and configure their responsibilities (media management, participant management, settings access). Changes are broadcast in real-time via Socket.io.

    Key Features:

    • Co-host participant selection from dropdown
    • Granular responsibility toggles (manage media, manage participants, manage settings)
    • Real-time updates via Socket.io
    • Current co-host display
    • Validation and error alerts
    • Position-configurable modal (4 corners)
    • Scrollable responsibility list

    UI Customization: This component can be replaced via uiOverrides.coHostModal to provide a completely custom co-host management interface.

    Configuration options

    Rendered co-host modal

    // Basic usage with participant selection
    import React, { useState } from 'react';
    import { CoHostModal } from 'mediasfu-reactnative-expo';
    import { io } from 'socket.io-client';

    const socket = io('https://your-server.com');
    const [showCoHost, setShowCoHost] = useState(false);

    const participants = [
      { name: 'John Doe', islevel: '1', id: '123' },
      { name: 'Jane Smith', islevel: '2', id: '456' },
    ];

    const responsibilities = [
      { name: 'manageParticipants', value: true, dedicated: false },
      { name: 'manageMedia', value: false, dedicated: true },
      { name: 'manageSettings', value: true, dedicated: false },
    ];

    return (
      <CoHostModal
        isCoHostModalVisible={showCoHost}
        onCoHostClose={() => setShowCoHost(false)}
        currentCohost="John Doe"
        participants={participants}
        coHostResponsibility={responsibilities}
        roomName="meeting-room-123"
        socket={socket}
        updateCoHost={(name) => console.log('New co-host:', name)}
        updateCoHostResponsibility={(resp) => console.log('Updated:', resp)}
        updateIsCoHostModalVisible={setShowCoHost}
        showAlert={({ message, type }) => alert(message)}
      />
    );

    // With custom positioning and alert handling
    const handleModifySettings = (settings: ModifyCoHostSettingsOptions) => {
      modifyCoHostSettings(settings);
      console.log('Co-host settings applied');
    };

    return (
      <CoHostModal
        isCoHostModalVisible={isVisible}
        onCoHostClose={handleClose}
        onModifyEventSettings={handleModifySettings}
        currentCohost={currentCoHost}
        participants={participantList}
        coHostResponsibility={coHostResponsibilities}
        roomName={roomId}
        socket={socketInstance}
        updateCoHost={setCurrentCoHost}
        updateCoHostResponsibility={setCoHostResponsibilities}
        updateIsCoHostModalVisible={setIsVisible}
        position="bottomRight"
        backgroundColor="#2c3e50"
        showAlert={showCustomAlert}
      />
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        coHostModal: {
          component: MyCustomCoHostManager,
          injectedProps: {
            theme: 'dark',
            allowMultipleCoHosts: false,
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility