@sbaiahmed1/react-native-blur 4.5.2-alpha.6 → 4.5.2

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 (40) hide show
  1. package/README.md +14 -2
  2. package/lib/module/BlurView.js +0 -2
  3. package/lib/module/BlurView.js.map +1 -1
  4. package/lib/module/LiquidGlassView.js +1 -1
  5. package/lib/module/LiquidGlassView.js.map +1 -1
  6. package/lib/module/ReactNativeBlurViewNativeComponent.ts +22 -3
  7. package/lib/module/ReactNativeLiquidGlassViewNativeComponent.ts +1 -3
  8. package/lib/module/ReactNativeProgressiveBlurViewNativeComponent.ts +27 -3
  9. package/lib/module/VibrancyView.js +1 -1
  10. package/lib/module/VibrancyView.js.map +1 -1
  11. package/lib/module/index.js +1 -1
  12. package/lib/module/index.js.map +1 -1
  13. package/lib/typescript/src/BlurView.d.ts +48 -2
  14. package/lib/typescript/src/BlurView.d.ts.map +1 -1
  15. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts +1 -2
  16. package/lib/typescript/src/ReactNativeBlurViewNativeComponent.d.ts.map +1 -1
  17. package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts +1 -2
  18. package/lib/typescript/src/ReactNativeLiquidGlassViewNativeComponent.d.ts.map +1 -1
  19. package/lib/typescript/src/ReactNativeProgressiveBlurViewNativeComponent.d.ts +2 -2
  20. package/lib/typescript/src/ReactNativeProgressiveBlurViewNativeComponent.d.ts.map +1 -1
  21. package/package.json +2 -4
  22. package/src/BlurView.tsx +56 -4
  23. package/src/ReactNativeBlurViewNativeComponent.ts +22 -3
  24. package/src/ReactNativeLiquidGlassViewNativeComponent.ts +1 -3
  25. package/src/ReactNativeProgressiveBlurViewNativeComponent.ts +27 -3
  26. package/lib/module/BlurView.web.js +0 -137
  27. package/lib/module/BlurView.web.js.map +0 -1
  28. package/lib/module/index.web.js +0 -19
  29. package/lib/module/index.web.js.map +0 -1
  30. package/lib/module/types.js +0 -4
  31. package/lib/module/types.js.map +0 -1
  32. package/lib/typescript/src/BlurView.web.d.ts +0 -23
  33. package/lib/typescript/src/BlurView.web.d.ts.map +0 -1
  34. package/lib/typescript/src/index.web.d.ts +0 -3
  35. package/lib/typescript/src/index.web.d.ts.map +0 -1
  36. package/lib/typescript/src/types.d.ts +0 -55
  37. package/lib/typescript/src/types.d.ts.map +0 -1
  38. package/src/BlurView.web.tsx +0 -171
  39. package/src/index.web.tsx +0 -17
  40. package/src/types.ts +0 -89
package/README.md CHANGED
@@ -29,9 +29,21 @@ A modern React Native library providing **six specialized components** for advan
29
29
  <em>iOS (left) and Android (right) blur effects in action</em>
30
30
  <br>
31
31
  <br>
32
- <video src="demos/vibrancy_iOS.mov" width="300" autoplay loop muted playsinline></video>
32
+ <a href="demos/vibrancy_iOS.mp4">
33
+ <img src="https://img.shields.io/badge/▶️_Watch-Vibrancy_Demo-blue?style=for-the-badge" alt="Vibrancy Demo" />
34
+ </a>
33
35
  <br>
34
- <em>Vibrancy Effect (iOS only)</em>
36
+ <em>Vibrancy Effect (iOS only) - Click badge to watch video</em>
37
+ <br>
38
+ <br>
39
+ <a href="demos/Progressive-Blur-iOS.mp4">
40
+ <img src="https://img.shields.io/badge/▶️_Watch-Progressive_Blur_iOS-purple?style=for-the-badge" alt="Progressive Blur iOS" />
41
+ </a>
42
+ <a href="demos/Progressive-Blur-Android.mp4">
43
+ <img src="https://img.shields.io/badge/▶️_Watch-Progressive_Blur_Android-green?style=for-the-badge" alt="Progressive Blur Android" />
44
+ </a>
45
+ <br>
46
+ <em>Progressive Blur Effect (iOS & Android) - Click badges to watch videos</em>
35
47
  <br>
36
48
  <br>
37
49
  <em>Liquid Glass effect in action (iOS 26+ only)</em>
@@ -3,8 +3,6 @@
3
3
  import React, { Children } from 'react';
4
4
  import { Platform, StyleSheet, View } from 'react-native';
5
5
  import ReactNativeBlurView from './ReactNativeBlurViewNativeComponent';
6
-
7
- // Re-export for backward compatibility
8
6
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
7
  /**
10
8
  * A cross-platform blur view component that provides native blur effects.
@@ -1 +1 @@
1
- {"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACzD,OAAOC,mBAAmB,MAAM,sCAAsC;;AAGtE;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGA;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,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,eAEFX,IAAA,CAACH,IAAI;MAACW,KAAK,EAAEU,MAAM,CAACT,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDb,QAAQ,EAAE;IACRY,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;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,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,eAEFX,IAAA,CAACH,IAAI;MAACW,KAAK,EAAEU,MAAM,CAACT,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDb,QAAQ,EAAE;IACRY,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
@@ -3,7 +3,7 @@
3
3
  import React from 'react';
4
4
  import { Platform } from 'react-native';
5
5
  import ReactNativeLiquidGlassView from './ReactNativeLiquidGlassViewNativeComponent';
6
- import BlurView from './BlurView';
6
+ import BlurView from "./BlurView.js";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  /**
9
9
  * A Liquid Glass view component that provides iOS 26+ glass effects.
@@ -1 +1 @@
1
- {"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","isIos","OS","Number","parseInt","String","Version","console","warn","overlayColorWithAlpha","Math","floor","toString","padStart","blurAmount","overlayColor"],"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,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgElC;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,MAAMC,KAAK,GAAGf,QAAQ,CAACgB,EAAE,KAAK,KAAK;;EAEnC;EACA,IAAI,CAACD,KAAK,IAAKA,KAAK,IAAIE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAACnB,QAAQ,CAACoB,OAAO,CAAC,EAAE,EAAE,CAAC,GAAG,EAAG,EAAE;IAC3EC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;;IAED;IACA,MAAMC,qBAAqB,GACzBhB,cAAc,GACdiB,IAAI,CAACC,KAAK,CAACjB,YAAY,GAAG,GAAG,CAAC,CAC3BkB,QAAQ,CAAC,EAAE,CAAC,CACZC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAErB,oBACEvB,IAAA,CAACF,QAAQ;MACP0B,UAAU,EAAE,EAAG;MACfC,YAAY,EAAEN,qBAAsB;MACpCd,gCAAgC,EAAEA,gCAAiC;MACnEE,cAAc,EAAEA,cAAe;MAC/BC,KAAK,EAAEA,KAAM;MAAAC,QAAA,EAEZA;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":[]}
1
+ {"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","isIos","OS","Number","parseInt","String","Version","console","warn","overlayColorWithAlpha","Math","floor","toString","padStart","blurAmount","overlayColor"],"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;AAgElC;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,MAAMC,KAAK,GAAGf,QAAQ,CAACgB,EAAE,KAAK,KAAK;;EAEnC;EACA,IAAI,CAACD,KAAK,IAAKA,KAAK,IAAIE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAACnB,QAAQ,CAACoB,OAAO,CAAC,EAAE,EAAE,CAAC,GAAG,EAAG,EAAE;IAC3EC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;;IAED;IACA,MAAMC,qBAAqB,GACzBhB,cAAc,GACdiB,IAAI,CAACC,KAAK,CAACjB,YAAY,GAAG,GAAG,CAAC,CAC3BkB,QAAQ,CAAC,EAAE,CAAC,CACZC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAErB,oBACEvB,IAAA,CAACF,QAAQ;MACP0B,UAAU,EAAE,EAAG;MACfC,YAAY,EAAEN,qBAAsB;MACpCd,gCAAgC,EAAEA,gCAAiC;MACnEE,cAAc,EAAEA,cAAe;MAC/BC,KAAK,EAAEA,KAAM;MAAAC,QAAA,EAEZA;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":[]}
@@ -4,10 +4,29 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { BlurType } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { BlurType };
8
+ export type BlurType =
9
+ | 'xlight'
10
+ | 'light'
11
+ | 'dark'
12
+ | 'extraDark'
13
+ | 'regular'
14
+ | 'prominent'
15
+ | 'systemUltraThinMaterial'
16
+ | 'systemThinMaterial'
17
+ | 'systemMaterial'
18
+ | 'systemThickMaterial'
19
+ | 'systemChromeMaterial'
20
+ | 'systemUltraThinMaterialLight'
21
+ | 'systemThinMaterialLight'
22
+ | 'systemMaterialLight'
23
+ | 'systemThickMaterialLight'
24
+ | 'systemChromeMaterialLight'
25
+ | 'systemUltraThinMaterialDark'
26
+ | 'systemThinMaterialDark'
27
+ | 'systemMaterialDark'
28
+ | 'systemThickMaterialDark'
29
+ | 'systemChromeMaterialDark';
11
30
 
12
31
  interface NativeProps extends ViewProps {
13
32
  blurAmount?: WithDefault<Double, 10.0>;
@@ -4,10 +4,8 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { GlassType } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { GlassType };
8
+ export type GlassType = 'clear' | 'regular';
11
9
 
12
10
  interface NativeProps extends ViewProps {
13
11
  /**
@@ -4,10 +4,34 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { BlurType, ProgressiveBlurDirection } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { BlurType, ProgressiveBlurDirection };
8
+ export type BlurType =
9
+ | 'xlight'
10
+ | 'light'
11
+ | 'dark'
12
+ | 'extraDark'
13
+ | 'regular'
14
+ | 'prominent'
15
+ | 'systemUltraThinMaterial'
16
+ | 'systemThinMaterial'
17
+ | 'systemMaterial'
18
+ | 'systemThickMaterial'
19
+ | 'systemChromeMaterial'
20
+ | 'systemUltraThinMaterialLight'
21
+ | 'systemThinMaterialLight'
22
+ | 'systemMaterialLight'
23
+ | 'systemThickMaterialLight'
24
+ | 'systemChromeMaterialLight'
25
+ | 'systemUltraThinMaterialDark'
26
+ | 'systemThinMaterialDark'
27
+ | 'systemMaterialDark'
28
+ | 'systemThickMaterialDark'
29
+ | 'systemChromeMaterialDark';
30
+
31
+ export type ProgressiveBlurDirection =
32
+ | 'blurredTopClearBottom'
33
+ | 'blurredBottomClearTop'
34
+ | 'blurredCenterClearTopAndBottom';
11
35
 
12
36
  interface NativeProps extends ViewProps {
13
37
  blurAmount?: WithDefault<Double, 20.0>;
@@ -3,7 +3,7 @@
3
3
  import React from 'react';
4
4
  import { Platform, StyleSheet } from 'react-native';
5
5
  import ReactNativeVibrancyView from './ReactNativeVibrancyViewNativeComponent';
6
- import BlurView from './BlurView';
6
+ import BlurView from "./BlurView.js";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  /**
9
9
  * A component that applies a vibrancy effect to its content.
@@ -1 +1 @@
1
- {"version":3,"names":["React","Platform","StyleSheet","ReactNativeVibrancyView","BlurView","jsx","_jsx","VibrancyView","blurType","blurAmount","style","children","props","OS","styles","container","create","backgroundColor"],"sourceRoot":"../../src","sources":["VibrancyView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,uBAAuB,MAEvB,0CAA0C;AACjD,OAAOC,QAAQ,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgClC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAyC,GAAGA,CAAC;EACxDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIX,QAAQ,CAACY,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEP,IAAA,CAACF,QAAQ;MACPI,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MAAA,GACTE,KAAK;MAAAD,QAAA,EAERA;IAAQ,CACD,CAAC;EAEf;EACA,oBACEL,IAAA,CAACH,uBAAuB;IACtBK,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAE,CAACI,MAAM,CAACC,SAAS,EAAEL,KAAK,CAAE;IAAA,GAC7BE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMG,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["React","Platform","StyleSheet","ReactNativeVibrancyView","BlurView","jsx","_jsx","VibrancyView","blurType","blurAmount","style","children","props","OS","styles","container","create","backgroundColor"],"sourceRoot":"../../src","sources":["VibrancyView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,uBAAuB,MAEvB,0CAA0C;AACjD,OAAOC,QAAQ,MAAM,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgClC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAyC,GAAGA,CAAC;EACxDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIX,QAAQ,CAACY,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEP,IAAA,CAACF,QAAQ;MACPI,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MAAA,GACTE,KAAK;MAAAD,QAAA,EAERA;IAAQ,CACD,CAAC;EAEf;EACA,oBACEL,IAAA,CAACH,uBAAuB;IACtBK,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAE,CAACI,MAAM,CAACC,SAAS,EAAEL,KAAK,CAAE;IAAA,GAC7BE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMG,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}
@@ -2,7 +2,7 @@
2
2
 
3
3
  export { default as ReactNativeBlurView } from './ReactNativeBlurViewNativeComponent';
4
4
  export * from './ReactNativeBlurViewNativeComponent';
5
- export { BlurView as default, BlurView } from './BlurView';
5
+ export { BlurView as default, BlurView } from "./BlurView.js";
6
6
  export { default as ReactNativeLiquidGlassView } from './ReactNativeLiquidGlassViewNativeComponent';
7
7
  export { LiquidGlassView } from "./LiquidGlassView.js";
8
8
  export { default as ReactNativeProgressiveBlurView } from './ReactNativeProgressiveBlurViewNativeComponent';
@@ -1 +1 @@
1
- {"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer","ReactNativeBlurSwitch","BlurSwitch","ReactNativeVibrancyView","VibrancyView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,YAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB;AAG7D,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,wCAAwC;AAGzF,SAASC,UAAU,QAAQ,iBAAc;AAGzC,SAASV,OAAO,IAAIW,uBAAuB,QAAQ,0CAA0C;AAC7F,SAASC,YAAY,QAAQ,mBAAgB","ignoreList":[]}
1
+ {"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer","ReactNativeBlurSwitch","BlurSwitch","ReactNativeVibrancyView","VibrancyView"],"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;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB;AAG7D,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,wCAAwC;AAGzF,SAASC,UAAU,QAAQ,iBAAc;AAGzC,SAASV,OAAO,IAAIW,uBAAuB,QAAQ,0CAA0C;AAC7F,SAASC,YAAY,QAAQ,mBAAgB","ignoreList":[]}
@@ -1,6 +1,52 @@
1
1
  import React from 'react';
2
- import type { BlurViewProps } from './types';
3
- export type { BlurViewProps };
2
+ import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
3
+ import { type BlurType } from './ReactNativeBlurViewNativeComponent';
4
+ export interface BlurViewProps {
5
+ /**
6
+ * @description The type of blur effect to apply
7
+ *
8
+ * @default 'xlight'
9
+ */
10
+ blurType?: BlurType;
11
+ /**
12
+ * @description The intensity of the blur effect (0-100)
13
+ *
14
+ * @default 10
15
+ */
16
+ blurAmount?: number;
17
+ /**
18
+ * @description Fallback color when reduced transparency is enabled
19
+ *
20
+ * Accepts hex color strings like `#FFFFFF`
21
+ *
22
+ * @default '#FFFFFF'
23
+ */
24
+ reducedTransparencyFallbackColor?: string;
25
+ /**
26
+ * @description The overlay color to apply on top of the blur effect
27
+ *
28
+ * @default undefined
29
+ */
30
+ overlayColor?: ColorValue;
31
+ /**
32
+ * @description style object for the blur view
33
+ *
34
+ * @default undefined
35
+ */
36
+ style?: StyleProp<ViewStyle>;
37
+ /**
38
+ * @description style object for the blur view
39
+ *
40
+ * @default false
41
+ */
42
+ ignoreSafeArea?: boolean;
43
+ /**
44
+ * @description Child components to render inside the blur view
45
+ *
46
+ * @default undefined
47
+ */
48
+ children?: React.ReactNode;
49
+ }
4
50
  /**
5
51
  * A cross-platform blur view component that provides native blur effects.
6
52
  *
@@ -1 +1 @@
1
- {"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,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,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;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,CAqD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,7 +1,6 @@
1
1
  import type { ViewProps } from 'react-native';
2
2
  import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
3
- import type { BlurType } from './types';
4
- export type { BlurType };
3
+ export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
5
4
  interface NativeProps extends ViewProps {
6
5
  blurAmount?: WithDefault<Double, 10.0>;
7
6
  blurType?: WithDefault<BlurType, 'xlight'>;
@@ -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;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,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"}
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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,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"}
@@ -1,7 +1,6 @@
1
1
  import type { ViewProps } from 'react-native';
2
2
  import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
3
- import type { GlassType } from './types';
4
- export type { GlassType };
3
+ export type GlassType = 'clear' | 'regular';
5
4
  interface NativeProps extends ViewProps {
6
5
  /**
7
6
  * The type of glass effect to apply
@@ -1 +1 @@
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;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,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"}
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"}
@@ -1,7 +1,7 @@
1
1
  import type { ViewProps } from 'react-native';
2
2
  import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
3
- import type { BlurType, ProgressiveBlurDirection } from './types';
4
- export type { BlurType, ProgressiveBlurDirection };
3
+ export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
4
+ export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredCenterClearTopAndBottom';
5
5
  interface NativeProps extends ViewProps {
6
6
  blurAmount?: WithDefault<Double, 20.0>;
7
7
  blurType?: WithDefault<BlurType, 'regular'>;
@@ -1 +1 @@
1
- {"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAGlE,YAAY,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;AAEnD,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}
1
+ {"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}
package/package.json CHANGED
@@ -1,15 +1,13 @@
1
1
  {
2
2
  "name": "@sbaiahmed1/react-native-blur",
3
- "version": "4.5.2-alpha.6",
3
+ "version": "4.5.2",
4
4
  "description": "React native modern blur view",
5
5
  "main": "./lib/module/index.js",
6
- "browser": "./lib/module/index.web.js",
7
6
  "types": "./lib/typescript/src/index.d.ts",
8
7
  "exports": {
9
8
  ".": {
9
+ "source": "./src/index.tsx",
10
10
  "types": "./lib/typescript/src/index.d.ts",
11
- "react-native": "./lib/module/index.js",
12
- "browser": "./lib/module/index.web.js",
13
11
  "default": "./lib/module/index.js"
14
12
  },
15
13
  "./package.json": "./package.json"
package/src/BlurView.tsx CHANGED
@@ -1,10 +1,62 @@
1
1
  import React, { Children } from 'react';
2
2
  import { Platform, StyleSheet, View } from 'react-native';
3
- import ReactNativeBlurView from './ReactNativeBlurViewNativeComponent';
4
- import type { BlurViewProps } from './types';
3
+ import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
4
+ import ReactNativeBlurView, {
5
+ type BlurType,
6
+ } from './ReactNativeBlurViewNativeComponent';
5
7
 
6
- // Re-export for backward compatibility
7
- export type { BlurViewProps };
8
+ export interface BlurViewProps {
9
+ /**
10
+ * @description The type of blur effect to apply
11
+ *
12
+ * @default 'xlight'
13
+ */
14
+ blurType?: BlurType;
15
+
16
+ /**
17
+ * @description The intensity of the blur effect (0-100)
18
+ *
19
+ * @default 10
20
+ */
21
+ blurAmount?: number;
22
+
23
+ /**
24
+ * @description Fallback color when reduced transparency is enabled
25
+ *
26
+ * Accepts hex color strings like `#FFFFFF`
27
+ *
28
+ * @default '#FFFFFF'
29
+ */
30
+ reducedTransparencyFallbackColor?: string;
31
+
32
+ /**
33
+ * @description The overlay color to apply on top of the blur effect
34
+ *
35
+ * @default undefined
36
+ */
37
+ overlayColor?: ColorValue;
38
+
39
+ /**
40
+ * @description style object for the blur view
41
+ *
42
+ * @default undefined
43
+ */
44
+ style?: StyleProp<ViewStyle>;
45
+
46
+ /**
47
+ * @description style object for the blur view
48
+ *
49
+ * @default false
50
+ */
51
+ ignoreSafeArea?: boolean;
52
+
53
+ /**
54
+ * @description Child components to render inside the blur view
55
+ *
56
+ * @default undefined
57
+ */
58
+ children?: React.ReactNode;
59
+ }
8
60
 
9
61
  /**
10
62
  * A cross-platform blur view component that provides native blur effects.
@@ -4,10 +4,29 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { BlurType } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { BlurType };
8
+ export type BlurType =
9
+ | 'xlight'
10
+ | 'light'
11
+ | 'dark'
12
+ | 'extraDark'
13
+ | 'regular'
14
+ | 'prominent'
15
+ | 'systemUltraThinMaterial'
16
+ | 'systemThinMaterial'
17
+ | 'systemMaterial'
18
+ | 'systemThickMaterial'
19
+ | 'systemChromeMaterial'
20
+ | 'systemUltraThinMaterialLight'
21
+ | 'systemThinMaterialLight'
22
+ | 'systemMaterialLight'
23
+ | 'systemThickMaterialLight'
24
+ | 'systemChromeMaterialLight'
25
+ | 'systemUltraThinMaterialDark'
26
+ | 'systemThinMaterialDark'
27
+ | 'systemMaterialDark'
28
+ | 'systemThickMaterialDark'
29
+ | 'systemChromeMaterialDark';
11
30
 
12
31
  interface NativeProps extends ViewProps {
13
32
  blurAmount?: WithDefault<Double, 10.0>;
@@ -4,10 +4,8 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { GlassType } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { GlassType };
8
+ export type GlassType = 'clear' | 'regular';
11
9
 
12
10
  interface NativeProps extends ViewProps {
13
11
  /**
@@ -4,10 +4,34 @@ import type {
4
4
  WithDefault,
5
5
  Double,
6
6
  } from 'react-native/Libraries/Types/CodegenTypes';
7
- import type { BlurType, ProgressiveBlurDirection } from './types';
8
7
 
9
- // Re-export for backward compatibility
10
- export type { BlurType, ProgressiveBlurDirection };
8
+ export type BlurType =
9
+ | 'xlight'
10
+ | 'light'
11
+ | 'dark'
12
+ | 'extraDark'
13
+ | 'regular'
14
+ | 'prominent'
15
+ | 'systemUltraThinMaterial'
16
+ | 'systemThinMaterial'
17
+ | 'systemMaterial'
18
+ | 'systemThickMaterial'
19
+ | 'systemChromeMaterial'
20
+ | 'systemUltraThinMaterialLight'
21
+ | 'systemThinMaterialLight'
22
+ | 'systemMaterialLight'
23
+ | 'systemThickMaterialLight'
24
+ | 'systemChromeMaterialLight'
25
+ | 'systemUltraThinMaterialDark'
26
+ | 'systemThinMaterialDark'
27
+ | 'systemMaterialDark'
28
+ | 'systemThickMaterialDark'
29
+ | 'systemChromeMaterialDark';
30
+
31
+ export type ProgressiveBlurDirection =
32
+ | 'blurredTopClearBottom'
33
+ | 'blurredBottomClearTop'
34
+ | 'blurredCenterClearTopAndBottom';
11
35
 
12
36
  interface NativeProps extends ViewProps {
13
37
  blurAmount?: WithDefault<Double, 20.0>;
@@ -1,137 +0,0 @@
1
- "use strict";
2
-
3
- import { forwardRef, useImperativeHandle, useRef } from 'react';
4
- import { View } from 'react-native';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- /**
7
- * Maps blur types to background colors with opacity based on intensity
8
- * Follows iOS design guidelines from Apple's iOS 14+ Sketch Kit
9
- */
10
- function getBackgroundColor(blurAmount, blurType) {
11
- const intensity = Math.min(blurAmount, 100);
12
- const opacity = intensity / 100;
13
- switch (blurType) {
14
- // Dark blur types
15
- case 'dark':
16
- case 'extraDark':
17
- case 'systemMaterialDark':
18
- return `rgba(25, 25, 25, ${opacity * 0.78})`;
19
- case 'systemThickMaterialDark':
20
- return `rgba(37, 37, 37, ${opacity * 0.9})`;
21
- case 'systemThinMaterialDark':
22
- return `rgba(37, 37, 37, ${opacity * 0.7})`;
23
- case 'systemUltraThinMaterialDark':
24
- return `rgba(37, 37, 37, ${opacity * 0.55})`;
25
- case 'systemChromeMaterialDark':
26
- return `rgba(0, 0, 0, ${opacity * 0.75})`;
27
-
28
- // Light blur types
29
- case 'light':
30
- case 'xlight':
31
- case 'systemMaterialLight':
32
- case 'systemUltraThinMaterialLight':
33
- case 'systemThickMaterialLight':
34
- return `rgba(249, 249, 249, ${opacity * 0.78})`;
35
- case 'systemThinMaterialLight':
36
- return `rgba(199, 199, 199, ${opacity * 0.78})`;
37
- case 'systemChromeMaterialLight':
38
- return `rgba(255, 255, 255, ${opacity * 0.97})`;
39
-
40
- // Default/neutral blur types
41
- case 'regular':
42
- return `rgba(179, 179, 179, ${opacity * 0.82})`;
43
- case 'systemThinMaterial':
44
- return `rgba(199, 199, 199, ${opacity * 0.97})`;
45
- case 'systemChromeMaterial':
46
- return `rgba(255, 255, 255, ${opacity * 0.75})`;
47
- case 'systemUltraThinMaterial':
48
- case 'systemThickMaterial':
49
- return `rgba(191, 191, 191, ${opacity * 0.44})`;
50
- case 'prominent':
51
- case 'systemMaterial':
52
- default:
53
- return `rgba(255, 255, 255, ${opacity * 0.3})`;
54
- }
55
- }
56
-
57
- /**
58
- * Generates blur style object with backdrop-filter and background color
59
- */
60
- function getBlurStyle(blurAmount, blurType) {
61
- const intensity = Math.min(blurAmount, 100);
62
- // Convert blur amount to CSS pixels (using same formula as Expo)
63
- const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
64
- return {
65
- backgroundColor: getBackgroundColor(blurAmount, blurType),
66
- backdropFilter: blur,
67
- WebkitBackdropFilter: blur
68
- };
69
- }
70
-
71
- /**
72
- * Web implementation of BlurView using CSS backdrop-filter
73
- *
74
- * This component provides blur effects on web platforms using CSS backdrop-filter.
75
- * It maps the native blur types to appropriate background colors and blur intensities.
76
- *
77
- * @example
78
- * ```tsx
79
- * <BlurView
80
- * blurType="light"
81
- * blurAmount={20}
82
- * style={{ flex: 1 }}
83
- * >
84
- * <Text>Content on top of blur</Text>
85
- * </BlurView>
86
- * ```
87
- */
88
- export const BlurView = /*#__PURE__*/forwardRef(({
89
- blurType = 'xlight',
90
- blurAmount = 10,
91
- style,
92
- overlayColor,
93
- children,
94
- ...props
95
- }, ref) => {
96
- const blurViewRef = useRef(null);
97
- const blurStyle = getBlurStyle(blurAmount, blurType);
98
- useImperativeHandle(ref, () => ({
99
- setNativeProps: nativeProps => {
100
- if (!blurViewRef.current?.style) {
101
- return;
102
- }
103
-
104
- // Update blur amount if provided
105
- const nextBlurAmount = nativeProps.blurAmount ?? blurAmount;
106
- const nextBlurType = nativeProps.blurType ?? blurType;
107
- const nextBlurStyle = getBlurStyle(nextBlurAmount, nextBlurType);
108
-
109
- // Apply style properties
110
- if (nativeProps.style) {
111
- const styleObj = nativeProps.style;
112
- for (const key in styleObj) {
113
- if (key !== 'blurAmount' && key !== 'blurType') {
114
- blurViewRef.current.style[key] = styleObj[key];
115
- }
116
- }
117
- }
118
-
119
- // Apply blur styles
120
- blurViewRef.current.style.backgroundColor = nextBlurStyle.backgroundColor;
121
- blurViewRef.current.style.backdropFilter = nextBlurStyle.backdropFilter;
122
- blurViewRef.current.style.webkitBackdropFilter = nextBlurStyle.WebkitBackdropFilter;
123
- }
124
- }), [blurAmount, blurType]);
125
- const overlay = overlayColor ? {
126
- backgroundColor: overlayColor
127
- } : undefined;
128
- return /*#__PURE__*/_jsx(View, {
129
- ...props,
130
- style: [style, blurStyle, overlay],
131
- ref: blurViewRef,
132
- children: children
133
- });
134
- });
135
- BlurView.displayName = 'BlurView';
136
- export default BlurView;
137
- //# sourceMappingURL=BlurView.web.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["forwardRef","useImperativeHandle","useRef","View","jsx","_jsx","getBackgroundColor","blurAmount","blurType","intensity","Math","min","opacity","getBlurStyle","blur","backgroundColor","backdropFilter","WebkitBackdropFilter","BlurView","style","overlayColor","children","props","ref","blurViewRef","blurStyle","setNativeProps","nativeProps","current","nextBlurAmount","nextBlurType","nextBlurStyle","styleObj","key","webkitBackdropFilter","overlay","undefined","displayName"],"sourceRoot":"../../src","sources":["BlurView.web.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAC/D,SAASC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIpC;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CAACC,UAAkB,EAAEC,QAAkB,EAAU;EAC1E,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACJ,UAAU,EAAE,GAAG,CAAC;EAC3C,MAAMK,OAAO,GAAGH,SAAS,GAAG,GAAG;EAE/B,QAAQD,QAAQ;IACd;IACA,KAAK,MAAM;IACX,KAAK,WAAW;IAChB,KAAK,oBAAoB;MACvB,OAAO,oBAAoBI,OAAO,GAAG,IAAI,GAAG;IAE9C,KAAK,yBAAyB;MAC5B,OAAO,oBAAoBA,OAAO,GAAG,GAAG,GAAG;IAE7C,KAAK,wBAAwB;MAC3B,OAAO,oBAAoBA,OAAO,GAAG,GAAG,GAAG;IAE7C,KAAK,6BAA6B;MAChC,OAAO,oBAAoBA,OAAO,GAAG,IAAI,GAAG;IAE9C,KAAK,0BAA0B;MAC7B,OAAO,iBAAiBA,OAAO,GAAG,IAAI,GAAG;;IAE3C;IACA,KAAK,OAAO;IACZ,KAAK,QAAQ;IACb,KAAK,qBAAqB;IAC1B,KAAK,8BAA8B;IACnC,KAAK,0BAA0B;MAC7B,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,yBAAyB;MAC5B,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,2BAA2B;MAC9B,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;;IAEjD;IACA,KAAK,SAAS;MACZ,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,oBAAoB;MACvB,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,sBAAsB;MACzB,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,yBAAyB;IAC9B,KAAK,qBAAqB;MACxB,OAAO,uBAAuBA,OAAO,GAAG,IAAI,GAAG;IAEjD,KAAK,WAAW;IAChB,KAAK,gBAAgB;IACrB;MACE,OAAO,uBAAuBA,OAAO,GAAG,GAAG,GAAG;EAClD;AACF;;AAEA;AACA;AACA;AACA,SAASC,YAAYA,CACnBN,UAAkB,EAClBC,QAAkB,EACM;EACxB,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACJ,UAAU,EAAE,GAAG,CAAC;EAC3C;EACA,MAAMO,IAAI,GAAG,uBAAuBL,SAAS,GAAG,GAAG,KAAK;EAExD,OAAO;IACLM,eAAe,EAAET,kBAAkB,CAACC,UAAU,EAAEC,QAAQ,CAAC;IACzDQ,cAAc,EAAEF,IAAI;IACpBG,oBAAoB,EAAEH;EACxB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,QAAQ,gBAAGlB,UAAU,CAIhC,CACE;EACEQ,QAAQ,GAAG,QAAQ;EACnBD,UAAU,GAAG,EAAE;EACfY,KAAK;EACLC,YAAY;EACZC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,WAAW,GAAGtB,MAAM,CAAM,IAAI,CAAC;EACrC,MAAMuB,SAAS,GAAGZ,YAAY,CAACN,UAAU,EAAEC,QAAQ,CAAC;EAEpDP,mBAAmB,CACjBsB,GAAG,EACH,OAAO;IACLG,cAAc,EAAGC,WAA0B,IAAK;MAC9C,IAAI,CAACH,WAAW,CAACI,OAAO,EAAET,KAAK,EAAE;QAC/B;MACF;;MAEA;MACA,MAAMU,cAAc,GAAGF,WAAW,CAACpB,UAAU,IAAIA,UAAU;MAC3D,MAAMuB,YAAY,GAAGH,WAAW,CAACnB,QAAQ,IAAIA,QAAQ;MACrD,MAAMuB,aAAa,GAAGlB,YAAY,CAACgB,cAAc,EAAEC,YAAY,CAAC;;MAEhE;MACA,IAAIH,WAAW,CAACR,KAAK,EAAE;QACrB,MAAMa,QAAQ,GAAGL,WAAW,CAACR,KAAkB;QAC/C,KAAK,MAAMc,GAAG,IAAID,QAAQ,EAAE;UAC1B,IAAIC,GAAG,KAAK,YAAY,IAAIA,GAAG,KAAK,UAAU,EAAE;YAC9CT,WAAW,CAACI,OAAO,CAACT,KAAK,CAACc,GAAG,CAAC,GAC5BD,QAAQ,CAACC,GAAG,CAAoB;UACpC;QACF;MACF;;MAEA;MACAT,WAAW,CAACI,OAAO,CAACT,KAAK,CAACJ,eAAe,GACvCgB,aAAa,CAAChB,eAAe;MAC/BS,WAAW,CAACI,OAAO,CAACT,KAAK,CAACH,cAAc,GACtCe,aAAa,CAACf,cAAc;MAC9BQ,WAAW,CAACI,OAAO,CAACT,KAAK,CAACe,oBAAoB,GAC5CH,aAAa,CAACd,oBAAoB;IACtC;EACF,CAAC,CAAC,EACF,CAACV,UAAU,EAAEC,QAAQ,CACvB,CAAC;EAED,MAAM2B,OAAO,GAAGf,YAAY,GACxB;IAAEL,eAAe,EAAEK;EAAa,CAAC,GACjCgB,SAAS;EAEb,oBACE/B,IAAA,CAACF,IAAI;IAAA,GAAKmB,KAAK;IAAEH,KAAK,EAAE,CAACA,KAAK,EAAEM,SAAS,EAAEU,OAAO,CAAE;IAACZ,GAAG,EAAEC,WAAY;IAAAH,QAAA,EACnEA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDH,QAAQ,CAACmB,WAAW,GAAG,UAAU;AAEjC,eAAenB,QAAQ","ignoreList":[]}
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- // Web-specific exports
4
- // Only exports components that have web implementations
5
-
6
- export { BlurView as default, BlurView } from "./BlurView.web.js";
7
-
8
- // Re-export types (these don't import native code)
9
-
10
- // Note: The following components are not yet supported on web:
11
- // - VibrancyView (iOS-specific)
12
- // - ProgressiveBlurView (requires native gradient blur)
13
- // - LiquidGlassView (iOS 26+ specific)
14
- // - LiquidGlassContainer (iOS 26+ specific)
15
- // - BlurSwitch (Android-specific)
16
- //
17
- // Attempting to use these on web will result in import errors.
18
- // Consider using BlurView as a fallback for web platforms.
19
- //# sourceMappingURL=index.web.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["BlurView","default"],"sourceRoot":"../../src","sources":["index.web.tsx"],"mappings":";;AAAA;AACA;;AAEA,SAASA,QAAQ,IAAIC,OAAO,EAAED,QAAQ,QAAQ,mBAAgB;;AAE9D;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
@@ -1,4 +0,0 @@
1
- "use strict";
2
-
3
- export {};
4
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}
@@ -1,23 +0,0 @@
1
- import type { BlurViewProps } from './types';
2
- /**
3
- * Web implementation of BlurView using CSS backdrop-filter
4
- *
5
- * This component provides blur effects on web platforms using CSS backdrop-filter.
6
- * It maps the native blur types to appropriate background colors and blur intensities.
7
- *
8
- * @example
9
- * ```tsx
10
- * <BlurView
11
- * blurType="light"
12
- * blurAmount={20}
13
- * style={{ flex: 1 }}
14
- * >
15
- * <Text>Content on top of blur</Text>
16
- * </BlurView>
17
- * ```
18
- */
19
- export declare const BlurView: import("react").ForwardRefExoticComponent<BlurViewProps & import("react").RefAttributes<{
20
- setNativeProps: (props: BlurViewProps) => void;
21
- }>>;
22
- export default BlurView;
23
- //# sourceMappingURL=BlurView.web.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BlurView.web.d.ts","sourceRoot":"","sources":["../../../src/BlurView.web.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,SAAS,CAAC;AAkFvD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ;oBACD,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;GA+DjD,CAAC;AAIF,eAAe,QAAQ,CAAC"}
@@ -1,3 +0,0 @@
1
- export { BlurView as default, BlurView } from './BlurView.web';
2
- export type { BlurType, GlassType, ProgressiveBlurDirection, BlurViewProps } from './types';
3
- //# sourceMappingURL=index.web.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../src/index.web.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/D,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,wBAAwB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
@@ -1,55 +0,0 @@
1
- /**
2
- * Shared types for @sbaiahmed1/react-native-blur
3
- * These types are platform-agnostic and can be used on iOS, Android, and Web
4
- */
5
- import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
6
- export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
7
- export type GlassType = 'clear' | 'regular';
8
- export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredCenterClearTopAndBottom';
9
- export interface BlurViewProps {
10
- /**
11
- * @description The type of blur effect to apply
12
- *
13
- * @default 'xlight'
14
- */
15
- blurType?: BlurType;
16
- /**
17
- * @description The intensity of the blur effect (0-100)
18
- *
19
- * @default 10
20
- */
21
- blurAmount?: number;
22
- /**
23
- * @description Fallback color when reduced transparency is enabled
24
- *
25
- * Accepts hex color strings like `#FFFFFF`
26
- *
27
- * @default '#FFFFFF'
28
- */
29
- reducedTransparencyFallbackColor?: string;
30
- /**
31
- * @description The overlay color to apply on top of the blur effect
32
- *
33
- * @default undefined
34
- */
35
- overlayColor?: ColorValue;
36
- /**
37
- * @description style object for the blur view
38
- *
39
- * @default undefined
40
- */
41
- style?: StyleProp<ViewStyle>;
42
- /**
43
- * @description style object for the blur view
44
- *
45
- * @default false
46
- */
47
- ignoreSafeArea?: boolean;
48
- /**
49
- * @description Child components to render inside the blur view
50
- *
51
- * @default undefined
52
- */
53
- children?: React.ReactNode;
54
- }
55
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErE,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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,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,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;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"}
@@ -1,171 +0,0 @@
1
- import { forwardRef, useImperativeHandle, useRef } from 'react';
2
- import { View } from 'react-native';
3
- import type { ViewStyle } from 'react-native';
4
- import type { BlurViewProps, BlurType } from './types';
5
-
6
- /**
7
- * Maps blur types to background colors with opacity based on intensity
8
- * Follows iOS design guidelines from Apple's iOS 14+ Sketch Kit
9
- */
10
- function getBackgroundColor(blurAmount: number, blurType: BlurType): string {
11
- const intensity = Math.min(blurAmount, 100);
12
- const opacity = intensity / 100;
13
-
14
- switch (blurType) {
15
- // Dark blur types
16
- case 'dark':
17
- case 'extraDark':
18
- case 'systemMaterialDark':
19
- return `rgba(25, 25, 25, ${opacity * 0.78})`;
20
-
21
- case 'systemThickMaterialDark':
22
- return `rgba(37, 37, 37, ${opacity * 0.9})`;
23
-
24
- case 'systemThinMaterialDark':
25
- return `rgba(37, 37, 37, ${opacity * 0.7})`;
26
-
27
- case 'systemUltraThinMaterialDark':
28
- return `rgba(37, 37, 37, ${opacity * 0.55})`;
29
-
30
- case 'systemChromeMaterialDark':
31
- return `rgba(0, 0, 0, ${opacity * 0.75})`;
32
-
33
- // Light blur types
34
- case 'light':
35
- case 'xlight':
36
- case 'systemMaterialLight':
37
- case 'systemUltraThinMaterialLight':
38
- case 'systemThickMaterialLight':
39
- return `rgba(249, 249, 249, ${opacity * 0.78})`;
40
-
41
- case 'systemThinMaterialLight':
42
- return `rgba(199, 199, 199, ${opacity * 0.78})`;
43
-
44
- case 'systemChromeMaterialLight':
45
- return `rgba(255, 255, 255, ${opacity * 0.97})`;
46
-
47
- // Default/neutral blur types
48
- case 'regular':
49
- return `rgba(179, 179, 179, ${opacity * 0.82})`;
50
-
51
- case 'systemThinMaterial':
52
- return `rgba(199, 199, 199, ${opacity * 0.97})`;
53
-
54
- case 'systemChromeMaterial':
55
- return `rgba(255, 255, 255, ${opacity * 0.75})`;
56
-
57
- case 'systemUltraThinMaterial':
58
- case 'systemThickMaterial':
59
- return `rgba(191, 191, 191, ${opacity * 0.44})`;
60
-
61
- case 'prominent':
62
- case 'systemMaterial':
63
- default:
64
- return `rgba(255, 255, 255, ${opacity * 0.3})`;
65
- }
66
- }
67
-
68
- /**
69
- * Generates blur style object with backdrop-filter and background color
70
- */
71
- function getBlurStyle(
72
- blurAmount: number,
73
- blurType: BlurType
74
- ): Record<string, string> {
75
- const intensity = Math.min(blurAmount, 100);
76
- // Convert blur amount to CSS pixels (using same formula as Expo)
77
- const blur = `saturate(180%) blur(${intensity * 0.2}px)`;
78
-
79
- return {
80
- backgroundColor: getBackgroundColor(blurAmount, blurType),
81
- backdropFilter: blur,
82
- WebkitBackdropFilter: blur,
83
- };
84
- }
85
-
86
- /**
87
- * Web implementation of BlurView using CSS backdrop-filter
88
- *
89
- * This component provides blur effects on web platforms using CSS backdrop-filter.
90
- * It maps the native blur types to appropriate background colors and blur intensities.
91
- *
92
- * @example
93
- * ```tsx
94
- * <BlurView
95
- * blurType="light"
96
- * blurAmount={20}
97
- * style={{ flex: 1 }}
98
- * >
99
- * <Text>Content on top of blur</Text>
100
- * </BlurView>
101
- * ```
102
- */
103
- export const BlurView = forwardRef<
104
- { setNativeProps: (props: BlurViewProps) => void },
105
- BlurViewProps
106
- >(
107
- (
108
- {
109
- blurType = 'xlight',
110
- blurAmount = 10,
111
- style,
112
- overlayColor,
113
- children,
114
- ...props
115
- },
116
- ref
117
- ) => {
118
- const blurViewRef = useRef<any>(null);
119
- const blurStyle = getBlurStyle(blurAmount, blurType);
120
-
121
- useImperativeHandle(
122
- ref,
123
- () => ({
124
- setNativeProps: (nativeProps: BlurViewProps) => {
125
- if (!blurViewRef.current?.style) {
126
- return;
127
- }
128
-
129
- // Update blur amount if provided
130
- const nextBlurAmount = nativeProps.blurAmount ?? blurAmount;
131
- const nextBlurType = nativeProps.blurType ?? blurType;
132
- const nextBlurStyle = getBlurStyle(nextBlurAmount, nextBlurType);
133
-
134
- // Apply style properties
135
- if (nativeProps.style) {
136
- const styleObj = nativeProps.style as ViewStyle;
137
- for (const key in styleObj) {
138
- if (key !== 'blurAmount' && key !== 'blurType') {
139
- blurViewRef.current.style[key] =
140
- styleObj[key as keyof ViewStyle];
141
- }
142
- }
143
- }
144
-
145
- // Apply blur styles
146
- blurViewRef.current.style.backgroundColor =
147
- nextBlurStyle.backgroundColor;
148
- blurViewRef.current.style.backdropFilter =
149
- nextBlurStyle.backdropFilter;
150
- blurViewRef.current.style.webkitBackdropFilter =
151
- nextBlurStyle.WebkitBackdropFilter;
152
- },
153
- }),
154
- [blurAmount, blurType]
155
- );
156
-
157
- const overlay = overlayColor
158
- ? { backgroundColor: overlayColor }
159
- : undefined;
160
-
161
- return (
162
- <View {...props} style={[style, blurStyle, overlay]} ref={blurViewRef}>
163
- {children}
164
- </View>
165
- );
166
- }
167
- );
168
-
169
- BlurView.displayName = 'BlurView';
170
-
171
- export default BlurView;
package/src/index.web.tsx DELETED
@@ -1,17 +0,0 @@
1
- // Web-specific exports
2
- // Only exports components that have web implementations
3
-
4
- export { BlurView as default, BlurView } from './BlurView.web';
5
-
6
- // Re-export types (these don't import native code)
7
- export type { BlurType, GlassType, ProgressiveBlurDirection, BlurViewProps } from './types';
8
-
9
- // Note: The following components are not yet supported on web:
10
- // - VibrancyView (iOS-specific)
11
- // - ProgressiveBlurView (requires native gradient blur)
12
- // - LiquidGlassView (iOS 26+ specific)
13
- // - LiquidGlassContainer (iOS 26+ specific)
14
- // - BlurSwitch (Android-specific)
15
- //
16
- // Attempting to use these on web will result in import errors.
17
- // Consider using BlurView as a fallback for web platforms.
package/src/types.ts DELETED
@@ -1,89 +0,0 @@
1
- /**
2
- * Shared types for @sbaiahmed1/react-native-blur
3
- * These types are platform-agnostic and can be used on iOS, Android, and Web
4
- */
5
-
6
- import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
7
-
8
- export type BlurType =
9
- | 'xlight'
10
- | 'light'
11
- | 'dark'
12
- | 'extraDark'
13
- | 'regular'
14
- | 'prominent'
15
- | 'systemUltraThinMaterial'
16
- | 'systemThinMaterial'
17
- | 'systemMaterial'
18
- | 'systemThickMaterial'
19
- | 'systemChromeMaterial'
20
- | 'systemUltraThinMaterialLight'
21
- | 'systemThinMaterialLight'
22
- | 'systemMaterialLight'
23
- | 'systemThickMaterialLight'
24
- | 'systemChromeMaterialLight'
25
- | 'systemUltraThinMaterialDark'
26
- | 'systemThinMaterialDark'
27
- | 'systemMaterialDark'
28
- | 'systemThickMaterialDark'
29
- | 'systemChromeMaterialDark';
30
-
31
- export type GlassType = 'clear' | 'regular';
32
-
33
- export type ProgressiveBlurDirection =
34
- | 'blurredTopClearBottom'
35
- | 'blurredBottomClearTop'
36
- | 'blurredCenterClearTopAndBottom';
37
-
38
- export interface BlurViewProps {
39
- /**
40
- * @description The type of blur effect to apply
41
- *
42
- * @default 'xlight'
43
- */
44
- blurType?: BlurType;
45
-
46
- /**
47
- * @description The intensity of the blur effect (0-100)
48
- *
49
- * @default 10
50
- */
51
- blurAmount?: number;
52
-
53
- /**
54
- * @description Fallback color when reduced transparency is enabled
55
- *
56
- * Accepts hex color strings like `#FFFFFF`
57
- *
58
- * @default '#FFFFFF'
59
- */
60
- reducedTransparencyFallbackColor?: string;
61
-
62
- /**
63
- * @description The overlay color to apply on top of the blur effect
64
- *
65
- * @default undefined
66
- */
67
- overlayColor?: ColorValue;
68
-
69
- /**
70
- * @description style object for the blur view
71
- *
72
- * @default undefined
73
- */
74
- style?: StyleProp<ViewStyle>;
75
-
76
- /**
77
- * @description style object for the blur view
78
- *
79
- * @default false
80
- */
81
- ignoreSafeArea?: boolean;
82
-
83
- /**
84
- * @description Child components to render inside the blur view
85
- *
86
- * @default undefined
87
- */
88
- children?: React.ReactNode;
89
- }