Const// Basic responsive main area
<MainAspectComponent
backgroundColor="#000"
showControls
updateIsWideScreen={(isWide) => setIsWideScreen(isWide)}
updateIsMediumScreen={(isMedium) => setIsMediumScreen(isMedium)}
updateIsSmallScreen={(isSmall) => setIsSmallScreen(isSmall)}
>
<VideoGridContainer />
</MainAspectComponent>
// Custom fractions with hidden controls
<MainAspectComponent
backgroundColor="#1a1a1a"
showControls={false}
containerWidthFraction={0.9}
containerHeightFraction={0.85}
defaultFraction={0.95}
updateIsWideScreen={handleWideScreen}
updateIsMediumScreen={handleMediumScreen}
updateIsSmallScreen={handleSmallScreen}
style={{ borderRadius: 12, overflow: 'hidden' }}
>
<StageView participants={stageParticipants} />
</MainAspectComponent>
// With animated container
<MainAspectComponent
backgroundColor="transparent"
updateIsWideScreen={setWideScreen}
updateIsMediumScreen={setMediumScreen}
updateIsSmallScreen={setSmallScreen}
renderContainer={({ defaultContainer, dimensions }) => (
<Animated.View
style={{
transform: [{ scale: scaleAnim }],
opacity: opacityAnim,
}}
>
{defaultContainer}
</Animated.View>
)}
>
<PresentationView />
</MainAspectComponent>
MainAspectComponent tracks responsive breakpoints and adjusts container dimensions relative to the viewport, providing callbacks for wide/medium/small determinations. Override hooks let consumers reshape either the children or the wrapper entirely.
Key Features
Breakpoint Thresholds
Accessibility