@sbaiahmed1/react-native-blur 3.0.0-beta.1 → 3.1.0
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/README.md +209 -107
- package/ReactNativeBlur.podspec +1 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java +18 -3
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java +6 -1
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerDelegate.java +53 -0
- package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassEffectContainerManagerInterface.java +25 -0
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp +17 -7
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h +55 -15
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp +1 -1
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h +7 -7
- package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h +3 -3
- package/ios/Helpers/BlurStyleHelpers.swift +59 -0
- package/ios/Helpers/ReactNativeBlurViewHelper.swift +59 -0
- package/ios/ReactNativeBlurView.mm +6 -1
- package/ios/ReactNativeBlurViewManager.m +6 -0
- package/ios/Views/AdvancedBlurView.swift +94 -0
- package/ios/Views/BasicColoredView.swift +58 -0
- package/ios/Views/BlurEffectView.swift +70 -0
- package/package.json +1 -1
- package/ios/ReactNativeBlurView.swift +0 -321
|
@@ -1,321 +0,0 @@
|
|
|
1
|
-
// ReactNativeBlurView.swift
|
|
2
|
-
|
|
3
|
-
import SwiftUI
|
|
4
|
-
import UIKit
|
|
5
|
-
|
|
6
|
-
// MARK: Blur View with proper intensity control
|
|
7
|
-
|
|
8
|
-
class BlurEffectView: UIVisualEffectView {
|
|
9
|
-
private var animator: UIViewPropertyAnimator?
|
|
10
|
-
private var blurStyle: UIBlurEffect.Style = .systemMaterial
|
|
11
|
-
private var intensity: Double = 1.0
|
|
12
|
-
|
|
13
|
-
override init(effect: UIVisualEffect?) {
|
|
14
|
-
super.init(effect: effect)
|
|
15
|
-
setupBlur()
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
required init?(coder: NSCoder) {
|
|
19
|
-
super.init(coder: coder)
|
|
20
|
-
setupBlur()
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
|
|
24
|
-
self.blurStyle = style
|
|
25
|
-
self.intensity = intensity
|
|
26
|
-
setupBlur()
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
private func setupBlur() {
|
|
30
|
-
// Clean up existing animator
|
|
31
|
-
animator?.stopAnimation(true)
|
|
32
|
-
animator?.finishAnimation(at: .current)
|
|
33
|
-
animator = nil
|
|
34
|
-
|
|
35
|
-
// Reset effect
|
|
36
|
-
effect = nil
|
|
37
|
-
|
|
38
|
-
// Create new animator
|
|
39
|
-
animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
|
|
40
|
-
animator?.addAnimations { [weak self] in
|
|
41
|
-
self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// Set intensity and pause
|
|
45
|
-
animator?.fractionComplete = intensity
|
|
46
|
-
animator?.pauseAnimation()
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
deinit {
|
|
50
|
-
animator?.stopAnimation(true)
|
|
51
|
-
animator?.finishAnimation(at: .current)
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
struct Blur: UIViewRepresentable {
|
|
56
|
-
var style: UIBlurEffect.Style = .systemMaterial
|
|
57
|
-
var intensity: Double = 1.0
|
|
58
|
-
|
|
59
|
-
func makeUIView(context: Context) -> BlurEffectView {
|
|
60
|
-
let effectView = BlurEffectView(effect: nil)
|
|
61
|
-
effectView.updateBlur(style: style, intensity: intensity)
|
|
62
|
-
return effectView
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
func updateUIView(_ uiView: BlurEffectView, context: Context) {
|
|
66
|
-
uiView.updateBlur(style: style, intensity: intensity)
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// MARK: - Helper Functions
|
|
71
|
-
|
|
72
|
-
private func blurStyleFromString(_ styleString: String) -> UIBlurEffect.Style {
|
|
73
|
-
switch styleString {
|
|
74
|
-
case "xlight":
|
|
75
|
-
return .extraLight
|
|
76
|
-
case "light":
|
|
77
|
-
return .light
|
|
78
|
-
case "dark":
|
|
79
|
-
return .dark
|
|
80
|
-
case "extraDark":
|
|
81
|
-
return .systemThickMaterialDark
|
|
82
|
-
case "regular":
|
|
83
|
-
return .regular
|
|
84
|
-
case "prominent":
|
|
85
|
-
return .prominent
|
|
86
|
-
case "systemUltraThinMaterial":
|
|
87
|
-
return .systemUltraThinMaterial
|
|
88
|
-
case "systemThinMaterial":
|
|
89
|
-
return .systemThinMaterial
|
|
90
|
-
case "systemMaterial":
|
|
91
|
-
return .systemMaterial
|
|
92
|
-
case "systemThickMaterial":
|
|
93
|
-
return .systemThickMaterial
|
|
94
|
-
case "systemChromeMaterial":
|
|
95
|
-
return .systemChromeMaterial
|
|
96
|
-
default:
|
|
97
|
-
return .extraLight
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@available(iOS 26.0, *)
|
|
102
|
-
private func glassEffectFromString(_ glassTypeString: String) -> Glass {
|
|
103
|
-
switch glassTypeString {
|
|
104
|
-
case "regular":
|
|
105
|
-
return .regular
|
|
106
|
-
case "clear":
|
|
107
|
-
return .clear
|
|
108
|
-
default:
|
|
109
|
-
return .clear
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// MARK: - Helper Functions for Blur Amount Mapping
|
|
114
|
-
|
|
115
|
-
/// Maps blur amount (0-100) to proper blur intensity using UIViewPropertyAnimator approach
|
|
116
|
-
private func mapBlurAmountToIntensity(_ amount: Double) -> Double {
|
|
117
|
-
let clampedAmount = max(0.0, min(100.0, amount))
|
|
118
|
-
|
|
119
|
-
// Map 0-100 to 0-1.0 intensity for smooth progression
|
|
120
|
-
return clampedAmount / 100.0
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// MARK: - Simple SwiftUI View
|
|
124
|
-
|
|
125
|
-
private struct BasicColoredView: View {
|
|
126
|
-
var glassTintColor: UIColor
|
|
127
|
-
var glassOpacity: Double
|
|
128
|
-
var blurAmount: Double
|
|
129
|
-
var blurStyle: UIBlurEffect.Style
|
|
130
|
-
var type: String
|
|
131
|
-
var glassType: String
|
|
132
|
-
var reducedTransparencyFallbackColor: UIColor
|
|
133
|
-
var isInteractive: Bool
|
|
134
|
-
|
|
135
|
-
var body: some View {
|
|
136
|
-
let blurIntensity = mapBlurAmountToIntensity(blurAmount)
|
|
137
|
-
|
|
138
|
-
// Check if reduced transparency is enabled
|
|
139
|
-
let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
|
|
140
|
-
|
|
141
|
-
if isReducedTransparencyEnabled {
|
|
142
|
-
// Use fallback color when reduced transparency is enabled
|
|
143
|
-
Rectangle()
|
|
144
|
-
.fill(Color(reducedTransparencyFallbackColor))
|
|
145
|
-
} else {
|
|
146
|
-
if (type == "liquidGlass"){
|
|
147
|
-
if #available(iOS 26.0, *) {
|
|
148
|
-
let baseGlassEffect = glassEffectFromString(glassType)
|
|
149
|
-
Rectangle()
|
|
150
|
-
.glassEffect(
|
|
151
|
-
baseGlassEffect
|
|
152
|
-
.tint(Color(glassTintColor)
|
|
153
|
-
.opacity(glassOpacity))
|
|
154
|
-
.interactive(isInteractive)
|
|
155
|
-
, in: .rect)
|
|
156
|
-
|
|
157
|
-
} else {
|
|
158
|
-
// Use proper blur intensity control for liquid glass fallback
|
|
159
|
-
Rectangle()
|
|
160
|
-
.fill(Color(.clear))
|
|
161
|
-
.background(Blur(style: blurStyle, intensity: blurIntensity))
|
|
162
|
-
.overlay(
|
|
163
|
-
Color(glassTintColor)
|
|
164
|
-
.opacity(glassOpacity)
|
|
165
|
-
)
|
|
166
|
-
}
|
|
167
|
-
}else {
|
|
168
|
-
// Use proper blur intensity control for regular blur
|
|
169
|
-
Rectangle()
|
|
170
|
-
.fill(Color(.clear))
|
|
171
|
-
.background(Blur(style: blurStyle, intensity: blurIntensity))
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// MARK: - UIKit Wrapper
|
|
178
|
-
|
|
179
|
-
@objc public class AdvancedBlurView: UIView {
|
|
180
|
-
|
|
181
|
-
private var hostingController: UIHostingController<BasicColoredView>?
|
|
182
|
-
|
|
183
|
-
@objc public var glassTintColor: UIColor = .clear {
|
|
184
|
-
didSet {
|
|
185
|
-
updateView()
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
@objc public var glassOpacity: Double = 1.0 {
|
|
190
|
-
didSet {
|
|
191
|
-
updateView()
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
@objc public var blurAmount: Double = 10.0 {
|
|
196
|
-
didSet {
|
|
197
|
-
updateView()
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
@objc public var type: String = "blur" {
|
|
202
|
-
didSet {
|
|
203
|
-
updateView()
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
@objc public var blurTypeString: String = "xlight" {
|
|
208
|
-
didSet {
|
|
209
|
-
updateView()
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
@objc public var glassType: String = "clear" {
|
|
214
|
-
didSet {
|
|
215
|
-
updateView()
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
@objc public var reducedTransparencyFallbackColor: UIColor = .white {
|
|
220
|
-
didSet {
|
|
221
|
-
updateView()
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
@objc public var isInteractive: Bool = true {
|
|
226
|
-
didSet {
|
|
227
|
-
updateView()
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
public override init(frame: CGRect) {
|
|
232
|
-
super.init(frame: frame)
|
|
233
|
-
setupHostingController()
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
required init?(coder: NSCoder) {
|
|
237
|
-
super.init(coder: coder)
|
|
238
|
-
setupHostingController()
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
private func setupHostingController() {
|
|
242
|
-
let blurStyle = blurStyleFromString(blurTypeString)
|
|
243
|
-
let swiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type: type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
|
|
244
|
-
let hosting = UIHostingController(rootView: swiftUIView)
|
|
245
|
-
|
|
246
|
-
hosting.view.backgroundColor = .clear
|
|
247
|
-
hosting.view.translatesAutoresizingMaskIntoConstraints = false
|
|
248
|
-
|
|
249
|
-
addSubview(hosting.view)
|
|
250
|
-
NSLayoutConstraint.activate([
|
|
251
|
-
hosting.view.topAnchor.constraint(equalTo: topAnchor),
|
|
252
|
-
hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
|
|
253
|
-
hosting.view.trailingAnchor.constraint(equalTo: trailingAnchor),
|
|
254
|
-
hosting.view.bottomAnchor.constraint(equalTo: bottomAnchor)
|
|
255
|
-
])
|
|
256
|
-
|
|
257
|
-
self.hostingController = hosting
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
private func updateView() {
|
|
261
|
-
let blurStyle = blurStyleFromString(blurTypeString)
|
|
262
|
-
let newSwiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type:type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
|
|
263
|
-
hostingController?.rootView = newSwiftUIView
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
// MARK: - Objective-C Bridging Helpers
|
|
268
|
-
|
|
269
|
-
@objc public class ReactNativeBlurViewHelper: NSObject {
|
|
270
|
-
|
|
271
|
-
/// Creates and returns a view containing a colored rectangle.
|
|
272
|
-
@objc public static func createBlurViewWithFrame(_ frame: CGRect) -> AdvancedBlurView {
|
|
273
|
-
return AdvancedBlurView(frame: frame)
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
/// Updates the blur view with a new glass tint color.
|
|
277
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassTintColor glassTintColor: UIColor) {
|
|
278
|
-
blurView.glassTintColor = glassTintColor
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
/// Updates the blur view with a new glass opacity.
|
|
282
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassOpacity glassOpacity: Double) {
|
|
283
|
-
blurView.glassOpacity = glassOpacity
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
/// Updates the blur view with a new blur amount.
|
|
287
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurAmount blurAmount: Double) {
|
|
288
|
-
blurView.blurAmount = blurAmount
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
/// Updates the blur view with a new blur type.
|
|
292
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurType blurType: String) {
|
|
293
|
-
blurView.blurTypeString = blurType
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
/// Updates the blur view with a new glass type.
|
|
297
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassType glassType: String) {
|
|
298
|
-
blurView.glassType = glassType
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
/// Updates the blur view with a new blur style.
|
|
302
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withType type: String) {
|
|
303
|
-
blurView.type = type
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
/// Updates the blur view with a new blur style.
|
|
307
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIsInteractive isInteractive: Bool) {
|
|
308
|
-
blurView.isInteractive = isInteractive
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
/// Updates the blur view with a new reduced transparency fallback color.
|
|
312
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor fallbackColor: UIColor) {
|
|
313
|
-
blurView.reducedTransparencyFallbackColor = fallbackColor
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
/// No-op updater kept for API compatibility.
|
|
317
|
-
@objc public static func updateBlurView(_ blurView: AdvancedBlurView) {
|
|
318
|
-
// Nothing to update in the minimal implementation
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
|