MediaSFU React Native
    Preparing search index...

    Variable MainContainerComponentConst

    MainContainerComponent: React.FC<MainContainerComponentOptions> = ...

    MainContainerComponent provides a responsive wrapper that scales with the viewport. It recalculates dimensions on window resize and exposes render overrides for custom layouts.

    • Automatically adjusts dimensions based on viewport size
    • Supports fractional width/height for flexible sizing
    • Respects custom margins and padding
    • Re-renders on window dimension changes
    • Exposes render overrides for advanced layouts
    • Container provides structural grouping for contained elements
    • Children maintain their own accessibility properties
    // Full-screen main container
    <MainContainerComponent backgroundColor="#1e1e1e">
      <MeetingGrid participants={participants} />
      <ControlBar />
    </MainContainerComponent>

    // Half-width container with custom margins
    <MainContainerComponent
      containerWidthFraction={0.5}
      containerHeightFraction={0.8}
      backgroundColor="#fff"
      marginTop={20}
      marginLeft={10}
      padding={15}
      style={{ borderRadius: 8 }}
    >
      <ChatPanel />
    </MainContainerComponent>

    // With custom render override
    <MainContainerComponent
      backgroundColor="transparent"
      renderContainer={({ defaultContainer, dimensions }) => (
        <BlurView intensity={50} style={{ width: dimensions.width, height: dimensions.height }}>
          {defaultContainer}
        </BlurView>
      )}
    >
      <GlassPanel />
    </MainContainerComponent>

    Settings

    Member Visibility

    On This Page

    Key FeaturesAccessibility