Const// Basic usage - Full-screen container
import React from 'react';
import { MainContainerComponent } from 'mediasfu-reactnative-expo';
import { Text } from 'react-native';
function MeetingApp() {
return (
<MainContainerComponent backgroundColor="#000000">
<Text style={{ color: 'white' }}>Meeting Content</Text>
</MainContainerComponent>
);
}
// With fractional dimensions and margins
<MainContainerComponent
backgroundColor="#1a1a1a"
containerWidthFraction={0.95}
containerHeightFraction={0.9}
marginLeft={20}
marginRight={20}
marginTop={10}
marginBottom={10}
padding={15}
>
<MeetingLayout />
</MainContainerComponent>
// With custom content renderer (add header/footer)
<MainContainerComponent
backgroundColor="white"
renderContent={({ defaultContent, dimensions }) => (
<>
<View style={{ height: 60, backgroundColor: '#007bff' }}>
<Text>Meeting Header</Text>
</View>
{defaultContent}
<View style={{ height: 40, backgroundColor: '#f0f0f0' }}>
<Text>Footer - {dimensions.width}x{dimensions.height}</Text>
</View>
</>
)}
>
<MeetingContent />
</MainContainerComponent>
// Using uiOverrides for complete container replacement
import { MyCustomMainContainer } from './MyCustomMainContainer';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
mainContainerComponent: {
component: MyCustomMainContainer,
injectedProps: {
theme: 'dark',
showGrid: true,
},
},
},
};
// MyCustomMainContainer.tsx
export const MyCustomMainContainer = (props: MainContainerComponentOptions & { theme: string; showGrid: boolean }) => {
return (
<View style={{
flex: 1,
backgroundColor: props.theme === 'dark' ? '#000' : '#fff',
borderWidth: props.showGrid ? 1 : 0,
}}>
{props.children}
</View>
);
};
MainContainerComponent - Top-level responsive layout container
MainContainerComponent is a React Native component that provides the primary layout container for the entire meeting interface. It automatically responds to window size changes and calculates dimensions based on fractional values, enabling consistent layouts across different screen sizes and orientations.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.mainContainerComponentto provide a completely custom top-level layout container.