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

    Variable MenuModalConst

    MenuModal: React.FC<MenuModalOptions> = ...

    MenuModal - Meeting menu with room info, custom actions, and share options

    MenuModal is a comprehensive React Native modal component that displays meeting information (room name, passcode), custom action buttons, and sharing capabilities. It's typically accessed from a menu/hamburger button in the main UI.

    Key Features:

    • Meeting ID and passcode display (for authorized users)
    • Custom action buttons with icons and handlers
    • Built-in share buttons for inviting participants
    • Flexible positioning (4 screen corners)
    • Scrollable content for long lists
    • Responsive design for different screen sizes

    UI Customization: This component can be replaced via uiOverrides.menuModalComponent to provide a completely custom menu modal implementation.

    Configuration options for the MenuModal component

    Rendered menu modal with meeting info and actions

    // Basic usage - Display menu modal with default settings
    import React, { useState } from 'react';
    import { MenuModal } from 'mediasfu-reactnative-expo';

    function MeetingControls() {
      const [menuVisible, setMenuVisible] = useState(false);
      
      return (
        <>
          <Button title="Menu" onPress={() => setMenuVisible(true)} />
          <MenuModal
            isVisible={menuVisible}
            onClose={() => setMenuVisible(false)}
            backgroundColor="#83c0e9"
            position="bottomRight"
            roomName="MeetingRoom123"
            adminPasscode="456789"
            islevel="2"
            eventType="conference"
            shareButtons={true}
          />
        </>
      );
    }

    // With custom action buttons
    <MenuModal
      isVisible={showMenu}
      onClose={() => setShowMenu(false)}
      backgroundColor="#1a1a2e"
      position="topRight"
      roomName="TeamStandup"
      adminPasscode="secret123"
      islevel="1"
      eventType="webinar"
      customButtons={[
        {
          action: () => console.log('Settings clicked'),
          show: true,
          backgroundColor: '#4CAF50',
          icon: 'cog',
          text: 'Settings',
        },
        {
          action: () => console.log('Help clicked'),
          show: true,
          backgroundColor: '#2196F3',
          icon: 'question-circle',
          text: 'Help',
        },
      ]}
      shareButtons={true}
      localLink="https://meet.example.com/room123"
    />

    // Using uiOverrides for complete modal replacement
    import { MyCustomMenuModal } from './MyCustomMenuModal';

    const sessionConfig = {
      credentials: { apiKey: 'your-api-key' },
      uiOverrides: {
        menuModalComponent: {
          component: MyCustomMenuModal,
          injectedProps: {
            theme: 'dark',
            compactMode: true,
          },
        },
      },
    };

    // MyCustomMenuModal.tsx
    export const MyCustomMenuModal = (props: MenuModalOptions & { theme: string; compactMode: boolean }) => {
      return (
        <Modal visible={props.isVisible} onRequestClose={props.onClose}>
          <View style={{ backgroundColor: props.theme === 'dark' ? '#000' : '#fff' }}>
            <Text>Room: {props.roomName}</Text>
            <Text>Passcode: {props.adminPasscode}</Text>
            <Button title="Close" onPress={props.onClose} />
          </View>
        </Modal>
      );
    };

    Settings

    Member Visibility