MediaSFU React Native
    Preparing search index...

    Variable FlexibleGridConst

    FlexibleGrid: React.FC<FlexibleGridOptions> = ...

    FlexibleGrid arranges arbitrary children into a fixed row/column matrix. It is primarily used for media tiles that need explicit sizing while still allowing consumers to override either the content or the wrapper container.

    • Automatically arranges children into rows and columns with fixed cell dimensions
    • Supports optional square aspect ratio wrapper
    • Re-renders when column count changes
    • Exposes render overrides for custom layouts
    • Grid structure provides logical navigation order for screen readers
    • Each cell can receive its own accessibility properties via children
    // Basic grid with video tiles
    <FlexibleGrid
      customWidth={200}
      customHeight={150}
      rows={2}
      columns={3}
      componentsToRender={[
        <VideoTile key="1" participantId="user1" />,
        <VideoTile key="2" participantId="user2" />,
        <VideoTile key="3" participantId="user3" />,
        <VideoTile key="4" participantId="user4" />,
        <VideoTile key="5" participantId="user5" />,
        <VideoTile key="6" participantId="user6" />,
      ]}
      backgroundColor="#1a1a1a"
    />

    // Square aspect grid with custom container
    <FlexibleGrid
      customWidth={100}
      customHeight={100}
      rows={3}
      columns={3}
      componentsToRender={audienceCards}
      showAspect
      renderContainer={({ defaultContainer, dimensions }) => (
        <Animated.View style={{ opacity: fadeAnim }}>
          {defaultContainer}
        </Animated.View>
      )}
    />

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility