feat(iOS): transparent blur type

kirgudkov commented 1 year ago

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 commented 1 year ago

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

OskarEichler commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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. shot

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

sapkra commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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