@sbaiahmed1/react-native-blur 3.2.0 → 4.0.1

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.2.0",
+  "version": "4.0.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -32,13 +32,14 @@
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace @sbaiahmed1/react-native-blur-example",
     "test": "jest",
     "typecheck": "tsc",
     "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",
@@ -72,7 +73,7 @@
     "@react-native-community/cli": "15.0.0-alpha.2",
     "@react-native/babel-preset": "0.79.2",
     "@react-native/eslint-config": "^0.78.0",
-    "@release-it/conventional-changelog": "^9.0.2",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.0",
     "commitlint": "^19.6.1",
@@ -85,7 +86,7 @@
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-native-builder-bob": "^0.40.11",
-    "release-it": "^17.10.0",
+    "release-it": "^19.0.4",
     "turbo": "^1.10.7",
     "typescript": "^5.8.3"
   },
@@ -162,7 +163,8 @@
     },
     "ios": {
       "componentProvider": {
-        "ReactNativeBlurView": "ReactNativeBlurView"
+        "ReactNativeBlurView": "ReactNativeBlurView",
+        "ReactNativeLiquidGlassView": "ReactNativeLiquidGlassView"
       }
     }
   },

package/src/BlurView.tsx

@@ -1,85 +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
-   */
-  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;
-
-  /**
-   * 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
+   * @description style object for the blur view
+   *
+   * @default false
    */
-  isInteractive?: boolean;
+  ignoreSafeArea?: boolean;
 
   /**
-   * Platform: iOS only
-   * Whether the blur view should be ignore safe area insets
-   * @default false
+   * @description Child components to render inside the blur view
+   *
+   * @default undefined
    */
-  ignoreSafeArea?: boolean;
+  children?: React.ReactNode;
 }
 
 /**
@@ -110,11 +79,6 @@ export const BlurView: React.FC<BlurViewProps> = ({
   reducedTransparencyFallbackColor = '#FFFFFF',
   style,
   children,
-  type = 'blur',
-  glassType = 'clear',
-  glassTintColor = 'clear',
-  glassOpacity = 1.0,
-  isInteractive = true,
   ignoreSafeArea = false,
   ...props
 }) => {
@@ -122,16 +86,11 @@ export const BlurView: React.FC<BlurViewProps> = ({
   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}
-        ignoreSafeArea={ignoreSafeArea}
         {...props}
       />
     );
@@ -139,31 +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}
-        ignoreSafeArea={ignoreSafeArea}
         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,10 @@ 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>;
 }
 

package/src/ReactNativeLiquidGlassViewNativeComponent.ts

@@ -0,0 +1,57 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+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>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNativeLiquidGlassView',
+  { excludedPlatforms: ['android'] }
+);

package/src/index.tsx

@@ -3,3 +3,9 @@ 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';