Function SubAspectComponent

SubAspectComponent - Secondary responsive container for auxiliary content

SubAspectComponent is a React Native component that provides a responsive sub-container typically used for secondary content areas (e.g., chat panels, participant lists, control bars). It calculates dimensions based on window size and control visibility, automatically adjusting on resize/rotation.

Key Features:

• Responsive dimension calculation with fractional sizing
• Control visibility-based height adjustment
• Automatic window resize/rotation handling
• Custom background color support
• Flexible positioning for auxiliary content
• Advanced render override hooks

UI Customization: This component can be replaced via uiOverrides.subAspectComponent to provide a completely custom secondary container.

// Basic usage - Bottom control bar area
import React from 'react';
import { SubAspectComponent } from 'mediasfu-reactnative-expo';

function ControlBarArea() {
  return (
    <SubAspectComponent
      backgroundColor="#2c2c2c"
      showControls={true}
      containerWidthFraction={1.0}
      containerHeightFraction={0.1}
      defaultFractionSub={0}
    >
      <ControlButtons />
    </SubAspectComponent>
  );
}
Copy

// Side panel with custom sizing
<SubAspectComponent
  backgroundColor="#f5f5f5"
  showControls={true}
  containerWidthFraction={0.25}
  containerHeightFraction={0.8}
  defaultFractionSub={0.05}
>
  <ParticipantsSidebar />
</SubAspectComponent>
Copy

// With custom content renderer (add header)
<SubAspectComponent
  backgroundColor="white"
  containerWidthFraction={0.3}
  containerHeightFraction={0.7}
  renderContent={({ defaultContent, dimensions }) => (
    <>
      <View style={{ padding: 10, borderBottomWidth: 1, borderColor: '#ccc' }}>
        <Text style={{ fontWeight: 'bold' }}>Chat Panel</Text>
      </View>
      {defaultContent}
    </>
  )}
>
  <ChatMessages />
</SubAspectComponent>
Copy

// Using uiOverrides for complete sub-aspect replacement
import { MyCustomSubAspect } from './MyCustomSubAspect';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    subAspectComponent: {
      component: MyCustomSubAspect,
      injectedProps: {
        collapsible: true,
        minHeight: 50,
      },
    },
  },
};

// MyCustomSubAspect.tsx
export const MyCustomSubAspect = (props: SubAspectComponentOptions & { collapsible: boolean; minHeight: number }) => {
  const [collapsed, setCollapsed] = React.useState(false);
  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

  React.useEffect(() => {
    const updateDimensions = () => {
      const { width, height } = Dimensions.get('window');
      const containerHeight = collapsed ? props.minHeight : height * (props.containerHeightFraction || 1);
      setDimensions({ 
        width: width * (props.containerWidthFraction || 1), 
        height: containerHeight,
      });
    };
    const subscription = Dimensions.addEventListener('change', updateDimensions);
    updateDimensions();
    return () => subscription?.remove();
  }, [collapsed, props.containerWidthFraction, props.containerHeightFraction]);

  return (
    <View style={{ 
      width: dimensions.width, 
      height: dimensions.height, 
      backgroundColor: props.backgroundColor,
    }}>
      {props.collapsible && (
        <TouchableOpacity onPress={() => setCollapsed(!collapsed)}>
          <Text>{collapsed ? '▲ Expand' : '▼ Collapse'}</Text>
        </TouchableOpacity>
      )}
      {!collapsed && props.children}
    </View>
  );
};
Copy