Const// Basic usage - Secondary video grid with timer
import React from 'react';
import { OtherGridComponent } from 'mediasfu-reactnative-expo';
function SecondaryVideoGrid() {
return (
<OtherGridComponent
backgroundColor="#2c2c2c"
width={300}
height={400}
showAspect={true}
showTimer={true}
meetingProgressTime="00:15:32"
timeBackgroundColor="rgba(0, 0, 0, 0.6)"
>
<FlexibleGrid componentsToRender={overflowParticipants} />
</OtherGridComponent>
);
}
// Without timer overlay and custom styling
<OtherGridComponent
backgroundColor="#1a1a1a"
width="80%"
height={500}
showTimer={false}
meetingProgressTime=""
style={{ borderRadius: 8, borderWidth: 2, borderColor: '#007bff' }}
>
<SecondaryParticipantGrid />
</OtherGridComponent>
// With custom content renderer (add participant count)
<OtherGridComponent
backgroundColor="black"
width={350}
height={450}
showTimer={true}
meetingProgressTime="01:23:45"
renderContent={({ defaultContent, dimensions }) => (
<>
<View style={{
position: 'absolute',
top: 10,
right: 10,
zIndex: 100,
backgroundColor: 'rgba(0,0,0,0.7)',
padding: 5,
borderRadius: 4,
}}>
<Text style={{ color: 'white', fontSize: 12 }}>
{overflowCount} more participants
</Text>
</View>
{defaultContent}
</>
)}
>
<OverflowGrid />
</OtherGridComponent>
// Using uiOverrides for complete grid replacement
import { MyCustomOtherGrid } from './MyCustomOtherGrid';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
otherGridComponent: {
component: MyCustomOtherGrid,
injectedProps: {
showBorder: true,
borderStyle: 'dashed',
},
},
},
};
// MyCustomOtherGrid.tsx
export const MyCustomOtherGrid = (props: OtherGridComponentOptions & { showBorder: boolean; borderStyle: string }) => {
return (
<View style={{
width: typeof props.width === 'number' ? props.width : undefined,
height: typeof props.height === 'number' ? props.height : undefined,
backgroundColor: props.backgroundColor,
borderWidth: props.showBorder ? 2 : 0,
borderStyle: props.borderStyle as any,
borderColor: '#007bff',
position: 'relative',
}}>
{props.children}
{props.showTimer && (
<View style={{
position: 'absolute',
top: 5,
left: 5,
backgroundColor: props.timeBackgroundColor || 'rgba(0,0,0,0.5)',
padding: 4,
borderRadius: 4,
}}>
<Text style={{ color: 'white', fontSize: 10 }}>
{props.meetingProgressTime}
</Text>
</View>
)}
</View>
);
};
OtherGridComponent - Secondary video grid with meeting timer
OtherGridComponent is a React Native component that provides a secondary grid container for additional video participants (typically used when the main grid is full). It includes bordered styling and an optional meeting progress timer overlay.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.otherGridComponentto provide a completely custom secondary grid layout.