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

    Variable FlexibleGridConst

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

    FlexibleGrid - Dynamic grid layout for displaying multiple components

    FlexibleGrid is a responsive React Native component that arranges an array of components in a customizable grid layout. It supports dynamic rows/columns, custom cell dimensions, and aspect ratio preservation.

    Key Features:

    • Dynamic row and column configuration
    • Custom cell dimensions
    • Aspect ratio preservation option
    • Background color customization per cell
    • Responsive layout adjustments
    • Efficient component rendering

    UI Customization: This component can be replaced via uiOverrides.flexibleGridComponent to provide a completely custom grid layout implementation.

    Configuration options for the FlexibleGrid component

    Rendered grid layout with components

    // Basic usage - 2x2 grid of video cards
    import React from 'react';
    import { FlexibleGrid, VideoCard } from 'mediasfu-reactnative-expo';

    function ParticipantGrid() {
      const participants = [participant1, participant2, participant3, participant4];
      
      const gridComponents = participants.map((p, idx) => (
        <VideoCard
          key={idx}
          name={p.name}
          participant={p}
          videoStream={p.stream}
          parameters={sessionParams}
        />
      ));

      return (
        <FlexibleGrid
          customWidth={200}
          customHeight={150}
          rows={2}
          columns={2}
          componentsToRender={gridComponents}
          backgroundColor="#000"
        />
      );
    }

    // With aspect ratio and custom styling
    <FlexibleGrid
      customWidth={300}
      customHeight={225}
      rows={3}
      columns={3}
      componentsToRender={audioCards}
      showAspect={true}
      backgroundColor="#1a1a2e"
      style={{ padding: 10, borderRadius: 8 }}
    />

    // Using uiOverrides for complete grid replacement
    import { MyCustomGrid } from './MyCustomGrid';

    const sessionConfig = {
      credentials: { apiKey: 'your-api-key' },
      uiOverrides: {
        flexibleGridComponent: {
          component: MyCustomGrid,
          injectedProps: {
            gap: 10,
            animateTransitions: true,
          },
        },
      },
    };

    // MyCustomGrid.tsx
    export const MyCustomGrid = (props: FlexibleGridOptions & { gap: number; animateTransitions: boolean }) => {
      return (
        <View style={{ gap: props.gap }}>
          {props.componentsToRender.map((component, idx) => (
            <View key={idx} style={{ width: props.customWidth, height: props.customHeight }}>
              {component}
            </View>
          ))}
        </View>
      );
    };

    Number of columns in the grid.

    Array of components or elements to render in the grid.

    Flag to enable aspect ratio for the grid.

    Background color for each grid item.

    The rendered FlexibleGrid component.

    import React from 'react';
    import { FlexibleGrid } from 'mediasfu-reactnative-expo';

    function App() {
      const components = [
        <Text key={1}>Item 1</Text>,
        <Text key={2}>Item 2</Text>,
        <Text key={3}>Item 3</Text>
      ];

      return (
        <FlexibleGrid
          customWidth={100}
          customHeight={100}
          rows={2}
          columns={2}
          componentsToRender={components}
          showAspect={true}
          backgroundColor="lightgray"
        />
      );
    }

    export default App;

    Settings

    Member Visibility