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

    Variable BreakoutRoomsModalConst

    BreakoutRoomsModal: React.FC<BreakoutRoomsModalOptions> = ...

    BreakoutRoomsModal - Breakout room creation and management interface

    BreakoutRoomsModal is a React Native component that provides hosts with controls to create multiple breakout rooms, assign participants to rooms, and manage the breakout session lifecycle (start/stop). Participants can be manually assigned or randomly distributed across rooms.

    Key Features:

    • Create multiple breakout rooms (customizable count)
    • Manual participant assignment to rooms
    • Random participant distribution option
    • Edit room assignments (add/remove participants)
    • Duplicate participant prevention
    • Start/stop breakout session controls
    • Real-time Socket.io synchronization
    • Display mode switching for breakout view
    • Validation for starting (all participants assigned)

    UI Customization: This component can be replaced via uiOverrides.breakoutRoomsModal to provide a completely custom breakout room management interface.

    Configuration options

    Rendered breakout rooms modal

    // Basic usage with manual assignment
    import React, { useState } from 'react';
    import { BreakoutRoomsModal } from 'mediasfu-reactnative-expo';
    import { io } from 'socket.io-client';

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

    const breakoutParams = {
      participants: [
        { name: 'John', id: '1', islevel: '0' },
        { name: 'Jane', id: '2', islevel: '0' },
        { name: 'Bob', id: '3', islevel: '0' },
      ],
      breakoutRooms: [[], []], // 2 empty rooms
      breakOutRoomStarted: false,
      breakOutRoomEnded: false,
      currentRoomIndex: null,
      canStartBreakout: false,
      roomName: 'main-meeting',
      socket: socket,
      updateBreakoutRooms: (rooms) => console.log('Updated:', rooms),
      updateBreakOutRoomStarted: (started) => console.log('Started:', started),
      // ... other required parameters
    };

    return (
      <BreakoutRoomsModal
        isVisible={showBreakout}
        onBreakoutRoomsClose={() => setShowBreakout(false)}
        parameters={breakoutParams}
      />
    );

    // With random assignment and custom positioning
    return (
      <BreakoutRoomsModal
        isVisible={isVisible}
        onBreakoutRoomsClose={handleClose}
        parameters={breakoutParameters}
        position="center"
        backgroundColor="#2c3e50"
      />
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        breakoutRoomsModal: {
          component: MyCustomBreakoutManager,
          injectedProps: {
            theme: 'dark',
            allowAutoAssign: true,
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility