@sbaiahmed1/react-native-blur 3.1.2 → 4.0.0

package/lib/typescript/src/BlurView.d.ts

@@ -1,65 +1,45 @@
 import React from 'react';
 import type { ViewStyle, StyleProp } from 'react-native';
 import { type BlurType } from './ReactNativeBlurViewNativeComponent';
-import type { GlassType } from '../src/ReactNativeBlurViewNativeComponent';
 export interface BlurViewProps {
     /**
-     * The type of blur effect to apply
+     * @description The type of blur effect to apply
+     *
      * @default 'xlight'
      */
     blurType?: BlurType;
     /**
-     * The intensity of the blur effect (0-100)
+     * @description The intensity of the blur effect (0-100)
+     *
      * @default 10
      */
     blurAmount?: number;
     /**
-     * Fallback color when reduced transparency is enabled
-     * Accepts hex color strings like '#FFFFFF'
+     * @description Fallback color when reduced transparency is enabled
+     *
+     * Accepts hex color strings like `#FFFFFF`
+     *
      * @default '#FFFFFF'
      */
     reducedTransparencyFallbackColor?: string;
     /**
-     * Style object for the blur view
+     * @description style object for the blur view
+     *
+     * @default undefined
      */
     style?: StyleProp<ViewStyle>;
     /**
-     * Child components to render inside the blur view
+     * @description style object for the blur view
+     *
+     * @default false
      */
-    children?: React.ReactNode;
-    /**
-     * Platform: iOS only
-     * The type of glass effect to apply
-     * @default 'clear'
-     */
-    glassType?: GlassType;
-    /**
-     * Platform: iOS only
-     * The tint color of the glass effect
-     * accepts hex color strings like '#FFFFFF'
-     * accepts color names like 'white', 'clear', 'black', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta'
-     * @default 'clear'
-     */
-    glassTintColor?: string;
+    ignoreSafeArea?: boolean;
     /**
-     * Platform: iOS only
-     * The opacity of the glass effect (0-1)
-     * @default 1.0
+     * @description Child components to render inside the blur view
+     *
+     * @default undefined
      */
-    glassOpacity?: number;
-    /**
-     * The type of blur effect to apply
-     * liquidGlass = iOS Only
-     * blur = Android | iOS
-     * @default 'blur'
-     */
-    type?: 'blur' | 'liquidGlass';
-    /**
-     * Platform: iOS only
-     * Whether the blur view should be interactive
-     * @default true
-     */
-    isInteractive?: boolean;
+    children?: React.ReactNode;
 }
 /**
  * A cross-platform blur view component that provides native blur effects.

package/lib/typescript/src/BlurView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAE9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/LiquidGlassView.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import { type GlassType } from './ReactNativeLiquidGlassViewNativeComponent';
+export interface LiquidGlassViewProps {
+    /**
+     * The type of glass effect to apply
+     * Platform: iOS 26+ only
+     * @default 'clear'
+     */
+    glassType?: GlassType /**
+     * The tint color of the glass effect
+     * Accepts hex color strings like '#FFFFFF' or color names
+     * Platform: iOS 26+ only
+     * @default 'clear'
+     */;
+    glassTintColor?: string;
+    /**
+     * The opacity of the glass effect (0-1)
+     * Platform: iOS 26+ only
+     * @default 1.0
+     */
+    glassOpacity?: number;
+    /**
+     * Fallback color when reduced transparency is enabled or on older iOS versions
+     * Accepts hex color strings like '#FFFFFF'
+     * Platform: iOS only
+     * @default '#FFFFFF'
+     */
+    reducedTransparencyFallbackColor?: string;
+    /**
+     * Whether the glass view should be interactive
+     * Platform: iOS 26+ only
+     * @default true
+     */
+    isInteractive?: boolean;
+    /**
+     * Whether the glass view should ignore safe area insets
+     * Platform: iOS 26+ only
+     * @default false
+     */
+    ignoreSafeArea?: boolean;
+    /**
+     * Style object for the liquid glass view
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Child components to render inside the liquid glass view
+     */
+    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';
+ *
+ * <LiquidGlassView
+ *   glassType="clear"
+ *   glassTintColor="#007AFF"
+ *   glassOpacity={0.8}
+ *   style={{ flex: 1 }}
+ * >
+ *   <Text>Content on top of liquid glass</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
+ * </LiquidGlassView>
+ * ```
+ *
+ * @platform ios
+ */
+export declare const LiquidGlassView: React.FC<LiquidGlassViewProps>;
+export default LiquidGlassView;
+//# sourceMappingURL=LiquidGlassView.d.ts.map

package/lib/typescript/src/LiquidGlassView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiquidGlassView.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAmC,EACjC,KAAK,SAAS,EACf,MAAM,6CAA6C,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;;;;;OAKnB,CAAC;IACJ,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyC1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts

@@ -1,16 +1,11 @@
 import type { ViewProps } from 'react-native';
 import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
 export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial';
-export type GlassType = 'clear' | 'regular';
 interface NativeProps extends ViewProps {
-    glassTintColor?: WithDefault<string, 'clear'>;
-    glassOpacity?: WithDefault<Double, 1.0>;
     blurAmount?: WithDefault<Double, 10.0>;
-    type?: WithDefault<'blur' | 'liquidGlass', 'blur'>;
     blurType?: WithDefault<BlurType, 'xlight'>;
-    glassType?: WithDefault<GlassType, 'clear'>;
     reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
-    isInteractive?: WithDefault<boolean, true>;
+    ignoreSafeArea?: WithDefault<boolean, false>;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC5C,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;CAC5C;;AAED,wBAA0E"}
+{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClE,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAC9C;;AAED,wBAA0E"}

package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts

@@ -0,0 +1,44 @@
+import type { ViewProps } from 'react-native';
+import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
+export type GlassType = 'clear' | 'regular';
+interface NativeProps extends ViewProps {
+    /**
+     * The type of glass effect to apply
+     * Platform: iOS only
+     * @default 'clear'
+     */
+    glassType?: WithDefault<GlassType, 'clear'>;
+    /**
+     * The tint color of the glass effect
+     * Platform: iOS only
+     * @default 'clear'
+     */
+    glassTintColor?: WithDefault<string, 'clear'>;
+    /**
+     * The opacity of the glass effect (0-1)
+     * Platform: iOS only
+     * @default 1.0
+     */
+    glassOpacity?: WithDefault<Double, 1.0>;
+    /**
+     * Fallback color when reduced transparency is enabled
+     * Platform: iOS only
+     * @default '#FFFFFF'
+     */
+    reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
+    /**
+     * Whether the glass view should be interactive
+     * Platform: iOS only
+     * @default true
+     */
+    isInteractive?: WithDefault<boolean, true>;
+    /**
+     * Whether the glass view should ignore safe area insets
+     * Platform: iOS only
+     * @default false
+     */
+    ignoreSafeArea?: WithDefault<boolean, false>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=ReactNativeLiquidGlassViewNativeComponent.d.ts.map

package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeLiquidGlassViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeLiquidGlassViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAE5C;;;;OAIG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE9C;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAExC;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAElE;;;;OAIG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE3C;;;;OAIG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAC9C;;AAED,wBAGE"}

package/lib/typescript/src/index.d.ts

@@ -2,4 +2,8 @@ export { default as ReactNativeBlurView } from './ReactNativeBlurViewNativeCompo
 export * from './ReactNativeBlurViewNativeComponent';
 export { BlurView as default, BlurView } from './BlurView';
 export type { BlurViewProps } from './BlurView';
+export { default as ReactNativeLiquidGlassView } from './ReactNativeLiquidGlassViewNativeComponent';
+export type { GlassType } from './ReactNativeLiquidGlassViewNativeComponent';
+export { LiquidGlassView } from './LiquidGlassView';
+export type { LiquidGlassViewProps } from './LiquidGlassView';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "3.1.2",
+  "version": "4.0.0",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -38,7 +38,9 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
-    "release": "release-it"
+    "release": "release-it",
+    "setup": "yarn && yarn prepare",
+    "setup:example": "yarn setup && cd example && yarn && cd ios && pod install && cd .. && yarn start --client-logs"
   },
   "keywords": [
     "react-native",
@@ -162,7 +164,8 @@
     },
     "ios": {
       "componentProvider": {
-        "ReactNativeBlurView": "ReactNativeBlurView"
+        "ReactNativeBlurView": "ReactNativeBlurView",
+        "ReactNativeLiquidGlassView": "ReactNativeLiquidGlassView"
       }
     }
   },

package/src/BlurView.tsx

@@ -1,78 +1,54 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { ViewStyle, StyleProp } from 'react-native';
 import ReactNativeBlurView, {
   type BlurType,
 } from './ReactNativeBlurViewNativeComponent';
-import type { GlassType } from '../src/ReactNativeBlurViewNativeComponent';
 
 export interface BlurViewProps {
   /**
-   * The type of blur effect to apply
+   * @description The type of blur effect to apply
+   *
    * @default 'xlight'
    */
   blurType?: BlurType;
 
   /**
-   * The intensity of the blur effect (0-100)
+   * @description The intensity of the blur effect (0-100)
+   *
    * @default 10
    */
   blurAmount?: number;
 
   /**
-   * Fallback color when reduced transparency is enabled
-   * Accepts hex color strings like '#FFFFFF'
+   * @description Fallback color when reduced transparency is enabled
+   *
+   * Accepts hex color strings like `#FFFFFF`
+   *
    * @default '#FFFFFF'
    */
   reducedTransparencyFallbackColor?: string;
 
   /**
-   * Style object for the blur view
+   * @description style object for the blur view
+   *
+   * @default undefined
    */
   style?: StyleProp<ViewStyle>;
 
   /**
-   * Child components to render inside the blur view
+   * @description style object for the blur view
+   *
+   * @default false
    */
-  children?: React.ReactNode;
-
-  /**
-   * Platform: iOS only
-   * The type of glass effect to apply
-   * @default 'clear'
-   */
-  glassType?: GlassType;
+  ignoreSafeArea?: boolean;
 
   /**
-   * Platform: iOS only
-   * The tint color of the glass effect
-   * accepts hex color strings like '#FFFFFF'
-   * accepts color names like 'white', 'clear', 'black', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta'
-   * @default 'clear'
+   * @description Child components to render inside the blur view
+   *
+   * @default undefined
    */
-  glassTintColor?: string;
-
-  /**
-   * Platform: iOS only
-   * The opacity of the glass effect (0-1)
-   * @default 1.0
-   */
-  glassOpacity?: number;
-
-  /**
-   * The type of blur effect to apply
-   * liquidGlass = iOS Only
-   * blur = Android | iOS
-   * @default 'blur'
-   */
-  type?: 'blur' | 'liquidGlass';
-
-  /**
-   * Platform: iOS only
-   * Whether the blur view should be interactive
-   * @default true
-   */
-  isInteractive?: boolean;
+  children?: React.ReactNode;
 }
 
 /**
@@ -103,26 +79,18 @@ export const BlurView: React.FC<BlurViewProps> = ({
   reducedTransparencyFallbackColor = '#FFFFFF',
   style,
   children,
-  type = 'blur',
-  glassType = 'clear',
-  glassTintColor = 'clear',
-  glassOpacity = 1.0,
-  isInteractive = true,
+  ignoreSafeArea = false,
   ...props
 }) => {
   // If no children, render the blur view directly (for background use)
   if (React.Children.count(children) === 0) {
     return (
       <ReactNativeBlurView
+        ignoreSafeArea={ignoreSafeArea}
         blurType={blurType}
         blurAmount={blurAmount}
-        glassType={glassType}
-        glassTintColor={glassTintColor}
-        glassOpacity={glassOpacity}
-        type={type}
         reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
         style={style}
-        isInteractive={isInteractive}
         {...props}
       />
     );
@@ -130,30 +98,31 @@ export const BlurView: React.FC<BlurViewProps> = ({
 
   // If children exist, use the absolute positioning pattern
   return (
-    <View style={[{ position: 'relative', overflow: 'hidden' }, style]}>
+    <View style={[styles.container, style]}>
       {/* Blur effect positioned absolutely behind content */}
       <ReactNativeBlurView
+        ignoreSafeArea={ignoreSafeArea}
         blurType={blurType}
         blurAmount={blurAmount}
-        glassType={glassType}
-        glassTintColor={glassTintColor}
-        glassOpacity={glassOpacity}
-        type={type}
-        isInteractive={isInteractive}
         reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
+        style={StyleSheet.absoluteFill}
         {...props}
       />
       {/* Content positioned relatively on top */}
-      <View style={{ position: 'relative', zIndex: 1 }}>{children}</View>
+      <View style={styles.children}>{children}</View>
     </View>
   );
 };
 
 export default BlurView;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  children: {
+    position: 'relative',
+    zIndex: 1,
+  },
+});

package/src/LiquidGlassView.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import ReactNativeLiquidGlassView, {
+  type GlassType,
+} from './ReactNativeLiquidGlassViewNativeComponent';
+import BlurView from './BlurView';
+
+export interface LiquidGlassViewProps {
+  /**
+   * The type of glass effect to apply
+   * Platform: iOS 26+ only
+   * @default 'clear'
+   */
+  glassType?: GlassType /**
+   * The tint color of the glass effect
+   * Accepts hex color strings like '#FFFFFF' or color names
+   * Platform: iOS 26+ only
+   * @default 'clear'
+   */;
+  glassTintColor?: string;
+
+  /**
+   * The opacity of the glass effect (0-1)
+   * Platform: iOS 26+ only
+   * @default 1.0
+   */
+  glassOpacity?: number;
+
+  /**
+   * Fallback color when reduced transparency is enabled or on older iOS versions
+   * Accepts hex color strings like '#FFFFFF'
+   * Platform: iOS only
+   * @default '#FFFFFF'
+   */
+  reducedTransparencyFallbackColor?: string;
+
+  /**
+   * Whether the glass view should be interactive
+   * Platform: iOS 26+ only
+   * @default true
+   */
+  isInteractive?: boolean;
+
+  /**
+   * Whether the glass view should ignore safe area insets
+   * Platform: iOS 26+ only
+   * @default false
+   */
+  ignoreSafeArea?: boolean;
+
+  /**
+   * Style object for the liquid glass view
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child components to render inside the liquid glass view
+   */
+  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';
+ *
+ * <LiquidGlassView
+ *   glassType="clear"
+ *   glassTintColor="#007AFF"
+ *   glassOpacity={0.8}
+ *   style={{ flex: 1 }}
+ * >
+ *   <Text>Content on top of liquid glass</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
+ * </LiquidGlassView>
+ * ```
+ *
+ * @platform ios
+ */
+export const LiquidGlassView: React.FC<LiquidGlassViewProps> = ({
+  glassType = 'clear',
+  glassTintColor = 'clear',
+  glassOpacity = 1.0,
+  reducedTransparencyFallbackColor = '#FFFFFF',
+  isInteractive = true,
+  ignoreSafeArea = false,
+  style,
+  children,
+  ...props
+}) => {
+  // Only render on iOS 26+ (fallback otherwise)
+  if (
+    Platform.OS !== 'ios' ||
+    (Platform.OS === 'ios' && parseInt(Platform.Version, 10) < 26)
+  ) {
+    console.warn(
+      'LiquidGlassView is only supported on iOS. Rendering children without glass effect.'
+    );
+    return (
+      <BlurView blurAmount={70} style={style}>
+        {children}
+      </BlurView>
+    );
+  }
+
+  // If children exist, use the absolute positioning pattern
+  return (
+    <ReactNativeLiquidGlassView
+      glassType={glassType}
+      glassTintColor={glassTintColor}
+      glassOpacity={glassOpacity}
+      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+      isInteractive={isInteractive}
+      ignoreSafeArea={ignoreSafeArea}
+      style={style}
+      {...props}
+    >
+      {children}
+    </ReactNativeLiquidGlassView>
+  );
+};
+
+export default LiquidGlassView;

package/src/ReactNativeBlurViewNativeComponent.ts

@@ -18,17 +18,11 @@ export type BlurType =
   | 'systemThickMaterial'
   | 'systemChromeMaterial';
 
-export type GlassType = 'clear' | 'regular';
-
 interface NativeProps extends ViewProps {
-  glassTintColor?: WithDefault<string, 'clear'>;
-  glassOpacity?: WithDefault<Double, 1.0>;
   blurAmount?: WithDefault<Double, 10.0>;
-  type?: WithDefault<'blur' | 'liquidGlass', 'blur'>;
   blurType?: WithDefault<BlurType, 'xlight'>;
-  glassType?: WithDefault<GlassType, 'clear'>;
   reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
-  isInteractive?: WithDefault<boolean, true>;
+  ignoreSafeArea?: WithDefault<boolean, false>;
 }
 
 export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');