Const// 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>
);
}
// Side panel with custom sizing
<SubAspectComponent
backgroundColor="#f5f5f5"
showControls={true}
containerWidthFraction={0.25}
containerHeightFraction={0.8}
defaultFractionSub={0.05}
>
<ParticipantsSidebar />
</SubAspectComponent>
// 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>
// 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>
);
};
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:
UI Customization: This component can be replaced via
uiOverrides.subAspectComponentto provide a completely custom secondary container.