@sbaiahmed1/react-native-blur 4.6.1-beta.1 → 4.6.1-beta.3
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/ios/Views/AdvancedBlurView.swift +42 -67
- package/ios/Views/BlurEffectView.swift +27 -41
- package/lib/module/BlurView.js +0 -6
- package/lib/module/BlurView.js.map +1 -1
- package/lib/typescript/src/BlurView.d.ts +1 -1
- package/lib/typescript/src/BlurView.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/BlurView.tsx +1 -5
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import SwiftUI
|
|
2
1
|
import UIKit
|
|
3
2
|
|
|
4
|
-
// MARK: - UIKit Wrapper for Blur
|
|
5
|
-
|
|
6
3
|
@objc public class AdvancedBlurView: UIView {
|
|
7
|
-
|
|
8
|
-
private
|
|
4
|
+
private let blurEffectView = BlurEffectView(effect: nil)
|
|
5
|
+
private let fallbackView = UIView()
|
|
9
6
|
|
|
10
7
|
@objc public var blurAmount: Double = 10.0 {
|
|
11
8
|
didSet {
|
|
@@ -29,79 +26,63 @@ import UIKit
|
|
|
29
26
|
didSet {
|
|
30
27
|
updateView()
|
|
31
28
|
}
|
|
32
|
-
|
|
29
|
+
}
|
|
33
30
|
|
|
34
31
|
public override init(frame: CGRect) {
|
|
35
32
|
super.init(frame: frame)
|
|
33
|
+
setupViews()
|
|
36
34
|
}
|
|
37
35
|
|
|
38
36
|
required init?(coder: NSCoder) {
|
|
39
37
|
super.init(coder: coder)
|
|
38
|
+
setupViews()
|
|
40
39
|
}
|
|
41
40
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
private func setupViews() {
|
|
42
|
+
blurEffectView.isUserInteractionEnabled = false
|
|
43
|
+
fallbackView.isUserInteractionEnabled = false
|
|
44
|
+
addSubview(fallbackView)
|
|
45
|
+
addSubview(blurEffectView)
|
|
46
|
+
syncBackgroundLayersToBack()
|
|
47
|
+
updateView()
|
|
49
48
|
}
|
|
50
49
|
|
|
51
|
-
private func
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
private func syncBackgroundLayersToBack() {
|
|
51
|
+
if fallbackView.superview === self {
|
|
52
|
+
sendSubviewToBack(fallbackView)
|
|
53
|
+
}
|
|
54
|
+
if blurEffectView.superview === self {
|
|
55
|
+
sendSubviewToBack(blurEffectView)
|
|
56
56
|
}
|
|
57
|
-
|
|
57
|
+
}
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
ignoreSafeArea: ignoreSafeArea,
|
|
64
|
-
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
|
|
65
|
-
)
|
|
66
|
-
|
|
67
|
-
let hosting = UIHostingController(rootView: swiftUIView)
|
|
68
|
-
hosting.view.backgroundColor = .clear
|
|
69
|
-
hosting.view.translatesAutoresizingMaskIntoConstraints = false
|
|
70
|
-
|
|
71
|
-
// Insert at index 0 to ensure it stays behind any potential subviews (though usually this view has no children)
|
|
72
|
-
// This fixes the z-ordering bug where blur covers content
|
|
73
|
-
if !subviews.isEmpty {
|
|
74
|
-
insertSubview(hosting.view, at: 0)
|
|
75
|
-
} else {
|
|
76
|
-
addSubview(hosting.view)
|
|
59
|
+
public override func didAddSubview(_ subview: UIView) {
|
|
60
|
+
super.didAddSubview(subview)
|
|
61
|
+
if subview !== blurEffectView && subview !== fallbackView {
|
|
62
|
+
syncBackgroundLayersToBack()
|
|
77
63
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
])
|
|
85
|
-
|
|
86
|
-
self.hostingController = hosting
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
public override func layoutSubviews() {
|
|
67
|
+
super.layoutSubviews()
|
|
68
|
+
fallbackView.frame = bounds
|
|
69
|
+
blurEffectView.frame = bounds
|
|
87
70
|
}
|
|
88
71
|
|
|
89
72
|
private func updateView() {
|
|
90
|
-
if
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
blurAmount: blurAmount,
|
|
96
|
-
blurStyle: blurStyle,
|
|
97
|
-
ignoreSafeArea: ignoreSafeArea,
|
|
98
|
-
reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
|
|
99
|
-
)
|
|
100
|
-
hosting.rootView = swiftUIView
|
|
101
|
-
hosting.view.setNeedsLayout()
|
|
102
|
-
} else {
|
|
103
|
-
setupHostingController()
|
|
73
|
+
if UIAccessibility.isReduceTransparencyEnabled {
|
|
74
|
+
fallbackView.isHidden = false
|
|
75
|
+
blurEffectView.isHidden = true
|
|
76
|
+
fallbackView.backgroundColor = reducedTransparencyFallbackColor
|
|
77
|
+
return
|
|
104
78
|
}
|
|
79
|
+
|
|
80
|
+
fallbackView.isHidden = true
|
|
81
|
+
blurEffectView.isHidden = false
|
|
82
|
+
let blurStyle = blurStyleFromString(blurTypeString)
|
|
83
|
+
let intensity = mapBlurAmountToIntensity(blurAmount)
|
|
84
|
+
blurEffectView.updateBlur(style: blurStyle, intensity: intensity)
|
|
85
|
+
blurEffectView.setNeedsDisplay()
|
|
105
86
|
}
|
|
106
87
|
|
|
107
88
|
public override func didMoveToSuperview() {
|
|
@@ -115,11 +96,5 @@ import UIKit
|
|
|
115
96
|
}
|
|
116
97
|
}
|
|
117
98
|
|
|
118
|
-
deinit {
|
|
119
|
-
if let hosting = hostingController {
|
|
120
|
-
hosting.view.removeFromSuperview()
|
|
121
|
-
hosting.removeFromParent()
|
|
122
|
-
}
|
|
123
|
-
hostingController = nil
|
|
124
|
-
}
|
|
99
|
+
deinit {}
|
|
125
100
|
}
|
|
@@ -7,63 +7,49 @@ import UIKit
|
|
|
7
7
|
|
|
8
8
|
class BlurEffectView: UIVisualEffectView {
|
|
9
9
|
private var animator: UIViewPropertyAnimator?
|
|
10
|
-
private var blurStyle: UIBlurEffect.Style = .systemMaterial
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
private var blurStyle: UIBlurEffect.Style = .systemMaterial {
|
|
11
|
+
didSet {
|
|
12
|
+
visualEffect = UIBlurEffect(style: blurStyle)
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
private var intensity: Double = 0.1 {
|
|
16
|
+
didSet {
|
|
17
|
+
setNeedsDisplay()
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
private var visualEffect: UIVisualEffect = UIBlurEffect(style: .systemMaterial) {
|
|
21
|
+
didSet {
|
|
22
|
+
setNeedsDisplay()
|
|
23
|
+
}
|
|
24
|
+
}
|
|
13
25
|
|
|
14
26
|
override init(effect: UIVisualEffect?) {
|
|
15
|
-
super.init(effect:
|
|
27
|
+
super.init(effect: nil)
|
|
16
28
|
}
|
|
17
29
|
|
|
18
30
|
required init?(coder: NSCoder) {
|
|
19
|
-
|
|
31
|
+
return nil
|
|
20
32
|
}
|
|
21
33
|
|
|
22
34
|
func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
|
|
23
|
-
|
|
24
|
-
self.intensity = intensity
|
|
25
|
-
|
|
26
|
-
setupBlur()
|
|
35
|
+
blurStyle = style
|
|
36
|
+
self.intensity = max(0.0, min(1.0, intensity))
|
|
37
|
+
setNeedsDisplay()
|
|
27
38
|
}
|
|
28
39
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
if let animator = animator {
|
|
32
|
-
animator.stopAnimation(true)
|
|
33
|
-
animator.finishAnimation(at: .current)
|
|
34
|
-
}
|
|
35
|
-
animator = nil
|
|
36
|
-
|
|
37
|
-
// Reset effect
|
|
40
|
+
override func draw(_ rect: CGRect) {
|
|
41
|
+
super.draw(rect)
|
|
38
42
|
effect = nil
|
|
39
|
-
|
|
40
|
-
// Create new animator
|
|
43
|
+
animator?.stopAnimation(true)
|
|
41
44
|
animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
|
|
42
|
-
animator?.addAnimations { [
|
|
43
|
-
self
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// Set intensity
|
|
47
|
-
animator?.fractionComplete = intensity
|
|
48
|
-
// Stop the animation at the current state
|
|
49
|
-
DispatchQueue.main.async { [weak self, weak animator] in
|
|
50
|
-
guard let self = self, let currentAnimator = self.animator, currentAnimator === animator else { return }
|
|
51
|
-
currentAnimator.stopAnimation(true)
|
|
52
|
-
currentAnimator.finishAnimation(at: .current)
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
override func didMoveToWindow() {
|
|
57
|
-
super.didMoveToWindow()
|
|
58
|
-
if window != nil && hasConfiguredBlur {
|
|
59
|
-
setupBlur()
|
|
45
|
+
animator?.addAnimations { [unowned self] in
|
|
46
|
+
self.effect = visualEffect
|
|
60
47
|
}
|
|
48
|
+
animator?.fractionComplete = CGFloat(intensity)
|
|
61
49
|
}
|
|
62
50
|
|
|
63
51
|
deinit {
|
|
64
|
-
|
|
65
|
-
animator.stopAnimation(true)
|
|
66
|
-
animator.finishAnimation(at: .current)
|
|
52
|
+
animator?.stopAnimation(true)
|
|
67
53
|
}
|
|
68
54
|
}
|
|
69
55
|
|
package/lib/module/BlurView.js
CHANGED
|
@@ -45,8 +45,6 @@ export const BlurView = ({
|
|
|
45
45
|
ignoreSafeArea,
|
|
46
46
|
reducedTransparencyFallbackColor
|
|
47
47
|
};
|
|
48
|
-
|
|
49
|
-
// If no children, render the blur view directly (for background use)
|
|
50
48
|
if (!Children.count(children)) {
|
|
51
49
|
return /*#__PURE__*/_jsx(ReactNativeBlurView, {
|
|
52
50
|
style: [style, overlay],
|
|
@@ -54,8 +52,6 @@ export const BlurView = ({
|
|
|
54
52
|
...props
|
|
55
53
|
});
|
|
56
54
|
}
|
|
57
|
-
|
|
58
|
-
// If children exist, use the style default for Android
|
|
59
55
|
if (Platform.OS === 'android') {
|
|
60
56
|
return /*#__PURE__*/_jsxs(ReactNativeBlurView, {
|
|
61
57
|
style: style,
|
|
@@ -66,8 +62,6 @@ export const BlurView = ({
|
|
|
66
62
|
}), children]
|
|
67
63
|
});
|
|
68
64
|
}
|
|
69
|
-
|
|
70
|
-
// If children exist, use the absolute positioning pattern for iOS and others
|
|
71
65
|
return /*#__PURE__*/_jsxs(View, {
|
|
72
66
|
style: [styles.container, style, overlay],
|
|
73
67
|
children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
|
|
@@ -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"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;
|
|
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"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACzD,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,IAAI;EACrB,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,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,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,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAC9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,EACDF,QAAQ;EAAA,CACL,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;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
import { type BlurType } from './ReactNativeBlurViewNativeComponent';
|
|
4
4
|
export interface BlurViewProps {
|
|
5
5
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,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,CAgD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
package/src/BlurView.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { Children } from 'react';
|
|
2
|
+
import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
|
|
2
3
|
import { Platform, StyleSheet, View } from 'react-native';
|
|
3
|
-
import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
|
|
4
4
|
import ReactNativeBlurView, {
|
|
5
5
|
type BlurType,
|
|
6
6
|
} from './ReactNativeBlurViewNativeComponent';
|
|
@@ -98,7 +98,6 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
98
98
|
reducedTransparencyFallbackColor,
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
// If no children, render the blur view directly (for background use)
|
|
102
101
|
if (!Children.count(children)) {
|
|
103
102
|
return (
|
|
104
103
|
<ReactNativeBlurView
|
|
@@ -109,7 +108,6 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
109
108
|
);
|
|
110
109
|
}
|
|
111
110
|
|
|
112
|
-
// If children exist, use the style default for Android
|
|
113
111
|
if (Platform.OS === 'android') {
|
|
114
112
|
return (
|
|
115
113
|
<ReactNativeBlurView style={style} {...commonProps} {...props}>
|
|
@@ -120,10 +118,8 @@ export const BlurView: React.FC<BlurViewProps> = ({
|
|
|
120
118
|
);
|
|
121
119
|
}
|
|
122
120
|
|
|
123
|
-
// If children exist, use the absolute positioning pattern for iOS and others
|
|
124
121
|
return (
|
|
125
122
|
<View style={[styles.container, style, overlay]}>
|
|
126
|
-
{/* Blur effect positioned absolutely behind content */}
|
|
127
123
|
<ReactNativeBlurView
|
|
128
124
|
style={StyleSheet.absoluteFill}
|
|
129
125
|
{...commonProps}
|