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

    Interface MainGridComponentOptions

    Configuration options for the MainGridComponent.

    MainGridComponentOptions

    Content:

    interface MainGridComponentOptions {
        children: ReactNode;
        backgroundColor: string;
        height: number;
        width: number;
        showAspect?: boolean;
        timeBackgroundColor?: string;
        showTimer?: boolean;
        meetingProgressTime: string;
        style?: object;
        renderContent?: (
            options: {
                defaultContent: ReactNode;
                dimensions: { width: number; height: number };
            },
        ) => ReactNode;
        renderContainer?: (
            options: {
                defaultContainer: ReactNode;
                dimensions: { width: number; height: number };
            },
        ) => ReactNode;
    }
    Index

    Properties

    children: ReactNode

    Child components to render inside the main grid (typically video/audio participant cards)

    Dimensions:

    backgroundColor: string

    Background color for the grid container

    height: number

    Height of the grid container in pixels

    Display Control:

    width: number

    Width of the grid container in pixels

    showAspect?: boolean

    Whether to show the grid container (false hides the entire grid)

    Meeting Progress Timer:

    timeBackgroundColor?: string

    Background color for the timer overlay

    Styling:

    showTimer?: boolean

    Whether to display the meeting progress timer overlay

    meetingProgressTime: string

    Time string to display on the timer (e.g., "12:34", "01:05:23")

    style?: object

    Additional custom styles to apply to the container

    Advanced Render Overrides:

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

    Optional custom renderer for grid content (receives defaultContent and dimensions)

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

    Optional custom renderer for outer container (receives defaultContainer and dimensions)