feat(iOS): transparent blur type #513

kirgudkov · 2022-11-30T22:30:59Z

Hi there 👋 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

…ckground to transparent

…ewNativeComponent.ts

Add transparent blur type to example

suzil · 2022-12-19T01:51:17Z

Maybe also closes #407

OskarEichler · 2023-01-18T10:09:52Z

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 · 2023-01-18T10:17:17Z

@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 · 2023-01-20T22:24:41Z

Hi @KirillGudkov, really awesome work 🎉 🥳
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 · 2023-01-22T14:27:14Z

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 · 2023-02-03T10:54:49Z

@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 · 2023-02-28T14:56:33Z

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

sapkra · 2023-03-01T09:51:36Z

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 · 2023-03-01T10:01:34Z

@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. status-im/status-mobile#14903

Parveshdhull · 2023-03-01T10:02:36Z

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 · 2023-03-01T11:10:46Z

Shopify/react-native-skia#324 (comment)

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 · 2023-03-29T22:50:41Z

@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?

Hady207

Working fine please merge

pottercomuneo · 2023-10-25T10:34:17Z

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

stephenkopylov · 2024-01-26T16:01:23Z

Merge when?

ugar0ff · 2024-02-09T13:28:00Z

Working fine please merge

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

TheRealNate · 2024-02-24T07:23:07Z

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

minizzang · 2024-03-08T05:04:00Z

ios/BlurView.mm

@@ -131,6 +131,7 @@ - (void)setReducedTransparencyFallbackColor:(nullable UIColor *)reducedTranspare

 - (UIBlurEffectStyle)blurEffectStyle
 {
+  if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleDark;


Thank you for your good contribution on important issues.
I also want this feature with white background, so I used your changed code and just fixed this line as
if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleLight;.
However it shows dark background and not working.. Do you have any idea about this problem?

Hm. I've just tested both cases (dark and light backgrounds) and everything seems to be working great. No changes in the native code 🤔

1 2

Code is just like this. It doesn't depend on theme or whatever:

<BlurView blurAmount={7} blurType={"transparent"} />

Please make sure you're using it right. If the problem still exists, could you elaborate a bit? What kind of effect are you trying to achieve? The image will do

Rubinhuang9239 · 2024-06-26T08:43:20Z

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

Su-Yong · 2024-07-22T11:16:44Z

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'

kirgudkov · 2024-09-02T20:25:51Z

For those who's trying to achieve fully transparent blur that doesn't alter underlying views (including saturation), I've publushed repo (iOS only) that can serve as an example. But be cautious, it uses Apple's private APIs to manipulate CAFilters: use it at your own risk as it can potentially lead to App Store rejection.

Variable blur with gradient mask:

gerzonc · 2024-09-12T04:14:10Z

For those who's trying to achieve fully transparent blur that doesn't alter underlying views (including saturation), I've publushed repo (iOS only) that can serve as an example. But be cautious, it uses Apple's private APIs to manipulate CAFilters: use it at your own risk as it can potentially lead to App Store rejection.

Variable blur with gradient mask:

Probably you might be interested on reading this this in case you're not applying any strategy to it yet

kirgudkov added 4 commits November 30, 2022 22:32

New "transparent" blurType that turns every blurEffectView subview ba…

aa7e1a5

…ckground to transparent

Add "transparent" blur type to README.md, BlurView.ios.tsx and BlurVi…

6a0a9a9

…ewNativeComponent.ts

Fix blurType in VibrancyViewNativeComponent.ts

1a7ffd8

feat(iOS): transparent blur type

d133b15

Add transparent blur type to example

Parveshdhull mentioned this pull request Jan 23, 2023

Add blur overlay for bottom tabs and shell top nav status-im/status-mobile#14783

Merged

terrysahaidak mentioned this pull request Feb 7, 2023

Shadow and borderRadius on BlurView #142

Open

Parveshdhull mentioned this pull request Mar 1, 2023

Improve bottom tabs blur overlay status-im/status-mobile#14903

Closed

Parveshdhull mentioned this pull request May 2, 2023

Design notes: switch profiles status-im/status-mobile#15789

Closed

11 tasks

Hady207 reviewed Jun 15, 2023

View reviewed changes

henriquecfreitas mentioned this pull request Nov 17, 2023

Add support for Clear/Transparent Blur background #602

Open

minizzang reviewed Mar 8, 2024

View reviewed changes

Parveshdhull mentioned this pull request Mar 20, 2024

[iOS] Wrong bottom sheet opacity on onboarding and in the activity center status-im/status-mobile#19319

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(iOS): transparent blur type #513

feat(iOS): transparent blur type #513

kirgudkov commented Nov 30, 2022 •

edited

Loading

suzil commented Dec 19, 2022

OskarEichler commented Jan 18, 2023

sapkra commented Jan 18, 2023

Parveshdhull commented Jan 20, 2023

joisadler commented Jan 22, 2023

kirgudkov commented Feb 3, 2023

filippobarcellos commented Feb 28, 2023

sapkra commented Mar 1, 2023

Parveshdhull commented Mar 1, 2023

Parveshdhull commented Mar 1, 2023

sapkra commented Mar 1, 2023

chen-rn commented Mar 29, 2023

Hady207 left a comment

pottercomuneo commented Oct 25, 2023

stephenkopylov commented Jan 26, 2024

ugar0ff commented Feb 9, 2024

TheRealNate commented Feb 24, 2024

minizzang Mar 8, 2024

kirgudkov Mar 11, 2024 •

edited

Loading

Rubinhuang9239 commented Jun 26, 2024

Su-Yong commented Jul 22, 2024

kirgudkov commented Sep 2, 2024 •

edited

Loading

gerzonc commented Sep 12, 2024 •

edited

Loading

feat(iOS): transparent blur type #513

Are you sure you want to change the base?

feat(iOS): transparent blur type #513

Conversation

kirgudkov commented Nov 30, 2022 • edited Loading

suzil commented Dec 19, 2022

OskarEichler commented Jan 18, 2023

sapkra commented Jan 18, 2023

Parveshdhull commented Jan 20, 2023

joisadler commented Jan 22, 2023

kirgudkov commented Feb 3, 2023

filippobarcellos commented Feb 28, 2023

sapkra commented Mar 1, 2023

Parveshdhull commented Mar 1, 2023

Parveshdhull commented Mar 1, 2023

sapkra commented Mar 1, 2023

chen-rn commented Mar 29, 2023

Hady207 left a comment

Choose a reason for hiding this comment

pottercomuneo commented Oct 25, 2023

stephenkopylov commented Jan 26, 2024

ugar0ff commented Feb 9, 2024

TheRealNate commented Feb 24, 2024

minizzang Mar 8, 2024

Choose a reason for hiding this comment

kirgudkov Mar 11, 2024 • edited Loading

Choose a reason for hiding this comment

Rubinhuang9239 commented Jun 26, 2024

Su-Yong commented Jul 22, 2024

kirgudkov commented Sep 2, 2024 • edited Loading

gerzonc commented Sep 12, 2024 • edited Loading

kirgudkov commented Nov 30, 2022 •

edited

Loading

kirgudkov Mar 11, 2024 •

edited

Loading

kirgudkov commented Sep 2, 2024 •

edited

Loading

gerzonc commented Sep 12, 2024 •

edited

Loading