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

    Interface FlexibleGridOptions

    Interface defining the props for the FlexibleGrid component.

    FlexibleGrid provides a dynamic grid layout for displaying multiple components with customizable dimensions and aspect ratios.

    FlexibleGridOptions

    Grid Configuration:

    interface FlexibleGridOptions {
        customWidth: number;
        customHeight: number;
        rows: number;
        columns: number;
        componentsToRender: ReactNode[];
        showAspect?: boolean;
        backgroundColor?: 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

    customWidth customHeight rows columns componentsToRender showAspect? backgroundColor? style? renderContent? renderContainer?

    Properties

    customWidth: number

    Width for each grid cell (in pixels)

    customHeight: number

    Height for each grid cell (in pixels)

    Display Options:

    rows: number

    Number of rows in the grid layout

    columns: number

    Number of columns in the grid layout

    componentsToRender: ReactNode[]

    Array of components to display in grid cells

    Cell Dimensions:

    showAspect?: boolean

    Whether to maintain aspect ratio for grid cells

    backgroundColor?: string

    Background color for each grid cell

    Styling:

    style?: object

    Custom styles for the grid container

    Advanced Render Overrides:

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

    Function to wrap or replace the default grid content

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

    Function to wrap or replace the entire grid container

    Settings

    Member Visibility

    On This Page

    Properties