feat(iOS): transparent blur type

[kirgudkov]

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

[suzil]

Maybe also closes #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 🎉 🥳
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. status-im/status-mobile#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]

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]

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

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?

[minizzang]

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?

[kirgudkov]

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