Const// Basic usage - Full-screen with control bar adjustment
import React from 'react';
import { MainAspectComponent } from 'mediasfu-reactnative-expo';
function ResponsiveMeetingLayout() {
const [isWide, setIsWide] = React.useState(false);
const [isMedium, setIsMedium] = React.useState(false);
const [isSmall, setIsSmall] = React.useState(false);
return (
<MainAspectComponent
backgroundColor="#000000"
showControls={true}
containerWidthFraction={1}
containerHeightFraction={1}
defaultFraction={0.94}
updateIsWideScreen={setIsWide}
updateIsMediumScreen={setIsMedium}
updateIsSmallScreen={setIsSmall}
>
{isWide && <WideScreenLayout />}
{isMedium && <MediumScreenLayout />}
{isSmall && <SmallScreenLayout />}
</MainAspectComponent>
);
}
// Custom fractions without control bar adjustment
<MainAspectComponent
backgroundColor="white"
showControls={false}
containerWidthFraction={0.85}
containerHeightFraction={0.9}
updateIsWideScreen={(isWide) => console.log('Wide:', isWide)}
updateIsMediumScreen={(isMedium) => console.log('Medium:', isMedium)}
updateIsSmallScreen={(isSmall) => console.log('Small:', isSmall)}
>
<MeetingContent />
</MainAspectComponent>
// With custom content renderer (add breakpoint indicator)
<MainAspectComponent
backgroundColor="#f0f0f0"
showControls={true}
updateIsWideScreen={setIsWide}
updateIsMediumScreen={setIsMedium}
updateIsSmallScreen={setIsSmall}
renderContent={({ defaultContent, dimensions }) => (
<>
<View style={{ position: 'absolute', top: 5, right: 5, zIndex: 100 }}>
<Text>
{dimensions.width >= 768 ? 'Wide' : dimensions.width >= 576 ? 'Medium' : 'Small'}
({dimensions.width}x{dimensions.height})
</Text>
</View>
{defaultContent}
</>
)}
>
<ResponsiveGrid />
</MainAspectComponent>
// Using uiOverrides for complete aspect container replacement
import { MyCustomAspectContainer } from './MyCustomAspectContainer';
const sessionConfig = {
credentials: { apiKey: 'your-api-key' },
uiOverrides: {
mainAspectComponent: {
component: MyCustomAspectContainer,
injectedProps: {
customBreakpoints: { wide: 1024, medium: 640 },
},
},
},
};
// MyCustomAspectContainer.tsx
export const MyCustomAspectContainer = (props: MainAspectComponentOptions & { customBreakpoints: { wide: number; medium: number } }) => {
const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
React.useEffect(() => {
const updateDimensions = () => {
const { width, height } = Dimensions.get('window');
setDimensions({ width, height });
props.updateIsWideScreen(width >= props.customBreakpoints.wide);
props.updateIsMediumScreen(width >= props.customBreakpoints.medium && width < props.customBreakpoints.wide);
props.updateIsSmallScreen(width < props.customBreakpoints.medium);
};
const subscription = Dimensions.addEventListener('change', updateDimensions);
updateDimensions();
return () => subscription?.remove();
}, []);
return (
<View style={{ width: dimensions.width, height: dimensions.height, backgroundColor: props.backgroundColor }}>
{props.children}
</View>
);
};
MainAspectComponent - Responsive container with screen size detection
MainAspectComponent is a React Native component that dynamically adjusts its dimensions based on window size and provides real-time screen size state updates (wide/medium/small). It automatically recalculates dimensions on window resize and adjusts available height when control bars are visible.
Key Features:
UI Customization: This component can be replaced via
uiOverrides.mainAspectComponentto provide a completely custom aspect-aware container.