MediaSFU React Native
    Preparing search index...

    Interface FlexibleVideoOptions

    Options for rendering FlexibleVideo.

    FlexibleVideoOptions

    Metrics:

    interface FlexibleVideoOptions {
        customWidth: number;
        customHeight: number;
        rows: number;
        columns: number;
        componentsToRender: ReactNode[];
        showAspect?: boolean;
        backgroundColor?: string;
        Screenboard?: ReactNode;
        annotateScreenStream?: boolean;
        localStreamScreen?: MediaStream;
        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

    customWidth: number

    Width for each tile.

    customHeight: number

    Height for each tile.

    rows: number

    Row count for the grid.

    columns: number

    Column count for the grid.

    Content:

    componentsToRender: ReactNode[]

    Elements rendered within the grid cells.

    showAspect?: boolean

    Forces a square container wrapper when true.

    backgroundColor?: string

    Background color for each cell.

    Screenboard?: ReactNode

    Optional overlay element drawn above the grid.

    Appearance:

    annotateScreenStream?: boolean

    Enables local screen annotation layout adjustments.

    localStreamScreen?: MediaStream

    Local screen stream used for measurements while annotating.

    Advanced Render Overrides:

    style?: StyleProp<ViewStyle>

    Additional styles for the outer grid container.

    Annotation:

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

    Customize the inner grid markup or overlay composition.

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

    Replace the entire outer container.