mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
161 lines (160 loc) • 5.42 kB
TypeScript
import React from 'react';
/**
* Configuration options for the MainContainerComponent.
*
* @interface MainContainerComponentOptions
*
* **Content:**
* @property {React.ReactNode} children - Child elements to render inside the container
*
* **Dimensions (Responsive):**
* @property {number} [containerWidthFraction=1] - Fraction of window width to use (0.0 to 1.0)
* @property {number} [containerHeightFraction=1] - Fraction of window height to use (0.0 to 1.0)
*
* **Spacing:**
* @property {number} [marginLeft=0] - Left margin in pixels
* @property {number} [marginRight=0] - Right margin in pixels
* @property {number} [marginTop=0] - Top margin in pixels
* @property {number} [marginBottom=0] - Bottom margin in pixels
* @property {number} [padding=0] - Internal padding in pixels
*
* **Styling:**
* @property {string} [backgroundColor='transparent'] - Background color for the container
* @property {object} [style] - Additional custom styles to apply to the container
*
* **Advanced Render Overrides:**
* @property {function} [renderContent] - Optional custom renderer for content (receives defaultContent and dimensions)
* @property {function} [renderContainer] - Optional custom renderer for outer container (receives defaultContainer and dimensions)
*/
export interface MainContainerComponentOptions {
backgroundColor?: string;
children: React.ReactNode;
containerWidthFraction?: number;
containerHeightFraction?: number;
marginLeft?: number;
marginRight?: number;
marginTop?: number;
marginBottom?: number;
padding?: number;
style?: object;
renderContent?: (options: {
defaultContent: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
renderContainer?: (options: {
defaultContainer: React.ReactNode;
dimensions: {
width: number;
height: number;
};
}) => React.ReactNode;
}
export type MainContainerComponentType = (options: MainContainerComponentOptions) => JSX.Element;
/**
* MainContainerComponent - Top-level responsive layout container
*
* MainContainerComponent is a React Native component that provides the primary
* layout container for the entire meeting interface. It automatically responds
* to window size changes and calculates dimensions based on fractional values,
* enabling consistent layouts across different screen sizes and orientations.
*
* **Key Features:**
* - Responsive dimension calculation based on window size
* - Fractional width/height support (e.g., 0.9 = 90% of window)
* - Automatic recalculation on window resize/rotation
* - Configurable margins and padding
* - Custom background color support
* - Advanced render override hooks
*
* **UI Customization:**
* This component can be replaced via `uiOverrides.mainContainerComponent` to
* provide a completely custom top-level layout container.
*
* @component
* @param {MainContainerComponentOptions} props - Configuration options for the main container
*
* @returns {JSX.Element} Rendered responsive main container
*
* @example
* // Basic usage - Full-screen container
* import React from 'react';
* import { MainContainerComponent } from 'mediasfu-reactnative-expo';
* import { Text } from 'react-native';
*
* function MeetingApp() {
* return (
* <MainContainerComponent backgroundColor="#000000">
* <Text style={{ color: 'white' }}>Meeting Content</Text>
* </MainContainerComponent>
* );
* }
*
* @example
* // With fractional dimensions and margins
* <MainContainerComponent
* backgroundColor="#1a1a1a"
* containerWidthFraction={0.95}
* containerHeightFraction={0.9}
* marginLeft={20}
* marginRight={20}
* marginTop={10}
* marginBottom={10}
* padding={15}
* >
* <MeetingLayout />
* </MainContainerComponent>
*
* @example
* // With custom content renderer (add header/footer)
* <MainContainerComponent
* backgroundColor="white"
* renderContent={({ defaultContent, dimensions }) => (
* <>
* <View style={{ height: 60, backgroundColor: '#007bff' }}>
* <Text>Meeting Header</Text>
* </View>
* {defaultContent}
* <View style={{ height: 40, backgroundColor: '#f0f0f0' }}>
* <Text>Footer - {dimensions.width}x{dimensions.height}</Text>
* </View>
* </>
* )}
* >
* <MeetingContent />
* </MainContainerComponent>
*
* @example
* // Using uiOverrides for complete container replacement
* import { MyCustomMainContainer } from './MyCustomMainContainer';
*
* const sessionConfig = {
* credentials: { apiKey: 'your-api-key' },
* uiOverrides: {
* mainContainerComponent: {
* component: MyCustomMainContainer,
* injectedProps: {
* theme: 'dark',
* showGrid: true,
* },
* },
* },
* };
*
* // MyCustomMainContainer.tsx
* export const MyCustomMainContainer = (props: MainContainerComponentOptions & { theme: string; showGrid: boolean }) => {
* return (
* <View style={{
* flex: 1,
* backgroundColor: props.theme === 'dark' ? '#000' : '#fff',
* borderWidth: props.showGrid ? 1 : 0,
* }}>
* {props.children}
* </View>
* );
* };
*/
declare const MainContainerComponent: React.FC<MainContainerComponentOptions>;
export default MainContainerComponent;