Const// Basic usage - 2x2 video grid
import React from 'react';
import { FlexibleVideo, VideoCard } from 'mediasfu-reactnative-expo';
function VideoGrid() {
const participants = [p1, p2, p3, p4];
const videoComponents = participants.map((p, idx) => (
<VideoCard
key={idx}
name={p.name}
participant={p}
videoStream={p.stream}
parameters={sessionParams}
/>
));
return (
<FlexibleVideo
customWidth={400}
customHeight={300}
rows={2}
columns={2}
componentsToRender={videoComponents}
showAspect={true}
backgroundColor="#000"
/>
);
}
// With screen sharing annotation
<FlexibleVideo
customWidth={800}
customHeight={600}
rows={1}
columns={1}
componentsToRender={[screenShareVideo]}
showAspect={true}
backgroundColor="#1a1a2e"
Screenboard={<ScreenboardComponent />}
annotateScreenStream={true}
localStreamScreen={localScreenStream}
/>
// Using uiOverrides for complete video grid replacement
import { MyCustomVideoGrid } from './MyCustomVideoGrid';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
flexibleVideoComponent: {
component: MyCustomVideoGrid,
injectedProps: {
layout: 'spotlight',
transition: 'smooth',
},
},
},
};
// MyCustomVideoGrid.tsx
export const MyCustomVideoGrid = (props: FlexibleVideoOptions & { layout: string; transition: string }) => {
return (
<View style={{ flex: 1 }}>
{props.layout === 'spotlight' ? (
<View style={{ flex: 1 }}>{props.componentsToRender[0]}</View>
) : (
props.componentsToRender.map((component, idx) => (
<View key={idx} style={{ width: props.customWidth, height: props.customHeight }}>
{component}
</View>
))
)}
{props.Screenboard}
</View>
);
};
FlexibleVideo - Video grid layout with screen sharing and annotation support
FlexibleVideo is a specialized React Native component for displaying video streams in a flexible grid layout. It extends FlexibleGrid with additional support for screen sharing overlays and real-time annotation capabilities.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.flexibleVideoComponentto provide a completely custom video grid implementation.