import React from 'react'; import type { ViewStyle, StyleProp } from 'react-native'; import { type GlassType } from './ReactNativeLiquidGlassViewNativeComponent'; export interface LiquidGlassViewProps { /** * @description The type of glass effect to apply * * @default 'clear' * * @platform iOS 26+ */ glassType?: GlassType; /** * @description The tint color of the glass effect. Accepts hex color strings * like '#FFFFFF' or color names * * @default 'clear' * * @platform iOS 26+ */ glassTintColor?: string; /** * @description The opacity of the glass effect (0-1) * * @default 1.0 * * @platform iOS 26+ */ glassOpacity?: number; /** * @description Fallback color when reduced transparency is enabled or on * older iOS versions * * @default '#FFFFFF' * * @platform iOS */ reducedTransparencyFallbackColor?: string; /** * @description Whether the glass view should be interactive * * @default true * * @platform iOS */ isInteractive?: boolean; /** * @description Whether the glass view should ignore safe area insets * * @default false * * @platform iOS */ ignoreSafeArea?: boolean; /** * @description Style object for the liquid glass view * * @default undefined */ style?: StyleProp; /** * Child components to render inside the liquid glass view * * @default undefined */ children?: React.ReactNode; } /** * A Liquid Glass view component that provides iOS 26+ glass effects. * * This component uses the new UIKit glass effect API available on iOS 26+. * On older iOS versions or when reduced transparency is enabled, it falls back * to a solid color background. * * **Platform Support:** * - iOS 26+: Native glass effect with full functionality * - iOS < 26 or Android: Fallback to reducedTransparencyFallbackColor * * This component automatically handles the proper positioning pattern where the glass * effect is positioned absolutely behind the content, ensuring interactive elements * work correctly. * * @example * ```tsx * import { LiquidGlassView } from '@sbaiahmed1/react-native-blur'; * * * Content on top of liquid glass *