react-native-blur-vibe 0.1.8 → 0.1.10
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.
- package/android/build.gradle +2 -2
- package/android/src/main/java/com/blurvibe/BlurVibeView.kt +101 -192
- package/android/src/main/java/com/blurvibe/BlurVibeViewApi31.kt +261 -241
- package/android/src/main/java/com/blurvibe/BlurVibeViewManager.kt +77 -28
- package/android/src/main/java/com/blurvibe/LegacyBlurController.kt +258 -0
- package/ios/BlurVibeView.swift +2 -0
- package/ios/BlurVibeViewFabric.mm +112 -0
- package/ios/BlurVibeViewManager.m +12 -2
- package/ios/BlurVibeViewManager.swift +9 -9
- package/lib/commonjs/BlurVibeViewNativeComponent.ts +14 -25
- package/lib/commonjs/BlurView.js +9 -30
- package/lib/commonjs/BlurView.js.map +1 -1
- package/lib/module/BlurVibeViewNativeComponent.ts +14 -25
- package/lib/module/BlurView.js +9 -30
- package/lib/module/BlurView.js.map +1 -1
- package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts +11 -9
- package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/BlurView.d.ts +6 -31
- package/lib/typescript/commonjs/src/BlurView.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/types.d.ts +26 -1
- package/lib/typescript/commonjs/src/types.d.ts.map +1 -1
- package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts +11 -9
- package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts.map +1 -1
- package/lib/typescript/module/src/BlurView.d.ts +6 -31
- package/lib/typescript/module/src/BlurView.d.ts.map +1 -1
- package/lib/typescript/module/src/types.d.ts +26 -1
- package/lib/typescript/module/src/types.d.ts.map +1 -1
- package/package.json +11 -2
- package/src/BlurVibeViewNativeComponent.ts +14 -25
- package/src/BlurView.tsx +10 -33
- package/src/types.ts +30 -1
package/lib/commonjs/BlurView.js
CHANGED
|
@@ -11,44 +11,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
11
11
|
/**
|
|
12
12
|
* BlurView — react-native-blur-vibe
|
|
13
13
|
*
|
|
14
|
-
* Cross-platform backdrop blur.
|
|
14
|
+
* Cross-platform backdrop-filter: blur() for React Native.
|
|
15
15
|
*
|
|
16
|
-
* iOS: UIVisualEffectView
|
|
17
|
-
* Android API 31+: Dual-RenderNode + RenderEffect
|
|
18
|
-
*
|
|
19
|
-
* Android API < 31: QmBlurView RenderScript — CPU, smooth at downsample=4
|
|
16
|
+
* iOS: UIVisualEffectView with true custom radius via effectSettings KVC
|
|
17
|
+
* Android API 31+: Dual-RenderNode + RenderEffect GPU pipeline
|
|
18
|
+
* Android API < 31: Direct RenderScript Gaussian (zero external dependencies)
|
|
20
19
|
*
|
|
21
|
-
*
|
|
22
|
-
* <BlurView
|
|
23
|
-
* blurAmount={30}
|
|
24
|
-
* overlayColor="#FFFFFF20"
|
|
25
|
-
* style={StyleSheet.absoluteFill}
|
|
26
|
-
* />
|
|
27
|
-
*
|
|
28
|
-
* @example Progressive blur (fades from full blur at top to transparent at bottom)
|
|
29
|
-
* <BlurView
|
|
30
|
-
* blurAmount={40}
|
|
31
|
-
* overlayColor="#00000040"
|
|
32
|
-
* progressiveBlurDirection="topToBottom"
|
|
33
|
-
* progressiveStartIntensity={1}
|
|
34
|
-
* progressiveEndIntensity={0}
|
|
35
|
-
* style={StyleSheet.absoluteFill}
|
|
36
|
-
* />
|
|
37
|
-
*
|
|
38
|
-
* @example Music card frosted glass with noise
|
|
39
|
-
* <BlurView
|
|
40
|
-
* blurAmount={60}
|
|
41
|
-
* overlayColor="#FFFFFF15"
|
|
42
|
-
* noiseFactor={0.12}
|
|
43
|
-
* borderRadius={16}
|
|
44
|
-
* style={StyleSheet.absoluteFill}
|
|
45
|
-
* />
|
|
20
|
+
* Works on both Old Architecture (Paper) and New Architecture (Fabric).
|
|
46
21
|
*/const BlurView = ({
|
|
47
22
|
blurAmount = 10,
|
|
48
23
|
blurType = 'light',
|
|
49
24
|
overlayColor,
|
|
50
25
|
reducedTransparencyFallbackColor = '#F2F2F2',
|
|
51
26
|
blurRadius = 4,
|
|
27
|
+
enabled = true,
|
|
28
|
+
autoUpdate = true,
|
|
52
29
|
progressiveBlurDirection = 'none',
|
|
53
30
|
progressiveStartIntensity = 1.0,
|
|
54
31
|
progressiveEndIntensity = 0.0,
|
|
@@ -64,6 +41,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
64
41
|
overlayColor: resolvedOverlayColor,
|
|
65
42
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
66
43
|
blurRadius: blurRadius,
|
|
44
|
+
enabled: enabled,
|
|
45
|
+
autoUpdate: autoUpdate,
|
|
67
46
|
progressiveBlurDirection: progressiveBlurDirection,
|
|
68
47
|
progressiveStartIntensity: progressiveStartIntensity,
|
|
69
48
|
progressiveEndIntensity: progressiveEndIntensity,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_BlurVibeViewNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","Platform","OS","jsx","styles","transparent","displayName","StyleSheet","create","backgroundColor","_default","exports"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,4BAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_BlurVibeViewNativeComponent","_interopRequireDefault","_jsxRuntime","e","__esModule","default","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","enabled","autoUpdate","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","Platform","OS","jsx","styles","transparent","displayName","StyleSheet","create","backgroundColor","_default","exports"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,4BAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,OAAO,GAAG,IAAI;EACdC,UAAU,GAAG,IAAI;EACjBC,wBAAwB,GAAG,MAAM;EACjCC,yBAAyB,GAAG,GAAG;EAC/BC,uBAAuB,GAAG,GAAG;EAC7BC,WAAW,GAAG,IAAI;EAClBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBZ,YAAY,KAAKa,qBAAQ,CAACC,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACE,IAAArB,WAAA,CAAAsB,GAAA,EAACxB,4BAAA,CAAAK,OAAkB;IACjBE,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEY,oBAAqB;IACnCX,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,wBAAwB,EAAEA,wBAAyB;IACnDC,yBAAyB,EAAEA,yBAA0B;IACrDC,uBAAuB,EAAEA,uBAAwB;IACjDC,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAE,CAACO,MAAM,CAACC,WAAW,EAAER,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDb,QAAQ,CAACqB,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGG,uBAAU,CAACC,MAAM,CAAC;EAC/BH,WAAW,EAAE;IAAEI,eAAe,EAAE;EAAc;AAChD,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEYC,QAAQ","ignoreList":[]}
|
|
@@ -1,34 +1,23 @@
|
|
|
1
|
-
// @ts-ignore
|
|
1
|
+
// @ts-ignore
|
|
2
2
|
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
|
|
3
3
|
import type { HostComponent, ViewProps } from 'react-native';
|
|
4
|
-
// @ts-ignore
|
|
5
|
-
import type { Float, Int32
|
|
4
|
+
// @ts-ignore
|
|
5
|
+
import type { WithDefault, Float, Int32} from 'react-native/Libraries/Types/CodegenTypes';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
blurAmount?: Float;
|
|
10
|
-
|
|
11
|
-
// iOS UIBlurEffectStyle name — no-op on Android
|
|
7
|
+
interface NativeProps extends ViewProps {
|
|
8
|
+
blurAmount?: WithDefault<Float, 10>;
|
|
12
9
|
blurType?: string;
|
|
13
|
-
|
|
14
|
-
// Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
|
|
15
10
|
overlayColor?: string;
|
|
16
|
-
|
|
17
|
-
// Fallback when blur unavailable
|
|
18
11
|
reducedTransparencyFallbackColor?: string;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
progressiveEndIntensity?: Float;
|
|
27
|
-
|
|
28
|
-
// Noise grain overlay — Android API 31+ only
|
|
29
|
-
noiseFactor?: Float;
|
|
12
|
+
blurRadius?: WithDefault<Int32, 4>;
|
|
13
|
+
enabled?: WithDefault<boolean, true>;
|
|
14
|
+
autoUpdate?: WithDefault<boolean, true>;
|
|
15
|
+
progressiveBlurDirection?: WithDefault<string, 'none'>;
|
|
16
|
+
progressiveStartIntensity?: WithDefault<Float, 1>;
|
|
17
|
+
progressiveEndIntensity?: WithDefault<Float, 0>;
|
|
18
|
+
noiseFactor?: WithDefault<Float, 0.08>;
|
|
30
19
|
}
|
|
31
20
|
|
|
32
|
-
export default codegenNativeComponent<
|
|
21
|
+
export default codegenNativeComponent<NativeProps>(
|
|
33
22
|
'BlurVibeView'
|
|
34
|
-
) as HostComponent<
|
|
23
|
+
) as HostComponent<NativeProps>;
|
package/lib/module/BlurView.js
CHANGED
|
@@ -6,38 +6,13 @@ import NativeBlurVibeView from './BlurVibeViewNativeComponent';
|
|
|
6
6
|
/**
|
|
7
7
|
* BlurView — react-native-blur-vibe
|
|
8
8
|
*
|
|
9
|
-
* Cross-platform backdrop blur.
|
|
9
|
+
* Cross-platform backdrop-filter: blur() for React Native.
|
|
10
10
|
*
|
|
11
|
-
* iOS: UIVisualEffectView
|
|
12
|
-
* Android API 31+: Dual-RenderNode + RenderEffect
|
|
13
|
-
*
|
|
14
|
-
* Android API < 31: QmBlurView RenderScript — CPU, smooth at downsample=4
|
|
11
|
+
* iOS: UIVisualEffectView with true custom radius via effectSettings KVC
|
|
12
|
+
* Android API 31+: Dual-RenderNode + RenderEffect GPU pipeline
|
|
13
|
+
* Android API < 31: Direct RenderScript Gaussian (zero external dependencies)
|
|
15
14
|
*
|
|
16
|
-
*
|
|
17
|
-
* <BlurView
|
|
18
|
-
* blurAmount={30}
|
|
19
|
-
* overlayColor="#FFFFFF20"
|
|
20
|
-
* style={StyleSheet.absoluteFill}
|
|
21
|
-
* />
|
|
22
|
-
*
|
|
23
|
-
* @example Progressive blur (fades from full blur at top to transparent at bottom)
|
|
24
|
-
* <BlurView
|
|
25
|
-
* blurAmount={40}
|
|
26
|
-
* overlayColor="#00000040"
|
|
27
|
-
* progressiveBlurDirection="topToBottom"
|
|
28
|
-
* progressiveStartIntensity={1}
|
|
29
|
-
* progressiveEndIntensity={0}
|
|
30
|
-
* style={StyleSheet.absoluteFill}
|
|
31
|
-
* />
|
|
32
|
-
*
|
|
33
|
-
* @example Music card frosted glass with noise
|
|
34
|
-
* <BlurView
|
|
35
|
-
* blurAmount={60}
|
|
36
|
-
* overlayColor="#FFFFFF15"
|
|
37
|
-
* noiseFactor={0.12}
|
|
38
|
-
* borderRadius={16}
|
|
39
|
-
* style={StyleSheet.absoluteFill}
|
|
40
|
-
* />
|
|
15
|
+
* Works on both Old Architecture (Paper) and New Architecture (Fabric).
|
|
41
16
|
*/
|
|
42
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
43
18
|
const BlurView = ({
|
|
@@ -46,6 +21,8 @@ const BlurView = ({
|
|
|
46
21
|
overlayColor,
|
|
47
22
|
reducedTransparencyFallbackColor = '#F2F2F2',
|
|
48
23
|
blurRadius = 4,
|
|
24
|
+
enabled = true,
|
|
25
|
+
autoUpdate = true,
|
|
49
26
|
progressiveBlurDirection = 'none',
|
|
50
27
|
progressiveStartIntensity = 1.0,
|
|
51
28
|
progressiveEndIntensity = 0.0,
|
|
@@ -61,6 +38,8 @@ const BlurView = ({
|
|
|
61
38
|
overlayColor: resolvedOverlayColor,
|
|
62
39
|
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
|
|
63
40
|
blurRadius: blurRadius,
|
|
41
|
+
enabled: enabled,
|
|
42
|
+
autoUpdate: autoUpdate,
|
|
64
43
|
progressiveBlurDirection: progressiveBlurDirection,
|
|
65
44
|
progressiveStartIntensity: progressiveStartIntensity,
|
|
66
45
|
progressiveEndIntensity: progressiveEndIntensity,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Platform","StyleSheet","NativeBlurVibeView","jsx","_jsx","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","OS","styles","transparent","displayName","create","backgroundColor"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,kBAAkB,MAAM,+BAA+B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"names":["Platform","StyleSheet","NativeBlurVibeView","jsx","_jsx","BlurView","blurAmount","blurType","overlayColor","reducedTransparencyFallbackColor","blurRadius","enabled","autoUpdate","progressiveBlurDirection","progressiveStartIntensity","progressiveEndIntensity","noiseFactor","style","children","rest","resolvedOverlayColor","OS","styles","transparent","displayName","create","backgroundColor"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,kBAAkB,MAAM,+BAA+B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAAAC,GAAA,IAAAC,IAAA;AAWA,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,UAAU,GAAG,EAAE;EACfC,QAAQ,GAAG,OAAO;EAClBC,YAAY;EACZC,gCAAgC,GAAG,SAAS;EAC5CC,UAAU,GAAG,CAAC;EACdC,OAAO,GAAG,IAAI;EACdC,UAAU,GAAG,IAAI;EACjBC,wBAAwB,GAAG,MAAM;EACjCC,yBAAyB,GAAG,GAAG;EAC/BC,uBAAuB,GAAG,GAAG;EAC7BC,WAAW,GAAG,IAAI;EAClBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACU,CAAC,KAAK;EACnB,MAAMC,oBAAoB,GACxBZ,YAAY,KAAKR,QAAQ,CAACqB,EAAE,KAAK,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;EAE3E,oBACEjB,IAAA,CAACF,kBAAkB;IACjBI,UAAU,EAAEA,UAAW;IACvBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEY,oBAAqB;IACnCX,gCAAgC,EAAEA,gCAAiC;IACnEC,UAAU,EAAEA,UAAW;IACvBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,wBAAwB,EAAEA,wBAAyB;IACnDC,yBAAyB,EAAEA,yBAA0B;IACrDC,uBAAuB,EAAEA,uBAAwB;IACjDC,WAAW,EAAEA,WAAY;IACzBC,KAAK,EAAE,CAACK,MAAM,CAACC,WAAW,EAAEN,KAAK,CAAE;IAAA,GAC/BE,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACS,CAAC;AAEzB,CAAC;AAEDb,QAAQ,CAACmB,WAAW,GAAG,UAAU;AAEjC,MAAMF,MAAM,GAAGrB,UAAU,CAACwB,MAAM,CAAC;EAC/BF,WAAW,EAAE;IAAEG,eAAe,EAAE;EAAc;AAChD,CAAC,CAAC;AAEF,eAAerB,QAAQ","ignoreList":[]}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import type { HostComponent, ViewProps } from 'react-native';
|
|
2
|
-
import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
-
|
|
4
|
-
blurAmount?: Float
|
|
2
|
+
import type { WithDefault, Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
+
interface NativeProps extends ViewProps {
|
|
4
|
+
blurAmount?: WithDefault<Float, 10>;
|
|
5
5
|
blurType?: string;
|
|
6
6
|
overlayColor?: string;
|
|
7
7
|
reducedTransparencyFallbackColor?: string;
|
|
8
|
-
blurRadius?: Int32
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
blurRadius?: WithDefault<Int32, 4>;
|
|
9
|
+
enabled?: WithDefault<boolean, true>;
|
|
10
|
+
autoUpdate?: WithDefault<boolean, true>;
|
|
11
|
+
progressiveBlurDirection?: WithDefault<string, 'none'>;
|
|
12
|
+
progressiveStartIntensity?: WithDefault<Float, 1>;
|
|
13
|
+
progressiveEndIntensity?: WithDefault<Float, 0>;
|
|
14
|
+
noiseFactor?: WithDefault<Float, 0.08>;
|
|
13
15
|
}
|
|
14
|
-
declare const _default: HostComponent<
|
|
16
|
+
declare const _default: HostComponent<NativeProps>;
|
|
15
17
|
export default _default;
|
|
16
18
|
//# sourceMappingURL=BlurVibeViewNativeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,2CAA2C,CAAC;AAE1F,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,wBAAwB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvD,yBAAyB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAClD,uBAAuB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;CACxC;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}
|
|
@@ -2,41 +2,16 @@ import type { BlurViewProps } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* BlurView — react-native-blur-vibe
|
|
4
4
|
*
|
|
5
|
-
* Cross-platform backdrop blur.
|
|
5
|
+
* Cross-platform backdrop-filter: blur() for React Native.
|
|
6
6
|
*
|
|
7
|
-
* iOS: UIVisualEffectView
|
|
8
|
-
* Android API 31+: Dual-RenderNode + RenderEffect
|
|
9
|
-
*
|
|
10
|
-
* Android API < 31: QmBlurView RenderScript — CPU, smooth at downsample=4
|
|
7
|
+
* iOS: UIVisualEffectView with true custom radius via effectSettings KVC
|
|
8
|
+
* Android API 31+: Dual-RenderNode + RenderEffect GPU pipeline
|
|
9
|
+
* Android API < 31: Direct RenderScript Gaussian (zero external dependencies)
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
* <BlurView
|
|
14
|
-
* blurAmount={30}
|
|
15
|
-
* overlayColor="#FFFFFF20"
|
|
16
|
-
* style={StyleSheet.absoluteFill}
|
|
17
|
-
* />
|
|
18
|
-
*
|
|
19
|
-
* @example Progressive blur (fades from full blur at top to transparent at bottom)
|
|
20
|
-
* <BlurView
|
|
21
|
-
* blurAmount={40}
|
|
22
|
-
* overlayColor="#00000040"
|
|
23
|
-
* progressiveBlurDirection="topToBottom"
|
|
24
|
-
* progressiveStartIntensity={1}
|
|
25
|
-
* progressiveEndIntensity={0}
|
|
26
|
-
* style={StyleSheet.absoluteFill}
|
|
27
|
-
* />
|
|
28
|
-
*
|
|
29
|
-
* @example Music card frosted glass with noise
|
|
30
|
-
* <BlurView
|
|
31
|
-
* blurAmount={60}
|
|
32
|
-
* overlayColor="#FFFFFF15"
|
|
33
|
-
* noiseFactor={0.12}
|
|
34
|
-
* borderRadius={16}
|
|
35
|
-
* style={StyleSheet.absoluteFill}
|
|
36
|
-
* />
|
|
11
|
+
* Works on both Old Architecture (Paper) and New Architecture (Fabric).
|
|
37
12
|
*/
|
|
38
13
|
declare const BlurView: {
|
|
39
|
-
({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, progressiveBlurDirection, progressiveStartIntensity, progressiveEndIntensity, noiseFactor, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, enabled, autoUpdate, progressiveBlurDirection, progressiveStartIntensity, progressiveEndIntensity, noiseFactor, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
|
|
40
15
|
displayName: string;
|
|
41
16
|
};
|
|
42
17
|
export default BlurView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C
|
|
1
|
+
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,QAAQ;qOAeX,aAAa;;CAuBf,CAAC;AAQF,eAAe,QAAQ,CAAC"}
|
|
@@ -58,7 +58,7 @@ export type BlurType = 'light' | 'dark' | 'extraLight' | 'regular' | 'prominent'
|
|
|
58
58
|
* | `"leftToRight"` | Left edge | Right edge |
|
|
59
59
|
* | `"rightToLeft"` | Right edge | Left edge |
|
|
60
60
|
* | `"radial"` | Center | Outer edges |
|
|
61
|
-
* | `"none"` | — uniform blur — no gradient
|
|
61
|
+
* | `"none"` | — uniform blur — no gradient |
|
|
62
62
|
*
|
|
63
63
|
* @example
|
|
64
64
|
* // Sticky header: full blur at top, invisible at bottom
|
|
@@ -254,5 +254,30 @@ export interface BlurViewProps extends ViewProps {
|
|
|
254
254
|
* @platform ios, android (API 31+)
|
|
255
255
|
*/
|
|
256
256
|
noiseFactor?: number;
|
|
257
|
+
/**
|
|
258
|
+
* Enable or disable the blur effect.
|
|
259
|
+
*
|
|
260
|
+
* When `false`, the view renders as transparent (showing
|
|
261
|
+
* `reducedTransparencyFallbackColor` if set). Useful for toggling blur
|
|
262
|
+
* based on scroll position, performance mode, or user preference.
|
|
263
|
+
*
|
|
264
|
+
* **Works on both iOS and Android.**
|
|
265
|
+
*
|
|
266
|
+
* @default true
|
|
267
|
+
*/
|
|
268
|
+
enabled?: boolean;
|
|
269
|
+
/**
|
|
270
|
+
* Automatically re-capture and re-blur when the content behind changes.
|
|
271
|
+
*
|
|
272
|
+
* When `false`, the blur is captured once at mount and never updated.
|
|
273
|
+
* Use this for completely static backgrounds (e.g. a blurred album art
|
|
274
|
+
* card where the image never changes) — eliminates all per-frame cost
|
|
275
|
+
* on Android API < 31.
|
|
276
|
+
*
|
|
277
|
+
* **Works on both iOS and Android.**
|
|
278
|
+
*
|
|
279
|
+
* @default true
|
|
280
|
+
*/
|
|
281
|
+
autoUpdate?: boolean;
|
|
257
282
|
}
|
|
258
283
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,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;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,QAAQ,GACR,MAAM,CAAC;AAMX,MAAM,WAAW,aAAc,SAAQ,SAAS;IAG9C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;OAeG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IAEpD;;;;;;;;;;;;;;;OAeG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;;;;;;;;;;;;;OAeG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,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;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,QAAQ,GACR,MAAM,CAAC;AAMX,MAAM,WAAW,aAAc,SAAQ,SAAS;IAG9C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;OAeG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IAEpD;;;;;;;;;;;;;;;OAeG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;;;;;;;;;;;;;OAeG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import type { HostComponent, ViewProps } from 'react-native';
|
|
2
|
-
import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
-
|
|
4
|
-
blurAmount?: Float
|
|
2
|
+
import type { WithDefault, Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
|
|
3
|
+
interface NativeProps extends ViewProps {
|
|
4
|
+
blurAmount?: WithDefault<Float, 10>;
|
|
5
5
|
blurType?: string;
|
|
6
6
|
overlayColor?: string;
|
|
7
7
|
reducedTransparencyFallbackColor?: string;
|
|
8
|
-
blurRadius?: Int32
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
blurRadius?: WithDefault<Int32, 4>;
|
|
9
|
+
enabled?: WithDefault<boolean, true>;
|
|
10
|
+
autoUpdate?: WithDefault<boolean, true>;
|
|
11
|
+
progressiveBlurDirection?: WithDefault<string, 'none'>;
|
|
12
|
+
progressiveStartIntensity?: WithDefault<Float, 1>;
|
|
13
|
+
progressiveEndIntensity?: WithDefault<Float, 0>;
|
|
14
|
+
noiseFactor?: WithDefault<Float, 0.08>;
|
|
13
15
|
}
|
|
14
|
-
declare const _default: HostComponent<
|
|
16
|
+
declare const _default: HostComponent<NativeProps>;
|
|
15
17
|
export default _default;
|
|
16
18
|
//# sourceMappingURL=BlurVibeViewNativeComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,2CAA2C,CAAC;AAE1F,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxC,wBAAwB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvD,yBAAyB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAClD,uBAAuB,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;CACxC;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}
|
|
@@ -2,41 +2,16 @@ import type { BlurViewProps } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* BlurView — react-native-blur-vibe
|
|
4
4
|
*
|
|
5
|
-
* Cross-platform backdrop blur.
|
|
5
|
+
* Cross-platform backdrop-filter: blur() for React Native.
|
|
6
6
|
*
|
|
7
|
-
* iOS: UIVisualEffectView
|
|
8
|
-
* Android API 31+: Dual-RenderNode + RenderEffect
|
|
9
|
-
*
|
|
10
|
-
* Android API < 31: QmBlurView RenderScript — CPU, smooth at downsample=4
|
|
7
|
+
* iOS: UIVisualEffectView with true custom radius via effectSettings KVC
|
|
8
|
+
* Android API 31+: Dual-RenderNode + RenderEffect GPU pipeline
|
|
9
|
+
* Android API < 31: Direct RenderScript Gaussian (zero external dependencies)
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
* <BlurView
|
|
14
|
-
* blurAmount={30}
|
|
15
|
-
* overlayColor="#FFFFFF20"
|
|
16
|
-
* style={StyleSheet.absoluteFill}
|
|
17
|
-
* />
|
|
18
|
-
*
|
|
19
|
-
* @example Progressive blur (fades from full blur at top to transparent at bottom)
|
|
20
|
-
* <BlurView
|
|
21
|
-
* blurAmount={40}
|
|
22
|
-
* overlayColor="#00000040"
|
|
23
|
-
* progressiveBlurDirection="topToBottom"
|
|
24
|
-
* progressiveStartIntensity={1}
|
|
25
|
-
* progressiveEndIntensity={0}
|
|
26
|
-
* style={StyleSheet.absoluteFill}
|
|
27
|
-
* />
|
|
28
|
-
*
|
|
29
|
-
* @example Music card frosted glass with noise
|
|
30
|
-
* <BlurView
|
|
31
|
-
* blurAmount={60}
|
|
32
|
-
* overlayColor="#FFFFFF15"
|
|
33
|
-
* noiseFactor={0.12}
|
|
34
|
-
* borderRadius={16}
|
|
35
|
-
* style={StyleSheet.absoluteFill}
|
|
36
|
-
* />
|
|
11
|
+
* Works on both Old Architecture (Paper) and New Architecture (Fabric).
|
|
37
12
|
*/
|
|
38
13
|
declare const BlurView: {
|
|
39
|
-
({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, progressiveBlurDirection, progressiveStartIntensity, progressiveEndIntensity, noiseFactor, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
({ blurAmount, blurType, overlayColor, reducedTransparencyFallbackColor, blurRadius, enabled, autoUpdate, progressiveBlurDirection, progressiveStartIntensity, progressiveEndIntensity, noiseFactor, style, children, ...rest }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
|
|
40
15
|
displayName: string;
|
|
41
16
|
};
|
|
42
17
|
export default BlurView;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C
|
|
1
|
+
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../../src/BlurView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,QAAQ;qOAeX,aAAa;;CAuBf,CAAC;AAQF,eAAe,QAAQ,CAAC"}
|
|
@@ -58,7 +58,7 @@ export type BlurType = 'light' | 'dark' | 'extraLight' | 'regular' | 'prominent'
|
|
|
58
58
|
* | `"leftToRight"` | Left edge | Right edge |
|
|
59
59
|
* | `"rightToLeft"` | Right edge | Left edge |
|
|
60
60
|
* | `"radial"` | Center | Outer edges |
|
|
61
|
-
* | `"none"` | — uniform blur — no gradient
|
|
61
|
+
* | `"none"` | — uniform blur — no gradient |
|
|
62
62
|
*
|
|
63
63
|
* @example
|
|
64
64
|
* // Sticky header: full blur at top, invisible at bottom
|
|
@@ -254,5 +254,30 @@ export interface BlurViewProps extends ViewProps {
|
|
|
254
254
|
* @platform ios, android (API 31+)
|
|
255
255
|
*/
|
|
256
256
|
noiseFactor?: number;
|
|
257
|
+
/**
|
|
258
|
+
* Enable or disable the blur effect.
|
|
259
|
+
*
|
|
260
|
+
* When `false`, the view renders as transparent (showing
|
|
261
|
+
* `reducedTransparencyFallbackColor` if set). Useful for toggling blur
|
|
262
|
+
* based on scroll position, performance mode, or user preference.
|
|
263
|
+
*
|
|
264
|
+
* **Works on both iOS and Android.**
|
|
265
|
+
*
|
|
266
|
+
* @default true
|
|
267
|
+
*/
|
|
268
|
+
enabled?: boolean;
|
|
269
|
+
/**
|
|
270
|
+
* Automatically re-capture and re-blur when the content behind changes.
|
|
271
|
+
*
|
|
272
|
+
* When `false`, the blur is captured once at mount and never updated.
|
|
273
|
+
* Use this for completely static backgrounds (e.g. a blurred album art
|
|
274
|
+
* card where the image never changes) — eliminates all per-frame cost
|
|
275
|
+
* on Android API < 31.
|
|
276
|
+
*
|
|
277
|
+
* **Works on both iOS and Android.**
|
|
278
|
+
*
|
|
279
|
+
* @default true
|
|
280
|
+
*/
|
|
281
|
+
autoUpdate?: boolean;
|
|
257
282
|
}
|
|
258
283
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,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;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,QAAQ,GACR,MAAM,CAAC;AAMX,MAAM,WAAW,aAAc,SAAQ,SAAS;IAG9C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;OAeG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IAEpD;;;;;;;;;;;;;;;OAeG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;;;;;;;;;;;;;OAeG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,YAAY,GACZ,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;AAM/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,aAAa,GACb,aAAa,GACb,aAAa,GACb,QAAQ,GACR,MAAM,CAAC;AAMX,MAAM,WAAW,aAAc,SAAQ,SAAS;IAG9C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;;;OAeG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAI1C;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;IAEpD;;;;;;;;;;;;;;;OAeG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;;;;;;;;;;;;;;OAeG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAIrB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-blur-vibe",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "React Native package implementing Blur View in iOS and Android",
|
|
5
5
|
"main": "./lib/commonjs/index.js",
|
|
6
6
|
"module": "./lib/module/index.js",
|
|
@@ -50,6 +50,10 @@
|
|
|
50
50
|
"react-native",
|
|
51
51
|
"blur",
|
|
52
52
|
"blurview",
|
|
53
|
+
"blurvibe",
|
|
54
|
+
"blureffect",
|
|
55
|
+
"react-native-blur-vibe",
|
|
56
|
+
"blur-vibe",
|
|
53
57
|
"glassmorphism",
|
|
54
58
|
"ios",
|
|
55
59
|
"android",
|
|
@@ -123,10 +127,15 @@
|
|
|
123
127
|
},
|
|
124
128
|
"codegenConfig": {
|
|
125
129
|
"name": "BlurVibeSpec",
|
|
126
|
-
"type": "
|
|
130
|
+
"type": "all",
|
|
127
131
|
"jsSrcsDir": "src",
|
|
128
132
|
"android": {
|
|
129
133
|
"javaPackageName": "com.blurvibe"
|
|
134
|
+
},
|
|
135
|
+
"ios": {
|
|
136
|
+
"componentProvider": {
|
|
137
|
+
"BlurVibeView": "BlurVibeViewFabric"
|
|
138
|
+
}
|
|
130
139
|
}
|
|
131
140
|
},
|
|
132
141
|
"prettier": {
|
|
@@ -1,34 +1,23 @@
|
|
|
1
|
-
// @ts-ignore
|
|
1
|
+
// @ts-ignore
|
|
2
2
|
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
|
|
3
3
|
import type { HostComponent, ViewProps } from 'react-native';
|
|
4
|
-
// @ts-ignore
|
|
5
|
-
import type { Float, Int32
|
|
4
|
+
// @ts-ignore
|
|
5
|
+
import type { WithDefault, Float, Int32} from 'react-native/Libraries/Types/CodegenTypes';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
blurAmount?: Float;
|
|
10
|
-
|
|
11
|
-
// iOS UIBlurEffectStyle name — no-op on Android
|
|
7
|
+
interface NativeProps extends ViewProps {
|
|
8
|
+
blurAmount?: WithDefault<Float, 10>;
|
|
12
9
|
blurType?: string;
|
|
13
|
-
|
|
14
|
-
// Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
|
|
15
10
|
overlayColor?: string;
|
|
16
|
-
|
|
17
|
-
// Fallback when blur unavailable
|
|
18
11
|
reducedTransparencyFallbackColor?: string;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
progressiveEndIntensity?: Float;
|
|
27
|
-
|
|
28
|
-
// Noise grain overlay — Android API 31+ only
|
|
29
|
-
noiseFactor?: Float;
|
|
12
|
+
blurRadius?: WithDefault<Int32, 4>;
|
|
13
|
+
enabled?: WithDefault<boolean, true>;
|
|
14
|
+
autoUpdate?: WithDefault<boolean, true>;
|
|
15
|
+
progressiveBlurDirection?: WithDefault<string, 'none'>;
|
|
16
|
+
progressiveStartIntensity?: WithDefault<Float, 1>;
|
|
17
|
+
progressiveEndIntensity?: WithDefault<Float, 0>;
|
|
18
|
+
noiseFactor?: WithDefault<Float, 0.08>;
|
|
30
19
|
}
|
|
31
20
|
|
|
32
|
-
export default codegenNativeComponent<
|
|
21
|
+
export default codegenNativeComponent<NativeProps>(
|
|
33
22
|
'BlurVibeView'
|
|
34
|
-
) as HostComponent<
|
|
23
|
+
) as HostComponent<NativeProps>;
|
package/src/BlurView.tsx
CHANGED
|
@@ -5,38 +5,13 @@ import NativeBlurVibeView from './BlurVibeViewNativeComponent';
|
|
|
5
5
|
/**
|
|
6
6
|
* BlurView — react-native-blur-vibe
|
|
7
7
|
*
|
|
8
|
-
* Cross-platform backdrop blur.
|
|
8
|
+
* Cross-platform backdrop-filter: blur() for React Native.
|
|
9
9
|
*
|
|
10
|
-
* iOS: UIVisualEffectView
|
|
11
|
-
* Android API 31+: Dual-RenderNode + RenderEffect
|
|
12
|
-
*
|
|
13
|
-
* Android API < 31: QmBlurView RenderScript — CPU, smooth at downsample=4
|
|
10
|
+
* iOS: UIVisualEffectView with true custom radius via effectSettings KVC
|
|
11
|
+
* Android API 31+: Dual-RenderNode + RenderEffect GPU pipeline
|
|
12
|
+
* Android API < 31: Direct RenderScript Gaussian (zero external dependencies)
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
* <BlurView
|
|
17
|
-
* blurAmount={30}
|
|
18
|
-
* overlayColor="#FFFFFF20"
|
|
19
|
-
* style={StyleSheet.absoluteFill}
|
|
20
|
-
* />
|
|
21
|
-
*
|
|
22
|
-
* @example Progressive blur (fades from full blur at top to transparent at bottom)
|
|
23
|
-
* <BlurView
|
|
24
|
-
* blurAmount={40}
|
|
25
|
-
* overlayColor="#00000040"
|
|
26
|
-
* progressiveBlurDirection="topToBottom"
|
|
27
|
-
* progressiveStartIntensity={1}
|
|
28
|
-
* progressiveEndIntensity={0}
|
|
29
|
-
* style={StyleSheet.absoluteFill}
|
|
30
|
-
* />
|
|
31
|
-
*
|
|
32
|
-
* @example Music card frosted glass with noise
|
|
33
|
-
* <BlurView
|
|
34
|
-
* blurAmount={60}
|
|
35
|
-
* overlayColor="#FFFFFF15"
|
|
36
|
-
* noiseFactor={0.12}
|
|
37
|
-
* borderRadius={16}
|
|
38
|
-
* style={StyleSheet.absoluteFill}
|
|
39
|
-
* />
|
|
14
|
+
* Works on both Old Architecture (Paper) and New Architecture (Fabric).
|
|
40
15
|
*/
|
|
41
16
|
const BlurView = ({
|
|
42
17
|
blurAmount = 10,
|
|
@@ -44,6 +19,8 @@ const BlurView = ({
|
|
|
44
19
|
overlayColor,
|
|
45
20
|
reducedTransparencyFallbackColor = '#F2F2F2',
|
|
46
21
|
blurRadius = 4,
|
|
22
|
+
enabled = true,
|
|
23
|
+
autoUpdate = true,
|
|
47
24
|
progressiveBlurDirection = 'none',
|
|
48
25
|
progressiveStartIntensity = 1.0,
|
|
49
26
|
progressiveEndIntensity = 0.0,
|
|
@@ -62,6 +39,8 @@ const BlurView = ({
|
|
|
62
39
|
overlayColor={resolvedOverlayColor}
|
|
63
40
|
reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
|
|
64
41
|
blurRadius={blurRadius}
|
|
42
|
+
enabled={enabled}
|
|
43
|
+
autoUpdate={autoUpdate}
|
|
65
44
|
progressiveBlurDirection={progressiveBlurDirection}
|
|
66
45
|
progressiveStartIntensity={progressiveStartIntensity}
|
|
67
46
|
progressiveEndIntensity={progressiveEndIntensity}
|
|
@@ -77,9 +56,7 @@ const BlurView = ({
|
|
|
77
56
|
BlurView.displayName = 'BlurView';
|
|
78
57
|
|
|
79
58
|
const styles = StyleSheet.create({
|
|
80
|
-
transparent: {
|
|
81
|
-
backgroundColor: 'transparent',
|
|
82
|
-
},
|
|
59
|
+
transparent: { backgroundColor: 'transparent' },
|
|
83
60
|
});
|
|
84
61
|
|
|
85
62
|
export default BlurView;
|