How can I render a fully black BlurView like the system chrome blurs in iOS 13?

[gabrielecirulli]

I'm trying to develop an app that supports iOS 13 dark mode. As part of that, I'd like my navigation and tab bars to have a blurred background that's as similar as possible to apps that use the native versions of those UI elements.

I'm trying to use BlurView to that end, but I'm running into trouble because even with a black background underneath, the BlurView renders with a gray tinge:

I've tried all of the available blurType props to no avail. I get the best results with regular as it automatically switches between light and dark, however it's still gray.

For comparison, here's an example from the Reminders app: the navigation bar is completely black when there's nothing under it, however it blurs content as soon as something scrolls behind it:

Lastly, I'm no expert when it comes to UIKit but I notice there are new blur effect styles in the official documentation: https://developer.apple.com/documentation/uikit/uiblureffectstyle

I see specifically an effect called UIBlurEffectStyleSystemChromeMaterial, with the following explanation:

An adaptable blur effect that creates the appearance of the system chrome.

Would this be what I am looking for? How complicated would it be to add support for it?

Thanks!

[nidegen]

Any progress on that? I assume it is what you say, but I need to try it first

[sebqq]

@gabrielecirulli @nidegen Please, see #349 Pull Request. I've tried to add all the blurs from ios 13.

[rob5408]

None of the new blurTypes worked for me. I ended up using react-native-blur along with react-native-masked-view/masked-view to mask what I wanted blurred. The image (transparent png) I used had a blur which I added In Pixelmator and this allowed the blurred image to then gracefully "fade" into the background.