feat(iOS): transparent blur type

[kirgudkov]

Hi there :wave: hope you're doing well

I've been looking for a way to implement Twitter-like navbar:

and it seems like it's not possible with current blur types.

So here's what I came up with: transparent blur type applies UIBlurEffectStyleDark (it doesn't matter dark or light) style and overrites backgroundColor property for each subview to transparent color. Works the same regardless of the selected system color scheme

blurType={'dark'}	blurType={'transparent'}

Probably it solves #474 and #465

Tested both BlurView and VibrancyView on iOS simulator including example project. Update README.md and example

[suzil]

Maybe also closes https://github.com/Kureev/react-native-blur/issues/407

[OskarEichler]

This is great and exactly what we are looking for as well, as the dark type is darkening too much! Would be great if this can get merged! 🤘🏼

[sapkra]

@Titozzz Sorry for pinging you, but do you have some spare time to review this PR? It's something we and other really need.

[Parveshdhull]

Hi @KirillGudkov, really awesome work :tada: :partying_face: This is working great with most background colors, and the overlay is fully transparent when nothing is below it. But for a few colors, it kind of creates a visible overlay as shown in the image.

Fully Transparent - Black, Red Creates Overlay - Green, #09101C (Used in above image, creates bluish overlay)

The last color is important for my use, please can you take a look if you can reproduce this too. Thank you in advance.

[joisadler]

This solution is exactly what I'm looking for! I have also tested it locally on the project that I'm working on and it works perfectly there. @Kureev please, we need this PR to be accepted ASAP!

[kirgudkov]

@Parveshdhull Hey! Thanks a lot for the kind words! I totally can reproduce it. I tried to fix it but it doesn't seem to do anything about it. It doesn't look like a "hidden" overlay or smth. As far as I can see - the BlurEffectView makes all colors a bit more saturated, except for achromatic colors: whites, blacks and grays (because it's impoissible lol)

For example below purple and orange appears more vibrant. And as you can see - there is some glow effect with gradient from more saturated to less. "Right purple" somewhere in the middle 😅 So that's how it works, I guess there's nothing I can do.

1	2

[filippobarcellos]

@Parveshdhull I've got the same problem as yours. Did you manage to fix it?

[sapkra]

There might be a new approach for adding blur using react-native-skia which is actively maintained by Shopify. But I have not tried it yet. It's worth a try and it might not have these bugs.

https://shopify.github.io/react-native-skia/docs/backdrops-filters

[Parveshdhull]

@Parveshdhull I've got the same problem as yours. Did you manage to fix it?

No, still no luck. I skipped this for now and created an issue to track it. https://github.com/status-im/status-mobile/issues/14903

[Parveshdhull]

There might be a new approach for adding blur using react-native-skia which is actively maintained by Shopify. But I have not tried it yet. It's worth a try and it might not have these bugs.

https://shopify.github.io/react-native-skia/docs/backdrops-filters

This looks promising, Thank you

[sapkra]

https://github.com/Shopify/react-native-skia/issues/324#issuecomment-1081010894

It doesn't seem to be possible right now but it might be worth to get in contact with the maintainers. It's probaly something the community can contribute.

[chen-rn]

@Parveshdhull @KirillGudkov So it seems like the main issue with this patch is that BlurEffectView makes all colors more saturated (by something like 180%, unclear why)

Is there something that allows us to "de-saturate" a particular view?

[pottercomuneo]

So when will this be merged? 😬 or do I have to switch to another library?

[stephenkopylov]

Merge when?

[ugar0ff]

Working fine please merge

I noticed that it works well on some colors, but on some, it still doesn't work.

[TheRealNate]

Even if it's not working with some colors, could be merged with "transparent" as a beta option?

[Rubinhuang9239]

Not sure why this can't be merged ASAP...

[Su-Yong]

I made patch for this pr. You can apply this feature temporary until merge this pr. There is a tutorial

• patch file: @react-native-community+blur+4.4.0.patch

diff --git a/node_modules/@react-native-community/blur/ios/BlurView.mm b/node_modules/@react-native-community/blur/ios/BlurView.mm
index 3d35d8f..6451085 100644
--- a/node_modules/@react-native-community/blur/ios/BlurView.mm
+++ b/node_modules/@react-native-community/blur/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
diff --git a/node_modules/@react-native-community/blur/lib/typescript/components/BlurView.ios.d.ts b/node_modules/@react-native-community/blur/lib/typescript/components/BlurView.ios.d.ts
index 47cbe75..2eda9aa 100644
--- a/node_modules/@react-native-community/blur/lib/typescript/components/BlurView.ios.d.ts
+++ b/node_modules/@react-native-community/blur/lib/typescript/components/BlurView.ios.d.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewProps, View } from 'react-native';
-declare type BlurType = 'dark' | 'light' | 'xlight' | 'prominent' | 'regular' | 'extraDark' | 'chromeMaterial' | 'material' | 'thickMaterial' | 'thinMaterial' | 'ultraThinMaterial' | 'chromeMaterialDark' | 'materialDark' | 'thickMaterialDark' | 'thinMaterialDark' | 'ultraThinMaterialDark' | 'chromeMaterialLight' | 'materialLight' | 'thickMaterialLight' | 'thinMaterialLight' | 'ultraThinMaterialLight';
+declare type BlurType = 'dark' | 'light' | 'xlight' | 'prominent' | 'transparent' | 'regular' | 'extraDark' | 'chromeMaterial' | 'material' | 'thickMaterial' | 'thinMaterial' | 'ultraThinMaterial' | 'chromeMaterialDark' | 'materialDark' | 'thickMaterialDark' | 'thinMaterialDark' | 'ultraThinMaterialDark' | 'chromeMaterialLight' | 'materialLight' | 'thickMaterialLight' | 'thinMaterialLight' | 'ultraThinMaterialLight';
 export declare type BlurViewProps = ViewProps & {
     blurType?: BlurType;
     blurAmount?: number;
diff --git a/node_modules/@react-native-community/blur/lib/typescript/fabric/BlurViewNativeComponent.d.ts b/node_modules/@react-native-community/blur/lib/typescript/fabric/BlurViewNativeComponent.d.ts
index 6bba43e..843baf6 100644
--- a/node_modules/@react-native-community/blur/lib/typescript/fabric/BlurViewNativeComponent.d.ts
+++ b/node_modules/@react-native-community/blur/lib/typescript/fabric/BlurViewNativeComponent.d.ts
@@ -1,7 +1,7 @@
 import type { ViewProps, HostComponent, ColorValue } from 'react-native';
 import type { WithDefault, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 interface NativeProps extends ViewProps {
-    blurType?: WithDefault<'dark' | 'light' | 'xlight' | 'prominent' | 'regular' | 'extraDark' | 'chromeMaterial' | 'material' | 'thickMaterial' | 'thinMaterial' | 'ultraThinMaterial' | 'chromeMaterialDark' | 'materialDark' | 'thickMaterialDark' | 'thinMaterialDark' | 'ultraThinMaterialDark' | 'chromeMaterialLight' | 'materialLight' | 'thickMaterialLight' | 'thinMaterialLight' | 'ultraThinMaterialLight', 'dark'>;
+    blurType?: WithDefault<'dark' | 'light' | 'xlight' | 'prominent' | 'transparent' | 'regular' | 'extraDark' | 'chromeMaterial' | 'material' | 'thickMaterial' | 'thinMaterial' | 'ultraThinMaterial' | 'chromeMaterialDark' | 'materialDark' | 'thickMaterialDark' | 'thinMaterialDark' | 'ultraThinMaterialDark' | 'chromeMaterialLight' | 'materialLight' | 'thickMaterialLight' | 'thinMaterialLight' | 'ultraThinMaterialLight', 'dark'>;
     blurAmount?: WithDefault<Int32, 10>;
     reducedTransparencyFallbackColor?: ColorValue;
 }
diff --git a/node_modules/@react-native-community/blur/src/components/BlurView.ios.tsx b/node_modules/@react-native-community/blur/src/components/BlurView.ios.tsx
index 62d05ec..d413001 100644
--- a/node_modules/@react-native-community/blur/src/components/BlurView.ios.tsx
+++ b/node_modules/@react-native-community/blur/src/components/BlurView.ios.tsx
@@ -6,6 +6,7 @@ type BlurType =
   | 'dark'
   | 'light'
   | 'xlight'
+  | 'transparent'
   | 'prominent'
   | 'regular'
   | 'extraDark'
diff --git a/node_modules/@react-native-community/blur/src/fabric/BlurViewNativeComponent.ts b/node_modules/@react-native-community/blur/src/fabric/BlurViewNativeComponent.ts
index f7a8749..daa3f83 100644
--- a/node_modules/@react-native-community/blur/src/fabric/BlurViewNativeComponent.ts
+++ b/node_modules/@react-native-community/blur/src/fabric/BlurViewNativeComponent.ts
@@ -10,6 +10,7 @@ interface NativeProps extends ViewProps {
     | 'dark'
     | 'light'
     | 'xlight'
+    | 'transparent'
     | 'prominent'
     | 'regular'
     | 'extraDark'
diff --git a/node_modules/@react-native-community/blur/src/fabric/VibrancyViewNativeComponent.ts b/node_modules/@react-native-community/blur/src/fabric/VibrancyViewNativeComponent.ts
index fff6f20..82370dc 100644
--- a/node_modules/@react-native-community/blur/src/fabric/VibrancyViewNativeComponent.ts
+++ b/node_modules/@react-native-community/blur/src/fabric/VibrancyViewNativeComponent.ts
@@ -11,6 +11,7 @@ interface NativeProps extends ViewProps {
     | 'light'
     | 'xlight'
     | 'prominent'
+    | 'transparent'
     | 'regular'
     | 'extraDark'
     | 'chromeMaterial'