From aa7e1a5b4fd4f7b3a76bb027384338746c88fb61 Mon Sep 17 00:00:00 2001 From: Kirill Gudkov Date: Wed, 30 Nov 2022 22:32:31 +0300 Subject: [PATCH 1/4] New "transparent" blurType that turns every blurEffectView subview background to transparent --- ios/BlurView.mm | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ios/BlurView.mm b/ios/BlurView.mm index 2da97c37..2255cba1 100644 --- a/ios/BlurView.mm +++ b/ios/BlurView.mm @@ -131,6 +131,7 @@ - (void)setReducedTransparencyFallbackColor:(nullable UIColor *)reducedTranspare - (UIBlurEffectStyle)blurEffectStyle { + if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleDark; if ([self.blurType isEqual: @"xlight"]) return UIBlurEffectStyleExtraLight; if ([self.blurType isEqual: @"light"]) return UIBlurEffectStyleLight; if ([self.blurType isEqual: @"dark"]) return UIBlurEffectStyleDark; @@ -183,6 +184,12 @@ - (void)updateBlurEffect UIBlurEffectStyle style = [self blurEffectStyle]; self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount]; self.blurEffectView.effect = self.blurEffect; + + if ([self.blurType isEqual: @"transparent"]) { + for (UIView *subview in self.blurEffectView.subviews) { + subview.backgroundColor = [UIColor clearColor]; + } + } } - (void)updateFallbackView From 6a0a9a98bcf198f592079eca5e994ce9779bb305 Mon Sep 17 00:00:00 2001 From: Kirill Gudkov Date: Wed, 30 Nov 2022 22:39:39 +0300 Subject: [PATCH 2/4] Add "transparent" blur type to README.md, BlurView.ios.tsx and BlurViewNativeComponent.ts --- README.md | 1 + src/components/BlurView.ios.tsx | 1 + src/fabric/BlurViewNativeComponent.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/README.md b/README.md index 610001bd..803fb389 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ cd ios && pod install | `extraDark` | extra dark blur type (tvOS only) | `regular` | regular blur type (iOS 10+ and tvOS only) | `prominent` | prominent blur type (iOS 10+ and tvOS only) +| `transparent` | transparent blur type (iOS 10+ and tvOS only) #### blurType (iOS 13 only) diff --git a/src/components/BlurView.ios.tsx b/src/components/BlurView.ios.tsx index 62d05ec4..d4130015 100644 --- a/src/components/BlurView.ios.tsx +++ b/src/components/BlurView.ios.tsx @@ -6,6 +6,7 @@ type BlurType = | 'dark' | 'light' | 'xlight' + | 'transparent' | 'prominent' | 'regular' | 'extraDark' diff --git a/src/fabric/BlurViewNativeComponent.ts b/src/fabric/BlurViewNativeComponent.ts index f7a8749c..daa3f836 100644 --- a/src/fabric/BlurViewNativeComponent.ts +++ b/src/fabric/BlurViewNativeComponent.ts @@ -10,6 +10,7 @@ interface NativeProps extends ViewProps { | 'dark' | 'light' | 'xlight' + | 'transparent' | 'prominent' | 'regular' | 'extraDark' From 1a7ffd8dd0d32c056e65a0399fac8350dc6ab12e Mon Sep 17 00:00:00 2001 From: Kirill Gudkov Date: Wed, 30 Nov 2022 22:45:50 +0300 Subject: [PATCH 3/4] Fix blurType in VibrancyViewNativeComponent.ts --- src/fabric/VibrancyViewNativeComponent.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/fabric/VibrancyViewNativeComponent.ts b/src/fabric/VibrancyViewNativeComponent.ts index fff6f20b..82370dcf 100644 --- a/src/fabric/VibrancyViewNativeComponent.ts +++ b/src/fabric/VibrancyViewNativeComponent.ts @@ -11,6 +11,7 @@ interface NativeProps extends ViewProps { | 'light' | 'xlight' | 'prominent' + | 'transparent' | 'regular' | 'extraDark' | 'chromeMaterial' From d133b15d2de6e300ddfd39534f66af6dca67478f Mon Sep 17 00:00:00 2001 From: Kirill Gudkov Date: Thu, 1 Dec 2022 01:11:26 +0300 Subject: [PATCH 4/4] feat(iOS): transparent blur type Add transparent blur type to example --- example/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 94f592ab..ad1078ea 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -23,7 +23,7 @@ import { const blurTypeValues = Platform.OS === 'ios' - ? ['xlight', 'light', 'dark', 'regular', 'prominent'] + ? ['xlight', 'light', 'dark', 'regular', 'prominent', 'transparent'] : ['xlight', 'light', 'dark']; const Blurs = () => {