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

    Variable MainGridComponentConst

    MainGridComponent: React.FC<MainGridComponentOptions> = ...

    MainGridComponent - Primary video grid container with meeting timer

    MainGridComponent is a React Native component that provides the main layout container for video participant grids. It includes an optional meeting progress timer overlay and centers child content within a defined area.

    Key Features:

    • Fixed-dimension grid container
    • Centered content layout
    • Meeting progress timer overlay
    • Visibility controls for grid and timer
    • Custom background colors
    • Advanced render override hooks

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

    Configuration options for the main grid

    Rendered main grid with optional timer overlay

    // Basic usage - Video grid with timer
    import React from 'react';
    import { MainGridComponent } from 'mediasfu-reactnative-expo';

    function VideoMeetingGrid() {
      return (
        <MainGridComponent
          backgroundColor="#1a1a1a"
          height={600}
          width={800}
          showAspect={true}
          showTimer={true}
          meetingProgressTime="00:15:32"
          timeBackgroundColor="rgba(0, 0, 0, 0.5)"
        >
          <FlexibleGrid componentsToRender={participantVideos} />
        </MainGridComponent>
      );
    }

    // Without timer overlay
    <MainGridComponent
      backgroundColor="black"
      height={500}
      width={700}
      showTimer={false}
      meetingProgressTime=""
    >
      <GridContent />
    </MainGridComponent>

    // With custom content renderer (add overlay watermark)
    <MainGridComponent
      backgroundColor="#000"
      height={720}
      width={1280}
      showTimer={true}
      meetingProgressTime="01:23:45"
      renderContent={({ defaultContent, dimensions }) => (
        <>
          {defaultContent}
          <View style={{ 
            position: 'absolute', 
            bottom: 20, 
            right: 20,
            opacity: 0.5,
          }}>
            <Text style={{ color: 'white' }}>Company Watermark</Text>
          </View>
        </>
      )}
    >
      <VideoGrid />
    </MainGridComponent>

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

    const sessionConfig = {
      credentials: { apiKey: 'your-api-key' },
      uiOverrides: {
        mainGridComponent: {
          component: MyCustomMainGrid,
          injectedProps: {
            showBorder: true,
            borderColor: '#007bff',
          },
        },
      },
    };

    // MyCustomMainGrid.tsx
    export const MyCustomMainGrid = (props: MainGridComponentOptions & { showBorder: boolean; borderColor: string }) => {
      return (
        <View style={{ 
          width: props.width, 
          height: props.height,
          backgroundColor: props.backgroundColor,
          borderWidth: props.showBorder ? 2 : 0,
          borderColor: props.borderColor,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
          {props.children}
          {props.showTimer && (
            <View style={{ position: 'absolute', top: 10, left: 10 }}>
              <Text style={{ color: 'white' }}>{props.meetingProgressTime}</Text>
            </View>
          )}
        </View>
      );
    };

    Settings

    Member Visibility