@sbaiahmed1/react-native-blur 3.2.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +319 -309
  2. package/ReactNativeBlur.podspec +1 -1
  3. package/android/build.gradle +2 -3
  4. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt +62 -269
  5. package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt +9 -9
  6. package/ios/Helpers/BlurStyleHelpers.swift +1 -1
  7. package/ios/Helpers/ReactNativeBlurViewHelper.swift +6 -35
  8. package/ios/Helpers/ReactNativeLiquidGlassViewHelper.swift +44 -0
  9. package/ios/ReactNativeBlurView.mm +8 -61
  10. package/ios/{ReactNativeBlurViewManager.m → ReactNativeBlurViewManager.mm} +5 -35
  11. package/ios/ReactNativeLiquidGlassView.h +14 -0
  12. package/ios/ReactNativeLiquidGlassView.mm +291 -0
  13. package/ios/ReactNativeLiquidGlassViewManager.h +6 -0
  14. package/ios/ReactNativeLiquidGlassViewManager.mm +20 -0
  15. package/ios/Views/AdvancedBlurView.swift +5 -40
  16. package/ios/Views/BasicColoredView.swift +6 -50
  17. package/ios/Views/LiquidGlassContainerView.swift +151 -0
  18. package/lib/module/BlurView.js +16 -33
  19. package/lib/module/BlurView.js.map +1 -1
  20. package/lib/module/LiquidGlassView.js +75 -0
  21. package/lib/module/LiquidGlassView.js.map +1 -0
  22. package/lib/module/ReactNativeBlurViewNativeComponent.ts +0 -7
  23. package/lib/module/ReactNativeLiquidGlassViewNativeComponent.ts +57 -0
  24. package/lib/module/index.js +2 -0
  25. package/lib/module/index.js.map +1 -1
  26. package/lib/typescript/src/BlurView.d.ts +19 -45
  27. package/lib/typescript/src/BlurView.d.ts.map +1 -1
  28. package/lib/typescript/src/LiquidGlassView.d.ts +85 -0
  29. package/lib/typescript/src/LiquidGlassView.d.ts.map +1 -0
  30. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +0 -6
  31. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
  32. package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts +44 -0
  33. package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts.map +1 -0
  34. package/lib/typescript/src/index.d.ts +4 -0
  35. package/lib/typescript/src/index.d.ts.map +1 -1
  36. package/package.json +8 -6
  37. package/src/BlurView.tsx +36 -77
  38. package/src/LiquidGlassView.tsx +138 -0
  39. package/src/ReactNativeBlurViewNativeComponent.ts +0 -7
  40. package/src/ReactNativeLiquidGlassViewNativeComponent.ts +57 -0
  41. package/src/index.tsx +6 -0
@@ -0,0 +1,151 @@
1
+ import UIKit
2
+
3
+ // MARK: - UIKit-only Wrapper for Liquid Glass (following Expo's approach)
4
+
5
+ @objc public class LiquidGlassContainerView: UIView {
6
+ private var glassEffectView: UIVisualEffectView?
7
+ private var glassEffect: Any?
8
+ private var currentGlassStyle: String = "clear" // Track current style
9
+
10
+ @objc public var glassTintColor: UIColor = .clear {
11
+ didSet {
12
+ updateEffect()
13
+ }
14
+ }
15
+
16
+ @objc public var glassOpacity: Double = 1.0 {
17
+ didSet {
18
+ updateEffect()
19
+ }
20
+ }
21
+
22
+ @objc public var glassType: String = "clear" {
23
+ didSet {
24
+ updateEffect()
25
+ }
26
+ }
27
+
28
+ @objc public var reducedTransparencyFallbackColor: UIColor = .white {
29
+ didSet {
30
+ updateFallback()
31
+ }
32
+ }
33
+
34
+ @objc public var isInteractive: Bool = true {
35
+ didSet {
36
+ updateEffect()
37
+ }
38
+ }
39
+
40
+ @objc public var ignoreSafeArea: Bool = false {
41
+ didSet {
42
+ // Not used in UIKit approach
43
+ }
44
+ }
45
+
46
+ // Border radius storage for React Native's style system
47
+ private var topLeftRadius: CGFloat = 0
48
+ private var topRightRadius: CGFloat = 0
49
+ private var bottomLeftRadius: CGFloat = 0
50
+ private var bottomRightRadius: CGFloat = 0
51
+ private var allBorderRadius: CGFloat = 0
52
+
53
+ public override init(frame: CGRect) {
54
+ super.init(frame: frame)
55
+ setupView()
56
+ }
57
+
58
+ required init?(coder: NSCoder) {
59
+ super.init(coder: coder)
60
+ setupView()
61
+ }
62
+
63
+ private func setupView() {
64
+ let effectView = UIVisualEffectView()
65
+ effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
66
+ effectView.frame = bounds
67
+
68
+ // Don't clip bounds to allow interactive glass animations to be visible
69
+ effectView.clipsToBounds = false
70
+
71
+ addSubview(effectView)
72
+ self.glassEffectView = effectView
73
+
74
+ updateEffect()
75
+ }
76
+
77
+ // MARK: - Border Radius Methods (called by React Native's style system)
78
+
79
+ @objc public func setBorderRadius(_ radius: CGFloat) {
80
+ allBorderRadius = radius
81
+ updateBorderRadius()
82
+ }
83
+
84
+ private func updateEffect() {
85
+ if #available(iOS 26.0, *) {
86
+ #if compiler(>=6.2)
87
+ let style: UIGlassEffect.Style = glassType == "regular" ? .regular : .clear
88
+
89
+ // Always create a new effect to ensure proper rendering
90
+ let effect = UIGlassEffect(style: style)
91
+ effect.tintColor = glassTintColor.withAlphaComponent(glassOpacity)
92
+ effect.isInteractive = isInteractive
93
+
94
+ glassEffectView?.effect = effect
95
+ glassEffect = effect
96
+ currentGlassStyle = glassType
97
+
98
+ updateBorderRadius()
99
+ #endif
100
+ } else {
101
+ // Fallback for iOS < 26
102
+ updateFallback()
103
+ }
104
+ }
105
+
106
+ private func updateFallback() {
107
+ if #available(iOS 26.0, *) {
108
+ // Do nothing if iOS 26+
109
+ } else {
110
+ backgroundColor = reducedTransparencyFallbackColor
111
+ layer.cornerRadius = allBorderRadius
112
+ }
113
+ }
114
+
115
+ private func updateBorderRadius() {
116
+ if #available(iOS 26.0, *) {
117
+ #if compiler(>=6.2)
118
+ let topLeft = UICornerRadius(floatLiteral: Double(allBorderRadius))
119
+ let topRight = UICornerRadius(floatLiteral: Double(allBorderRadius))
120
+ let bottomLeft = UICornerRadius(floatLiteral: Double(allBorderRadius))
121
+ let bottomRight = UICornerRadius(floatLiteral: Double(allBorderRadius))
122
+
123
+ glassEffectView?.cornerConfiguration = .corners(
124
+ topLeftRadius: topLeft,
125
+ topRightRadius: topRight,
126
+ bottomLeftRadius: bottomLeft,
127
+ bottomRightRadius: bottomRight
128
+ )
129
+ #else
130
+ layer.cornerRadius = allBorderRadius
131
+ layer.masksToBounds = true
132
+ #endif
133
+ } else {
134
+ layer.cornerRadius = allBorderRadius
135
+ }
136
+ }
137
+
138
+ public override func layoutSubviews() {
139
+ super.layoutSubviews()
140
+ glassEffectView?.frame = bounds
141
+ }
142
+
143
+ // For child view mounting
144
+ @objc public func getContentView() -> UIView? {
145
+ if #available(iOS 26.0, *) {
146
+ return glassEffectView?.contentView
147
+ } else {
148
+ return self
149
+ }
150
+ }
151
+ }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  import React from 'react';
4
- import { View } from 'react-native';
4
+ import { StyleSheet, View } from 'react-native';
5
5
  import ReactNativeBlurView from './ReactNativeBlurViewNativeComponent';
6
6
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
7
  /**
@@ -32,63 +32,46 @@ export const BlurView = ({
32
32
  reducedTransparencyFallbackColor = '#FFFFFF',
33
33
  style,
34
34
  children,
35
- type = 'blur',
36
- glassType = 'clear',
37
- glassTintColor = 'clear',
38
- glassOpacity = 1.0,
39
- isInteractive = true,
40
35
  ignoreSafeArea = false,
41
36
  ...props
42
37
  }) => {
43
38
  // If no children, render the blur view directly (for background use)
44
39
  if (React.Children.count(children) === 0) {
45
40
  return /*#__PURE__*/_jsx(ReactNativeBlurView, {
41
+ ignoreSafeArea: ignoreSafeArea,
46
42
  blurType: blurType,
47
43
  blurAmount: blurAmount,
48
- glassType: glassType,
49
- glassTintColor: glassTintColor,
50
- glassOpacity: glassOpacity,
51
- type: type,
52
44
  reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
53
45
  style: style,
54
- isInteractive: isInteractive,
55
- ignoreSafeArea: ignoreSafeArea,
56
46
  ...props
57
47
  });
58
48
  }
59
49
 
60
50
  // If children exist, use the absolute positioning pattern
61
51
  return /*#__PURE__*/_jsxs(View, {
62
- style: [{
63
- position: 'relative',
64
- overflow: 'hidden'
65
- }, style],
52
+ style: [styles.container, style],
66
53
  children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
54
+ ignoreSafeArea: ignoreSafeArea,
67
55
  blurType: blurType,
68
56
  blurAmount: blurAmount,
69
- glassType: glassType,
70
- glassTintColor: glassTintColor,
71
- glassOpacity: glassOpacity,
72
- type: type,
73
- isInteractive: isInteractive,
74
- ignoreSafeArea: ignoreSafeArea,
75
57
  reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
76
- style: {
77
- position: 'absolute',
78
- top: 0,
79
- left: 0,
80
- right: 0,
81
- bottom: 0
82
- },
58
+ style: StyleSheet.absoluteFill,
83
59
  ...props
84
60
  }), /*#__PURE__*/_jsx(View, {
85
- style: {
86
- position: 'relative',
87
- zIndex: 1
88
- },
61
+ style: styles.children,
89
62
  children: children
90
63
  })]
91
64
  });
92
65
  };
93
66
  export default BlurView;
67
+ const styles = StyleSheet.create({
68
+ container: {
69
+ position: 'relative',
70
+ overflow: 'hidden'
71
+ },
72
+ children: {
73
+ position: 'relative',
74
+ zIndex: 1
75
+ }
76
+ });
94
77
  //# sourceMappingURL=BlurView.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","type","glassType","glassTintColor","glassOpacity","isInteractive","ignoreSafeArea","props","Children","count","position","overflow","top","left","right","bottom","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA+E9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,KAAK;EACLC,QAAQ;EACRC,IAAI,GAAG,MAAM;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,aAAa,GAAG,IAAI;EACpBC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAInB,KAAK,CAACoB,QAAQ,CAACC,KAAK,CAACT,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXH,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MACbM,aAAa,EAAEA,aAAc;MAC7BC,cAAc,EAAEA,cAAe;MAAA,GAC3BC;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEb,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEW,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEZ,KAAK,CAAE;IAAAC,QAAA,gBAEjER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXI,aAAa,EAAEA,aAAc;MAC7BC,cAAc,EAAEA,cAAe;MAC/BR,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLW,QAAQ,EAAE,UAAU;QACpBE,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV,CAAE;MAAA,GACER;IAAK,CACV,CAAC,eAEFf,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEW,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAhB,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
1
+ {"version":3,"names":["React","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","ignoreSafeArea","props","Children","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgD9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIf,KAAK,CAACgB,QAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBW,cAAc,EAAEA,cAAe;MAC/BL,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MAAA,GACTG;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACER,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,CAAE;IAAAC,QAAA,gBAErCR,IAAA,CAACF,mBAAmB;MAClBW,cAAc,EAAEA,cAAe;MAC/BL,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEX,UAAU,CAACmB,YAAa;MAAA,GAC3BL;IAAK,CACV,CAAC,eAEFV,IAAA,CAACH,IAAI;MAACU,KAAK,EAAEM,MAAM,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ;AAEvB,MAAMU,MAAM,GAAGjB,UAAU,CAACoB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDV,QAAQ,EAAE;IACRS,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+
3
+ import React from 'react';
4
+ import { Platform } from 'react-native';
5
+ import ReactNativeLiquidGlassView from './ReactNativeLiquidGlassViewNativeComponent';
6
+ import BlurView from "./BlurView.js";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ /**
9
+ * A Liquid Glass view component that provides iOS 26+ glass effects.
10
+ *
11
+ * This component uses the new UIKit glass effect API available on iOS 26+.
12
+ * On older iOS versions or when reduced transparency is enabled, it falls back
13
+ * to a solid color background.
14
+ *
15
+ * **Platform Support:**
16
+ * - iOS 26+: Native glass effect with full functionality
17
+ * - iOS < 26 or Android: Fallback to reducedTransparencyFallbackColor
18
+ *
19
+ * This component automatically handles the proper positioning pattern where the glass
20
+ * effect is positioned absolutely behind the content, ensuring interactive elements
21
+ * work correctly.
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
26
+ *
27
+ * <LiquidGlassView
28
+ * glassType="clear"
29
+ * glassTintColor="#007AFF"
30
+ * glassOpacity={0.8}
31
+ * style={{ flex: 1 }}
32
+ * >
33
+ * <Text>Content on top of liquid glass</Text>
34
+ * <Button title="Interactive Button" onPress={() => {}} />
35
+ * </LiquidGlassView>
36
+ * ```
37
+ *
38
+ * @platform ios
39
+ */
40
+ export const LiquidGlassView = ({
41
+ glassType = 'clear',
42
+ glassTintColor = 'clear',
43
+ glassOpacity = 1.0,
44
+ reducedTransparencyFallbackColor = '#FFFFFF',
45
+ isInteractive = true,
46
+ ignoreSafeArea = false,
47
+ style,
48
+ children,
49
+ ...props
50
+ }) => {
51
+ // Only render on iOS 26+ (fallback otherwise)
52
+ if (Platform.OS !== 'ios' || Platform.OS === 'ios' && parseInt(Platform.Version, 10) < 26) {
53
+ console.warn('LiquidGlassView is only supported on iOS. Rendering children without glass effect.');
54
+ return /*#__PURE__*/_jsx(BlurView, {
55
+ blurAmount: 70,
56
+ style: style,
57
+ children: children
58
+ });
59
+ }
60
+
61
+ // If children exist, use the absolute positioning pattern
62
+ return /*#__PURE__*/_jsx(ReactNativeLiquidGlassView, {
63
+ glassType: glassType,
64
+ glassTintColor: glassTintColor,
65
+ glassOpacity: glassOpacity,
66
+ reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
67
+ isInteractive: isInteractive,
68
+ ignoreSafeArea: ignoreSafeArea,
69
+ style: style,
70
+ ...props,
71
+ children: children
72
+ });
73
+ };
74
+ export default LiquidGlassView;
75
+ //# sourceMappingURL=LiquidGlassView.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","OS","parseInt","Version","console","warn","blurAmount"],"sourceRoot":"../../src","sources":["LiquidGlassView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,cAAc;AAEvC,OAAOC,0BAA0B,MAE1B,6CAA6C;AACpD,OAAOC,QAAQ,MAAM,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwDlC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,gCAAgC,GAAG,SAAS;EAC5CC,aAAa,GAAG,IAAI;EACpBC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IACEd,QAAQ,CAACe,EAAE,KAAK,KAAK,IACpBf,QAAQ,CAACe,EAAE,KAAK,KAAK,IAAIC,QAAQ,CAAChB,QAAQ,CAACiB,OAAO,EAAE,EAAE,CAAC,GAAG,EAAG,EAC9D;IACAC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;IACD,oBACEf,IAAA,CAACF,QAAQ;MAACkB,UAAU,EAAE,EAAG;MAACR,KAAK,EAAEA,KAAM;MAAAC,QAAA,EACpCA;IAAQ,CACD,CAAC;EAEf;;EAEA;EACA,oBACET,IAAA,CAACH,0BAA0B;IACzBK,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,gCAAgC,EAAEA,gCAAiC;IACnEC,aAAa,EAAEA,aAAc;IAC7BC,cAAc,EAAEA,cAAe;IAC/BC,KAAK,EAAEA,KAAM;IAAA,GACTE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACiB,CAAC;AAEjC,CAAC;AAED,eAAeR,eAAe","ignoreList":[]}
@@ -18,17 +18,10 @@ export type BlurType =
18
18
  | 'systemThickMaterial'
19
19
  | 'systemChromeMaterial';
20
20
 
21
- export type GlassType = 'clear' | 'regular';
22
-
23
21
  interface NativeProps extends ViewProps {
24
- glassTintColor?: WithDefault<string, 'clear'>;
25
- glassOpacity?: WithDefault<Double, 1.0>;
26
22
  blurAmount?: WithDefault<Double, 10.0>;
27
- type?: WithDefault<'blur' | 'liquidGlass', 'blur'>;
28
23
  blurType?: WithDefault<BlurType, 'xlight'>;
29
- glassType?: WithDefault<GlassType, 'clear'>;
30
24
  reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
31
- isInteractive?: WithDefault<boolean, true>;
32
25
  ignoreSafeArea?: WithDefault<boolean, false>;
33
26
  }
34
27
 
@@ -0,0 +1,57 @@
1
+ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
2
+ import type { ViewProps } from 'react-native';
3
+ import type {
4
+ WithDefault,
5
+ Double,
6
+ } from 'react-native/Libraries/Types/CodegenTypes';
7
+
8
+ export type GlassType = 'clear' | 'regular';
9
+
10
+ interface NativeProps extends ViewProps {
11
+ /**
12
+ * The type of glass effect to apply
13
+ * Platform: iOS only
14
+ * @default 'clear'
15
+ */
16
+ glassType?: WithDefault<GlassType, 'clear'>;
17
+
18
+ /**
19
+ * The tint color of the glass effect
20
+ * Platform: iOS only
21
+ * @default 'clear'
22
+ */
23
+ glassTintColor?: WithDefault<string, 'clear'>;
24
+
25
+ /**
26
+ * The opacity of the glass effect (0-1)
27
+ * Platform: iOS only
28
+ * @default 1.0
29
+ */
30
+ glassOpacity?: WithDefault<Double, 1.0>;
31
+
32
+ /**
33
+ * Fallback color when reduced transparency is enabled
34
+ * Platform: iOS only
35
+ * @default '#FFFFFF'
36
+ */
37
+ reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
38
+
39
+ /**
40
+ * Whether the glass view should be interactive
41
+ * Platform: iOS only
42
+ * @default true
43
+ */
44
+ isInteractive?: WithDefault<boolean, true>;
45
+
46
+ /**
47
+ * Whether the glass view should ignore safe area insets
48
+ * Platform: iOS only
49
+ * @default false
50
+ */
51
+ ignoreSafeArea?: WithDefault<boolean, false>;
52
+ }
53
+
54
+ export default codegenNativeComponent<NativeProps>(
55
+ 'ReactNativeLiquidGlassView',
56
+ { excludedPlatforms: ['android'] }
57
+ );
@@ -3,4 +3,6 @@
3
3
  export { default as ReactNativeBlurView } from './ReactNativeBlurViewNativeComponent';
4
4
  export * from './ReactNativeBlurViewNativeComponent';
5
5
  export { BlurView as default, BlurView } from "./BlurView.js";
6
+ export { default as ReactNativeLiquidGlassView } from './ReactNativeLiquidGlassViewNativeComponent';
7
+ export { LiquidGlassView } from "./LiquidGlassView.js";
6
8
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["default","ReactNativeBlurView","BlurView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY","ignoreList":[]}
1
+ {"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB","ignoreList":[]}
@@ -1,71 +1,45 @@
1
1
  import React from 'react';
2
2
  import type { ViewStyle, StyleProp } from 'react-native';
3
3
  import { type BlurType } from './ReactNativeBlurViewNativeComponent';
4
- import type { GlassType } from '../src/ReactNativeBlurViewNativeComponent';
5
4
  export interface BlurViewProps {
6
5
  /**
7
- * The type of blur effect to apply
6
+ * @description The type of blur effect to apply
7
+ *
8
8
  * @default 'xlight'
9
9
  */
10
10
  blurType?: BlurType;
11
11
  /**
12
- * The intensity of the blur effect (0-100)
12
+ * @description The intensity of the blur effect (0-100)
13
+ *
13
14
  * @default 10
14
15
  */
15
16
  blurAmount?: number;
16
17
  /**
17
- * Fallback color when reduced transparency is enabled
18
- * Accepts hex color strings like '#FFFFFF'
18
+ * @description Fallback color when reduced transparency is enabled
19
+ *
20
+ * Accepts hex color strings like `#FFFFFF`
21
+ *
19
22
  * @default '#FFFFFF'
20
23
  */
21
24
  reducedTransparencyFallbackColor?: string;
22
25
  /**
23
- * Style object for the blur view
26
+ * @description style object for the blur view
27
+ *
28
+ * @default undefined
24
29
  */
25
30
  style?: StyleProp<ViewStyle>;
26
31
  /**
27
- * Child components to render inside the blur view
28
- */
29
- children?: React.ReactNode;
30
- /**
31
- * Platform: iOS only
32
- * The type of glass effect to apply
33
- * @default 'clear'
34
- */
35
- glassType?: GlassType;
36
- /**
37
- * Platform: iOS only
38
- * The tint color of the glass effect
39
- * accepts hex color strings like '#FFFFFF'
40
- * accepts color names like 'white', 'clear', 'black', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta'
41
- * @default 'clear'
42
- */
43
- glassTintColor?: string;
44
- /**
45
- * Platform: iOS only
46
- * The opacity of the glass effect (0-1)
47
- * @default 1.0
48
- */
49
- glassOpacity?: number;
50
- /**
51
- * The type of blur effect to apply
52
- * liquidGlass = iOS Only
53
- * blur = Android | iOS
54
- * @default 'blur'
55
- */
56
- type?: 'blur' | 'liquidGlass';
57
- /**
58
- * Platform: iOS only
59
- * Whether the blur view should be interactive
60
- * @default true
61
- */
62
- isInteractive?: boolean;
63
- /**
64
- * Platform: iOS only
65
- * Whether the blur view should be ignore safe area insets
32
+ * @description style object for the blur view
33
+ *
66
34
  * @default false
67
35
  */
68
36
  ignoreSafeArea?: boolean;
37
+ /**
38
+ * @description Child components to render inside the blur view
39
+ *
40
+ * @default undefined
41
+ */
42
+ children?: React.ReactNode;
69
43
  }
70
44
  /**
71
45
  * A cross-platform blur view component that provides native blur effects.
@@ -1 +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;IAExB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4D5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
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;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"}
@@ -0,0 +1,85 @@
1
+ import React from 'react';
2
+ import type { ViewStyle, StyleProp } from 'react-native';
3
+ import { type GlassType } from './ReactNativeLiquidGlassViewNativeComponent';
4
+ export interface LiquidGlassViewProps {
5
+ /**
6
+ * The type of glass effect to apply
7
+ * Platform: iOS 26+ only
8
+ * @default 'clear'
9
+ */
10
+ glassType?: GlassType /**
11
+ * The tint color of the glass effect
12
+ * Accepts hex color strings like '#FFFFFF' or color names
13
+ * Platform: iOS 26+ only
14
+ * @default 'clear'
15
+ */;
16
+ glassTintColor?: string;
17
+ /**
18
+ * The opacity of the glass effect (0-1)
19
+ * Platform: iOS 26+ only
20
+ * @default 1.0
21
+ */
22
+ glassOpacity?: number;
23
+ /**
24
+ * Fallback color when reduced transparency is enabled or on older iOS versions
25
+ * Accepts hex color strings like '#FFFFFF'
26
+ * Platform: iOS only
27
+ * @default '#FFFFFF'
28
+ */
29
+ reducedTransparencyFallbackColor?: string;
30
+ /**
31
+ * Whether the glass view should be interactive
32
+ * Platform: iOS 26+ only
33
+ * @default true
34
+ */
35
+ isInteractive?: boolean;
36
+ /**
37
+ * Whether the glass view should ignore safe area insets
38
+ * Platform: iOS 26+ only
39
+ * @default false
40
+ */
41
+ ignoreSafeArea?: boolean;
42
+ /**
43
+ * Style object for the liquid glass view
44
+ */
45
+ style?: StyleProp<ViewStyle>;
46
+ /**
47
+ * Child components to render inside the liquid glass view
48
+ */
49
+ children?: React.ReactNode;
50
+ }
51
+ /**
52
+ * A Liquid Glass view component that provides iOS 26+ glass effects.
53
+ *
54
+ * This component uses the new UIKit glass effect API available on iOS 26+.
55
+ * On older iOS versions or when reduced transparency is enabled, it falls back
56
+ * to a solid color background.
57
+ *
58
+ * **Platform Support:**
59
+ * - iOS 26+: Native glass effect with full functionality
60
+ * - iOS < 26 or Android: Fallback to reducedTransparencyFallbackColor
61
+ *
62
+ * This component automatically handles the proper positioning pattern where the glass
63
+ * effect is positioned absolutely behind the content, ensuring interactive elements
64
+ * work correctly.
65
+ *
66
+ * @example
67
+ * ```tsx
68
+ * import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
69
+ *
70
+ * <LiquidGlassView
71
+ * glassType="clear"
72
+ * glassTintColor="#007AFF"
73
+ * glassOpacity={0.8}
74
+ * style={{ flex: 1 }}
75
+ * >
76
+ * <Text>Content on top of liquid glass</Text>
77
+ * <Button title="Interactive Button" onPress={() => {}} />
78
+ * </LiquidGlassView>
79
+ * ```
80
+ *
81
+ * @platform ios
82
+ */
83
+ export declare const LiquidGlassView: React.FC<LiquidGlassViewProps>;
84
+ export default LiquidGlassView;
85
+ //# sourceMappingURL=LiquidGlassView.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,16 +1,10 @@
1
1
  import type { ViewProps } from 'react-native';
2
2
  import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
3
3
  export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial';
4
- export type GlassType = 'clear' | 'regular';
5
4
  interface NativeProps extends ViewProps {
6
- glassTintColor?: WithDefault<string, 'clear'>;
7
- glassOpacity?: WithDefault<Double, 1.0>;
8
5
  blurAmount?: WithDefault<Double, 10.0>;
9
- type?: WithDefault<'blur' | 'liquidGlass', 'blur'>;
10
6
  blurType?: WithDefault<BlurType, 'xlight'>;
11
- glassType?: WithDefault<GlassType, 'clear'>;
12
7
  reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
13
- isInteractive?: WithDefault<boolean, true>;
14
8
  ignoreSafeArea?: WithDefault<boolean, false>;
15
9
  }
16
10
  declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
@@ -1 +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;IAC3C,cAAc,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;CAC9C;;AAED,wBAA0E"}
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,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"}