diff --git a/README.md b/README.md index 610001b..803fb38 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/example/src/App.tsx b/example/src/App.tsx index 94f592a..ad1078e 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 = () => { diff --git a/ios/BlurView.mm b/ios/BlurView.mm index 2da97c3..2255cba 100644 --- a/ios/BlurView.mm +++ b/ios/BlurView.mm @@ -131,6 +131,7 @@ using namespace facebook::react; - (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 @@ using namespace facebook::react; 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 diff --git a/src/components/BlurView.ios.tsx b/src/components/BlurView.ios.tsx index 62d05ec..d413001 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 f7a8749..daa3f83 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' diff --git a/src/fabric/VibrancyViewNativeComponent.ts b/src/fabric/VibrancyViewNativeComponent.ts index fff6f20..03282f7 100644 --- a/src/fabric/VibrancyViewNativeComponent.ts +++ b/src/fabric/VibrancyViewNativeComponent.ts @@ -10,6 +10,7 @@ interface NativeProps extends ViewProps { | 'dark' | 'light' | 'xlight' + | 'transparent' | 'prominent' | 'regular' | 'extraDark'