Const// Basic split screen layout
<MainScreenComponent
mainSize={70}
doStack
showControls
componentSizes={componentSizes}
updateComponentSizes={setComponentSizes}
>
<MainGridComponent mainSize={70} />
<OtherGridComponent mainSize={70} />
</MainScreenComponent>
// Full screen main view
<MainScreenComponent
mainSize={100}
doStack={false}
showControls={false}
containerWidthFraction={0.95}
containerHeightFraction={0.9}
defaultFraction={1}
componentSizes={sizes}
updateComponentSizes={handleSizeUpdate}
style={{ backgroundColor: '#000' }}
>
<PresentationView />
</MainScreenComponent>
// With custom render override
<MainScreenComponent
mainSize={60}
doStack
showControls
componentSizes={sizes}
updateComponentSizes={updateSizes}
renderContainer={({ defaultContainer, dimensions }) => (
<Animated.View
style={{
transform: [{ translateY: slideAnim }],
width: dimensions.width,
height: dimensions.height,
}}
>
{defaultContainer}
</Animated.View>
)}
>
<MainGrid />
<AudienceGrid />
</MainScreenComponent>
MainScreenComponent calculates media tile dimensions for the main and secondary regions and applies them to children that accept
mainSizeandisWideScreenprops. Override hooks provide full control over content and container rendering.Key Features
mainSizepercentageLayout Modes
doStack=true): Splits screen between main and secondary regionsdoStack=false): Allocates full screen to main regionAccessibility