MediaSFU React Native
    Preparing search index...

    Variable DisplaySettingsModalConst

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

    DisplaySettingsModal centralizes MediaSFU meeting display preferences in a compact, accessible modal. It supports rapid toggling of audiographs, full-screen overrides, and video optimization, and exposes convenient render overrides for advanced UI customization.

    • Connects directly to modifyDisplaySettings to persist layout changes.
    • Provides toggles for auto-wave animations, force display, and video prioritization.
    • Supports anchored positioning (topRight, topLeft, bottomRight, bottomLeft).
    • Allows render overrides for both the modal container and internal content.
    • Switch interactions are wrapped in Pressable components with accessibility roles and labels.
    • Close button exposes assistive text and supports keyboard/screen-reader activation.

    Configuration options controlling modal visibility, styling, and handlers.

    import React, { useState } from 'react';
    import { View, Button } from 'react-native';
    import { DisplaySettingsModal } from 'mediasfu-reactnative';

    export function MeetingControls() {
      const [visible, setVisible] = useState(false);

      return (
        <View>
          <Button title="Display Settings" onPress={() => setVisible(true)} />
          <DisplaySettingsModal
            isDisplaySettingsModalVisible={visible}
            onDisplaySettingsClose={() => setVisible(false)}
            parameters={{
              meetingDisplayType: 'video',
              autoWave: true,
              forceFullDisplay: false,
              meetingVideoOptimized: false,
              getUpdatedAllParams: () => ({}),
            }}
          />
        </View>
      );
    }

    <DisplaySettingsModal
      isDisplaySettingsModalVisible={visible}
      onDisplaySettingsClose={handleClose}
      parameters={parameters}
      renderContainer={({ defaultContainer }) => (
        <CustomSheet onDismiss={handleClose}>{defaultContainer}</CustomSheet>
      )}
      renderContent={({ defaultContent }) => (
        <ScrollView>{defaultContent}</ScrollView>
      )}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility