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

    Variable ConfirmExitModalConst

    ConfirmExitModal: React.FC<ConfirmExitModalOptions> = ...

    ConfirmExitModal - Exit confirmation dialog with "End Event for All" option

    ConfirmExitModal is a React Native component that provides a confirmation interface when users want to leave a meeting. For host-level users (islevel='2'), it offers an additional option to end the event for all participants. Supports ban/kick actions.

    Key Features:

    • Personal exit confirmation ("Leave Room")
    • "End Event for All" option for hosts (islevel='2')
    • Ban/kick action support
    • Socket.io notification on exit
    • Position-configurable modal (4 corners)
    • Customizable exit confirmation handler
    • Cancel option to close modal

    UI Customization: This component can be replaced via uiOverrides.confirmExitModal to provide a completely custom exit confirmation interface.

    Configuration options

    Rendered exit confirmation modal

    // Basic usage for participant exit
    import React, { useState } from 'react';
    import { ConfirmExitModal } from 'mediasfu-reactnative-expo';
    import { io } from 'socket.io-client';

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

    return (
      <ConfirmExitModal
        isConfirmExitModalVisible={showExitModal}
        onConfirmExitClose={() => setShowExitModal(false)}
        member="John Doe"
        roomName="meeting-room-123"
        socket={socket}
        islevel="0" // Regular participant - only "Leave Room" option
      />
    );

    // Host usage with "End Event for All" option
    const handleExitConfirm = (options: ConfirmExitOptions) => {
      confirmExit(options);
      console.log('Exit action completed');
    };

    return (
      <ConfirmExitModal
        isConfirmExitModalVisible={showModal}
        onConfirmExitClose={handleClose}
        exitEventOnConfirm={handleExitConfirm}
        member="Host Name"
        roomName={roomId}
        socket={socketConnection}
        islevel="2" // Host - shows "End Event for All" option
        position="bottomRight"
        backgroundColor="#e74c3c"
      />
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        confirmExitModal: {
          component: MyCustomExitConfirmation,
          injectedProps: {
            theme: 'dark',
            confirmationText: 'Are you sure you want to leave?',
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility