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

    Variable DisplaySettingsModalConst

    DisplaySettingsModal: React.FC<DisplaySettingsModalOptions> = ...

    DisplaySettingsModal - Visual display and optimization settings interface

    DisplaySettingsModal is a React Native component that provides controls for configuring how the meeting content is displayed and rendered. It offers settings for display mode, participant animations, full-screen forcing, and video performance optimization.

    Key Features:

    • Display mode selection (video, media, all)
    • Auto-wave animation toggle for participants
    • Force full-screen display option
    • Video rendering optimization toggle
    • Position-configurable modal (4 corners)
    • Real-time settings persistence
    • Custom settings handler support

    UI Customization: This component can be replaced via uiOverrides.displaySettingsModal to provide a completely custom display settings interface.

    Configuration options

    Rendered display settings modal

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

    const [showSettings, setShowSettings] = useState(false);

    const displayParams = {
      meetingDisplayType: 'video',
      autoWave: true,
      forceFullDisplay: false,
      meetingVideoOptimized: false,
      getUpdatedAllParams: () => ({ ...displayParams }),
    };

    return (
      <DisplaySettingsModal
        isDisplaySettingsModalVisible={showSettings}
        onDisplaySettingsClose={() => setShowSettings(false)}
        parameters={displayParams}
      />
    );

    // With custom position and styling
    const handleModifySettings = async (options: ModifyDisplaySettingsOptions) => {
      await modifyDisplaySettings(options);
      console.log('Display settings updated');
    };

    return (
      <DisplaySettingsModal
        isDisplaySettingsModalVisible={showDisplaySettings}
        onDisplaySettingsClose={() => setShowDisplaySettings(false)}
        onModifyDisplaySettings={handleModifySettings}
        parameters={displayParameters}
        position="bottomRight"
        backgroundColor="#2c3e50"
      />
    );

    // With performance optimization enabled
    const optimizedParams = {
      meetingDisplayType: 'video',
      autoWave: false, // Disable for better performance
      forceFullDisplay: true,
      meetingVideoOptimized: true, // Enable video optimization
      getUpdatedAllParams: () => ({ ...optimizedParams }),
    };

    return (
      <DisplaySettingsModal
        isDisplaySettingsModalVisible={isVisible}
        onDisplaySettingsClose={handleClose}
        parameters={optimizedParams}
      />
    );

    // Using custom UI via uiOverrides
    const config = {
      uiOverrides: {
        displaySettingsModal: {
          component: MyCustomDisplaySettings,
          injectedProps: {
            theme: 'dark',
            showAdvancedOptions: true,
          },
        },
      },
    };

    return <MyMeetingComponent config={config} />;

    Settings

    Member Visibility