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

MediaSFU Prebuilt React Native SDK

import React from 'react';
/**
 * Interface defining the props for the MainAspectComponent.
 */
export interface MainAspectComponentOptions {
    /**
     * The background color of the component.
     * @default 'transparent'
     */
    backgroundColor?: string;
    /**
     * The child elements to be rendered inside the component.
     */
    children: React.ReactNode;
    /**
     * Flag to determine if controls are shown, affecting the height calculation.
     * @default true
     */
    showControls?: 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;
    /**
     * Default fraction to adjust the height when controls are shown.
     * @default 0.94
     */
    defaultFraction?: number;
    /**
     * Callback function to update the wide screen state.
     */
    updateIsWideScreen: (isWide: boolean) => void;
    /**
     * Callback function to update the medium screen state.
     */
    updateIsMediumScreen: (isMedium: boolean) => void;
    /**
     * Callback function to update the small screen state.
     */
    updateIsSmallScreen: (isSmall: boolean) => void;
}
export type MainAspectComponentType = (options: MainAspectComponentOptions) => JSX.Element;
/**
 * MainAspectComponent dynamically adjusts its dimensions based on window size and user-defined fractions,
 * updating screen size states (wide, medium, small) based on container width.
 *
 * This component supports responsive layouts by adjusting its height and width based on fractions of the window size.
 * It also provides callbacks to update screen size states and toggles dimensions based on control visibility.
 *
 * @component
 * @param {MainAspectComponentOptions} props - Properties for configuring the MainAspectComponent.
 * @param {string} [props.backgroundColor='transparent'] - Background color of the component.
 * @param {React.ReactNode} props.children - Elements to render inside the component.
 * @param {boolean} [props.showControls=true] - Toggles height adjustment when controls are visible.
 * @param {number} [props.containerWidthFraction=1] - Fraction of the window width for container width.
 * @param {number} [props.containerHeightFraction=1] - Fraction of the window height for container height.
 * @param {number} [props.defaultFraction=0.94] - Default height adjustment fraction when controls are shown.
 * @param {Function} props.updateIsWideScreen - Callback to set wide screen state.
 * @param {Function} props.updateIsMediumScreen - Callback to set medium screen state.
 * @param {Function} props.updateIsSmallScreen - Callback to set small screen state.
 *
 * @returns {JSX.Element} The MainAspectComponent with responsive dimensions and background.
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import { MainAspectComponent } from 'mediasfu-reactnative';
 *
 * function App() {
 *   return (
 *     <MainAspectComponent
 *       backgroundColor="lightgray"
 *       containerWidthFraction={0.8}
 *       containerHeightFraction={0.8}
 *       showControls={true}
 *       updateIsWideScreen={(isWide) => console.log("Wide screen:", isWide)}
 *       updateIsMediumScreen={(isMedium) => console.log("Medium screen:", isMedium)}
 *       updateIsSmallScreen={(isSmall) => console.log("Small screen:", isSmall)}
 *     >
 *       <Text>Responsive Component</Text>
 *     </MainAspectComponent>
 *   );
 * }
 *
 * export default App;
 * ```
 */
declare const MainAspectComponent: React.FC<MainAspectComponentOptions>;
export default MainAspectComponent;