mediasfu-reactnative/dist/types/src/components/displayComponents/MainScreenComponent.d.ts

MediaSFU Prebuilt React Native SDK

import React from 'react';
import { StyleProp, ViewStyle } from 'react-native';
/**
 * Interface defining the sizes of the main and other components.
 */
export interface ComponentSizes {
    mainHeight: number;
    otherHeight: number;
    mainWidth: number;
    otherWidth: number;
}
/**
 * Interface defining the props for the MainScreenComponent.
 */
export interface MainScreenComponentOptions {
    /**
     * The child components to be rendered inside the main screen.
     */
    children: React.ReactNode;
    /**
     * The percentage size of the main component when stacking is enabled.
     */
    mainSize: number;
    /**
     * Flag indicating whether the components should be stacked.
     */
    doStack: boolean;
    /**
     * Fraction of the window width to be used for the container's width.
     * @default 1
     */
    containerWidthFraction?: number;
    /**
     * Fraction of the window height to be used for the container's height.
     * @default 1
     */
    containerHeightFraction?: number;
    /**
     * Callback function to update the sizes of the components.
     */
    updateComponentSizes: (sizes: ComponentSizes) => void;
    /**
     * Default fraction to adjust the height when controls are shown.
     * @default 0.94
     */
    defaultFraction?: number;
    /**
     * Flag indicating whether controls are shown, affecting the container height.
     */
    showControls: boolean;
    /**
     * An object containing the current sizes of the components.
     */
    componentSizes: ComponentSizes;
}
/**
 * Interface defining the additional props for resizable child components.
 */
export interface ResizableChildOptions {
    /**
     * The percentage size of the main component.
     */
    mainSize: number;
    /**
     * Flag indicating if the screen is wide.
     */
    isWideScreen: boolean;
    /**
     * Optional additional styles for the child component.
     */
    style?: StyleProp<ViewStyle>;
}
export type MainScreenComponentType = (options: MainScreenComponentOptions) => JSX.Element;
/**
 * MainScreenComponent dynamically adjusts the layout and dimensions of its child components based on window size,
 * stacking mode, and specified width/height fractions, supporting flexible and responsive screen layouts.
 *
 * This component determines the appropriate dimensions for main and secondary components based on stacking mode, screen width,
 * and main component size, and can conditionally arrange child components in a column or row based on screen width.
 *
 * @component
 * @param {MainScreenComponentOptions} props - Configuration options for MainScreenComponent.
 * @param {React.ReactNode} props.children - Child components to render inside the screen container.
 * @param {number} props.mainSize - Percentage size of the main component when stacking.
 * @param {boolean} props.doStack - Flag indicating if components should be stacked vertically or horizontally.
 * @param {number} [props.containerWidthFraction=1] - Fraction of window width for container width.
 * @param {number} [props.containerHeightFraction=1] - Fraction of window height for container height.
 * @param {Function} props.updateComponentSizes - Callback to update sizes of main and secondary components.
 * @param {number} [props.defaultFraction=0.94] - Adjustment fraction for height when controls are visible.
 * @param {boolean} props.showControls - Flag indicating if controls are shown, affecting height calculation.
 * @param {ComponentSizes} props.componentSizes - Current sizes of the components (main and secondary).
 *
 * @returns {JSX.Element} The MainScreenComponent with dynamically calculated dimensions and layout.
 *
 * @example
 * ```tsx
 * import React, { useState } from 'react';
 * import { MainScreenComponent } from 'mediasfu-reactnative';
 *
 * function App() {
 *   const [componentSizes, setComponentSizes] = useState<ComponentSizes>({
 *     mainHeight: 0,
 *     otherHeight: 0,
 *     mainWidth: 0,
 *     otherWidth: 0,
 *   });
 *
 *   return (
 *     <MainScreenComponent
 *       mainSize={70}
 *       doStack={true}
 *       containerWidthFraction={1}
 *       containerHeightFraction={1}
 *       updateComponentSizes={setComponentSizes}
 *       showControls={true}
 *       componentSizes={componentSizes}
 *     >
 *       <MainContent />
 *       <SecondaryContent />
 *     </MainScreenComponent>
 *   );
 * }
 *
 * export default App;
 * ```
 */
declare const MainScreenComponent: React.FC<MainScreenComponentOptions>;
export default MainScreenComponent;