Const// Basic secondary grid with timer
<OtherGridComponent
backgroundColor="#333"
height={200}
width={400}
meetingProgressTime="00:12:45"
showTimer
>
<FlexibleGrid
rows={1}
columns={3}
customWidth={400}
customHeight={200}
componentsToRender={waitingParticipants}
/>
</OtherGridComponent>
// Hidden aspect with custom timer color
<OtherGridComponent
backgroundColor="#1a1a1a"
height={150}
width={600}
meetingProgressTime="01:05:20"
showTimer={false}
showAspect={false}
timeBackgroundColor="rgba(50,50,50,0.8)"
>
<AudioOnlyGrid participants={audioParticipants} />
</OtherGridComponent>
// With custom content overlay
<OtherGridComponent
backgroundColor="transparent"
height={250}
width={500}
meetingProgressTime="00:30:15"
showTimer
renderContent={({ defaultContent, dimensions }) => (
<View>
{defaultContent}
<BreakoutRoomLabel roomName="Room 2" />
</View>
)}
>
<BreakoutRoomGrid room={room2} />
</OtherGridComponent>
OtherGridComponent renders the secondary participant grid, optionally showing a meeting progress timer in the corner. Override hooks allow complete control over the inner layout and outer wrapper.
Key Features
showAspectpropLayout
widthandheightAccessibility