Function MainScreenComponent

MainScreenComponent - Responsive split-screen layout with dynamic sizing

MainScreenComponent is a React Native component that manages split-screen layouts with main and secondary content areas. It dynamically calculates component dimensions based on stacking mode, screen size, and percentage allocations, automatically adapting to window resizing and orientation changes.

Key Features:

• Dynamic split-screen layout (stacked or side-by-side)
• Percentage-based size allocation for main component
• Automatic dimension calculation with responsive updates
• Screen width-based layout switching (narrow screens force stacking)
• Control bar height adjustment
• Component size state management via callbacks
• Window resize/rotation handling

UI Customization: This component can be replaced via uiOverrides.mainScreenComponent to provide a completely custom split-screen layout system.

// Basic usage - 70/30 vertical split
import React, { useState } from 'react';
import { MainScreenComponent, ComponentSizes } from 'mediasfu-reactnative-expo';

function SplitScreenMeeting() {
  const [sizes, setSizes] = useState<ComponentSizes>({
    mainHeight: 0,
    otherHeight: 0,
    mainWidth: 0,
    otherWidth: 0,
  });

  return (
    <MainScreenComponent
      mainSize={70}
      doStack={true}
      containerWidthFraction={1}
      containerHeightFraction={1}
      showControls={true}
      componentSizes={sizes}
      updateComponentSizes={setSizes}
    >
      <MainVideoGrid />
      <ParticipantsList />
    </MainScreenComponent>
  );
}
Copy

// Side-by-side layout (no stacking)
<MainScreenComponent
  mainSize={60}
  doStack={false}
  containerWidthFraction={0.95}
  containerHeightFraction={0.9}
  showControls={true}
  componentSizes={sizes}
  updateComponentSizes={setSizes}
>
  <VideoArea />
  <ChatPanel />
</MainScreenComponent>
Copy

// With custom content renderer (add divider)
<MainScreenComponent
  mainSize={75}
  doStack={true}
  showControls={true}
  componentSizes={sizes}
  updateComponentSizes={setSizes}
  renderContent={({ defaultContent, dimensions }) => {
    const children = React.Children.toArray(defaultContent);
    return (
      <>
        {children[0]}
        <View style={{ height: 2, backgroundColor: '#007bff', width: '100%' }} />
        {children[1]}
      </>
    );
  }}
>
  <MainContent />
  <SecondaryContent />
</MainScreenComponent>
Copy

// Using uiOverrides for complete layout replacement
import { MyCustomSplitScreen } from './MyCustomSplitScreen';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    mainScreenComponent: {
      component: MyCustomSplitScreen,
      injectedProps: {
        animateTransitions: true,
        minMainSize: 50,
      },
    },
  },
};

// MyCustomSplitScreen.tsx
export const MyCustomSplitScreen = (props: MainScreenComponentOptions & { animateTransitions: boolean; minMainSize: number }) => {
  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

  React.useEffect(() => {
    const calculateSizes = () => {
      const { width, height } = Dimensions.get('window');
      const actualMainSize = Math.max(props.mainSize, props.minMainSize);
      const mainHeight = props.doStack ? (height * actualMainSize) / 100 : height;
      const otherHeight = props.doStack ? height - mainHeight : height;
      
      props.updateComponentSizes({
        mainHeight,
        otherHeight,
        mainWidth: width,
        otherWidth: width,
      });
      setDimensions({ width, height });
    };
    
    const subscription = Dimensions.addEventListener('change', calculateSizes);
    calculateSizes();
    return () => subscription?.remove();
  }, [props.mainSize, props.doStack]);

  const children = React.Children.toArray(props.children);
  return (
    <View style={{ flex: 1, flexDirection: props.doStack ? 'column' : 'row' }}>
      {children}
    </View>
  );
};
Copy