Const// Basic usage - 70/30 vertical split
import React, { useState } from 'react';
import { MainScreenComponent, ComponentSizes } from 'mediasfu-reactnative-expo';
function SplitScreenMeeting() {
const [sizes, setSizes] = useState<ComponentSizes>({
mainHeight: 0,
otherHeight: 0,
mainWidth: 0,
otherWidth: 0,
});
return (
<MainScreenComponent
mainSize={70}
doStack={true}
containerWidthFraction={1}
containerHeightFraction={1}
showControls={true}
componentSizes={sizes}
updateComponentSizes={setSizes}
>
<MainVideoGrid />
<ParticipantsList />
</MainScreenComponent>
);
}
// Side-by-side layout (no stacking)
<MainScreenComponent
mainSize={60}
doStack={false}
containerWidthFraction={0.95}
containerHeightFraction={0.9}
showControls={true}
componentSizes={sizes}
updateComponentSizes={setSizes}
>
<VideoArea />
<ChatPanel />
</MainScreenComponent>
// With custom content renderer (add divider)
<MainScreenComponent
mainSize={75}
doStack={true}
showControls={true}
componentSizes={sizes}
updateComponentSizes={setSizes}
renderContent={({ defaultContent, dimensions }) => {
const children = React.Children.toArray(defaultContent);
return (
<>
{children[0]}
<View style={{ height: 2, backgroundColor: '#007bff', width: '100%' }} />
{children[1]}
</>
);
}}
>
<MainContent />
<SecondaryContent />
</MainScreenComponent>
// Using uiOverrides for complete layout replacement
import { MyCustomSplitScreen } from './MyCustomSplitScreen';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
mainScreenComponent: {
component: MyCustomSplitScreen,
injectedProps: {
animateTransitions: true,
minMainSize: 50,
},
},
},
};
// MyCustomSplitScreen.tsx
export const MyCustomSplitScreen = (props: MainScreenComponentOptions & { animateTransitions: boolean; minMainSize: number }) => {
const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
React.useEffect(() => {
const calculateSizes = () => {
const { width, height } = Dimensions.get('window');
const actualMainSize = Math.max(props.mainSize, props.minMainSize);
const mainHeight = props.doStack ? (height * actualMainSize) / 100 : height;
const otherHeight = props.doStack ? height - mainHeight : height;
props.updateComponentSizes({
mainHeight,
otherHeight,
mainWidth: width,
otherWidth: width,
});
setDimensions({ width, height });
};
const subscription = Dimensions.addEventListener('change', calculateSizes);
calculateSizes();
return () => subscription?.remove();
}, [props.mainSize, props.doStack]);
const children = React.Children.toArray(props.children);
return (
<View style={{ flex: 1, flexDirection: props.doStack ? 'column' : 'row' }}>
{children}
</View>
);
};
MainScreenComponent - Responsive split-screen layout with dynamic sizing
MainScreenComponent is a React Native component that manages split-screen layouts with main and secondary content areas. It dynamically calculates component dimensions based on stacking mode, screen size, and percentage allocations, automatically adapting to window resizing and orientation changes.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.mainScreenComponentto provide a completely custom split-screen layout system.