react-native-liquid-view/lib/typescript/src/LiquidGlassView.d.ts

A sleek, modern React Native component that brings Apple's iOS 26 Liquid Glass design language to your mobile apps

import React from 'react';
import { type ViewStyle } from 'react-native';
/**
 * Props interface for LiquidGlassView component
 */
export interface LiquidGlassViewProps {
    /** Content to be rendered inside the glass view */
    children?: React.ReactNode;
    /** Intensity of the blur effect (0-100). Default: 20 */
    blurIntensity?: number;
    /** Style of the blur effect */
    blurStyle?: 'light' | 'dark' | 'xlight' | 'prominent';
    /** Overlay color in RGBA format. Default: 'rgba(255, 255, 255, 0.1)' */
    overlayColor?: string;
    /** Additional styles to apply to the container */
    style?: ViewStyle;
    /** Whether the component should have rounded corners. Default: true */
    rounded?: boolean;
    /** Border radius value. Default: 16 */
    borderRadius?: number;
    /** Accessibility label for screen readers */
    accessibilityLabel?: string;
    /** Whether the glass effect should be animated. Default: false */
    animated?: boolean;
    /** Intensity of the refractive effect (0-1). Default: 0.1 */
    refractiveIntensity?: number;
}
/**
 * LiquidGlassView - A React Native component that creates iOS 26 Liquid Glass effects
 *
 * This component implements Apple's new Liquid Glass design language from iOS 26,
 * featuring translucent materials that reflect and refract their surroundings,
 * bringing greater focus to content with a new level of vitality.
 *
 * @example
 * ```tsx
 * <LiquidGlassView
 *   blurIntensity={30}
 *   blurStyle="light"
 *   overlayColor="rgba(255, 255, 255, 0.15)"
 * >
 *   <Text>Content over glass background</Text>
 * </LiquidGlassView>
 * ```
 */
export declare const LiquidGlassView: React.FC<LiquidGlassViewProps>;
/**
 * Default props for LiquidGlassView
 */
export declare const defaultProps: {
    blurIntensity: number;
    blurStyle: string;
    overlayColor: string;
    rounded: boolean;
    borderRadius: number;
    accessibilityLabel: string;
    animated: boolean;
    refractiveIntensity: number;
};
/**
 * Predefined glass styles based on iOS 26 design language
 */
export declare const LiquidGlassPresets: {
    /** Light glass with subtle blur */
    readonly subtle: {
        readonly blurIntensity: 15;
        readonly blurStyle: "xlight";
        readonly overlayColor: "rgba(255, 255, 255, 0.08)";
        readonly refractiveIntensity: 0.05;
    };
    /** Standard glass effect */
    readonly standard: {
        readonly blurIntensity: 20;
        readonly blurStyle: "light";
        readonly overlayColor: "rgba(255, 255, 255, 0.1)";
        readonly refractiveIntensity: 0.1;
    };
    /** Prominent glass with stronger effect */
    readonly prominent: {
        readonly blurIntensity: 30;
        readonly blurStyle: "prominent";
        readonly overlayColor: "rgba(255, 255, 255, 0.15)";
        readonly refractiveIntensity: 0.15;
    };
    /** Dark glass for light backgrounds */
    readonly dark: {
        readonly blurIntensity: 25;
        readonly blurStyle: "dark";
        readonly overlayColor: "rgba(0, 0, 0, 0.1)";
        readonly refractiveIntensity: 0.08;
    };
};
export default LiquidGlassView;
//# sourceMappingURL=LiquidGlassView.d.ts.map