react-native-liquid-view/lib/module/LiquidGlassView.js

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

"use strict";

import React, { useMemo } from 'react';
import { View, StyleSheet, Platform } from 'react-native';

/**
 * Props interface for LiquidGlassView component
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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 const LiquidGlassView = ({
  children,
  blurIntensity = 20,
  blurStyle = 'light',
  overlayColor = 'rgba(255, 255, 255, 0.1)',
  style,
  rounded = true,
  borderRadius = 16,
  accessibilityLabel = 'Liquid glass background',
  animated = false,
  refractiveIntensity = 0.1
}) => {
  // Memoized styles for performance
  const containerStyle = useMemo(() => {
    const baseStyle = {
      position: 'relative',
      overflow: 'hidden',
      ...(rounded && {
        borderRadius
      })
    };

    // iOS-specific blur implementation
    if (Platform.OS === 'ios') {
      return [baseStyle, {
        backgroundColor: 'transparent'
      }, style];
    }

    // Android fallback with enhanced visual effects
    return [baseStyle, {
      backgroundColor: overlayColor,
      // Enhanced shadow for depth on Android
      elevation: 8,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 4
      },
      shadowOpacity: 0.1,
      shadowRadius: 8
    }, style];
  }, [style, rounded, borderRadius, overlayColor]);

  // iOS blur background style
  const blurBackgroundStyle = useMemo(() => {
    if (Platform.OS !== 'ios') return {};
    const blurTypeMap = {
      light: 'rgba(255, 255, 255, 0.7)',
      dark: 'rgba(0, 0, 0, 0.7)',
      xlight: 'rgba(255, 255, 255, 0.9)',
      prominent: 'rgba(255, 255, 255, 0.5)'
    };
    return {
      ...StyleSheet.absoluteFillObject,
      backgroundColor: blurTypeMap[blurStyle],
      backdropFilter: `blur(${blurIntensity}px)`,
      WebkitBackdropFilter: `blur(${blurIntensity}px)`
    };
  }, [blurIntensity, blurStyle]);

  // Refractive overlay style for the liquid glass effect
  const refractiveOverlayStyle = useMemo(() => ({
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'transparent',
    background: Platform.OS === 'ios' ? `linear-gradient(135deg, 
          rgba(255, 255, 255, ${refractiveIntensity * 0.3}) 0%, 
          transparent 50%, 
          rgba(255, 255, 255, ${refractiveIntensity * 0.1}) 100%)` : overlayColor,
    opacity: animated ? 1 : 0.8
  }), [refractiveIntensity, overlayColor, animated]);

  // Content container style
  const contentStyle = useMemo(() => ({
    position: 'relative',
    zIndex: 1,
    flex: 1
  }), []);
  return /*#__PURE__*/_jsxs(View, {
    style: containerStyle,
    accessibilityLabel: accessibilityLabel,
    accessibilityRole: "none",
    importantForAccessibility: "no-hide-descendants",
    children: [Platform.OS === 'ios' && /*#__PURE__*/_jsx(View, {
      style: blurBackgroundStyle,
      pointerEvents: "none"
    }), /*#__PURE__*/_jsx(View, {
      style: refractiveOverlayStyle,
      pointerEvents: "none"
    }), /*#__PURE__*/_jsx(View, {
      style: contentStyle,
      children: children
    })]
  });
};

/**
 * Default props for LiquidGlassView
 */
export const defaultProps = {
  blurIntensity: 20,
  blurStyle: 'light',
  overlayColor: 'rgba(255, 255, 255, 0.1)',
  rounded: true,
  borderRadius: 16,
  accessibilityLabel: 'Liquid glass background',
  animated: false,
  refractiveIntensity: 0.1
};

/**
 * Predefined glass styles based on iOS 26 design language
 */
export const LiquidGlassPresets = {
  /** Light glass with subtle blur */
  subtle: {
    blurIntensity: 15,
    blurStyle: 'xlight',
    overlayColor: 'rgba(255, 255, 255, 0.08)',
    refractiveIntensity: 0.05
  },
  /** Standard glass effect */
  standard: {
    blurIntensity: 20,
    blurStyle: 'light',
    overlayColor: 'rgba(255, 255, 255, 0.1)',
    refractiveIntensity: 0.1
  },
  /** Prominent glass with stronger effect */
  prominent: {
    blurIntensity: 30,
    blurStyle: 'prominent',
    overlayColor: 'rgba(255, 255, 255, 0.15)',
    refractiveIntensity: 0.15
  },
  /** Dark glass for light backgrounds */
  dark: {
    blurIntensity: 25,
    blurStyle: 'dark',
    overlayColor: 'rgba(0, 0, 0, 0.1)',
    refractiveIntensity: 0.08
  }
};
export default LiquidGlassView;
//# sourceMappingURL=LiquidGlassView.js.map