Const// Basic main grid with timer
<MainGridComponent
backgroundColor="#000"
height={600}
width={800}
meetingProgressTime="00:15:30"
showTimer
>
<FlexibleGrid
rows={2}
columns={2}
customWidth={400}
customHeight={300}
componentsToRender={videoTiles}
/>
</MainGridComponent>
// Hidden timer with custom background
<MainGridComponent
backgroundColor="#1a1a1a"
height={720}
width={1280}
meetingProgressTime="01:23:45"
showTimer={false}
timeBackgroundColor="rgba(0,0,0,0.7)"
style={{ borderRadius: 8 }}
>
<PresenterView participant={presenter} />
</MainGridComponent>
// With custom content layout
<MainGridComponent
backgroundColor="transparent"
height={500}
width={900}
meetingProgressTime="00:45:12"
renderContent={({ defaultContent, dimensions }) => (
<View style={{ position: 'relative' }}>
{defaultContent}
<WatermarkOverlay width={dimensions.width} height={dimensions.height} />
</View>
)}
>
<ParticipantGrid />
</MainGridComponent>
MainGridComponent renders the primary on-stage grid and optionally overlays the meeting progress timer. Consumers can swap the inner or outer layout through render overrides.
Key Features
showAspectLayout
widthandheightpropsAccessibility