MediaSFU React Native
    Preparing search index...

    Interface MainAspectComponentOptions

    Options for rendering MainAspectComponent.

    MainAspectComponentOptions

    Content:

    interface MainAspectComponentOptions {
        backgroundColor?: string;
        children: ReactNode;
        showControls?: boolean;
        containerWidthFraction?: number;
        containerHeightFraction?: number;
        defaultFraction?: number;
        updateIsWideScreen: (isWide: boolean) => void;
        updateIsMediumScreen: (isMedium: boolean) => void;
        updateIsSmallScreen: (isSmall: boolean) => void;
        style?: StyleProp<ViewStyle>;
        renderContent?: (
            options: {
                defaultContent: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
        renderContainer?: (
            options: {
                defaultContainer: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
    }
    Index

    Properties

    backgroundColor?: string

    Background color for the container.

    children: ReactNode

    Elements rendered inside the aspect container.

    Appearance:

    showControls?: boolean

    Adjusts vertical sizing when control bars are visible.

    containerWidthFraction?: number

    Fraction of window width used as the container width.

    containerHeightFraction?: number

    Fraction of window height used as the container height.

    defaultFraction?: number

    Multiplier applied to height when controls are visible.

    Responsive Flags:

    updateIsWideScreen: (isWide: boolean) => void

    Callback invoked when the layout represents a wide screen.

    updateIsMediumScreen: (isMedium: boolean) => void

    Callback invoked for medium screen threshold.

    updateIsSmallScreen: (isSmall: boolean) => void

    Callback invoked for small screen threshold.

    Advanced Render Overrides:

    style?: StyleProp<ViewStyle>

    Additional style overrides for the wrapper.

    Sizing:

    renderContent?: (
        options: {
            defaultContent: Element;
            dimensions: { width: number; height: number };
        },
    ) => Element

    Customize the child layout within the container.

    renderContainer?: (
        options: {
            defaultContainer: Element;
            dimensions: { width: number; height: number };
        },
    ) => Element

    Replace the outer container element.