Rendering a blur view on top of another renders only one of them

[pavel-roj]

Issue Description

Short Version

Rendering a BlurView on top of another BlurView causes the bottom (earlier rendered) BlurView to not render at all. The underlying BlurView doesn't render its effect or any of its children.

Long Version

We are implementing a custom navigation drawer that uses a as its background to blur all content beneath the drawer menu. Additionally, we are using BlurViews in a similiar way for the background of the top navigation header and the bottom tab navigation of the application. The drawer menu is render after and overlays both the top navigation header and the bottom tab navigation. Instead of combining the blur effects, the covered elements using BlurView do not render at all when overlaid by another BlurView.

We're using: "@react-native-community/blur": "^4.4.0"

Steps to Reproduce

• Render a BlurView with some content inside it (e.g., Text, Views, etc.).
• Render another BlurView that covers (partially or fully) the first one, place it later in the hierarchy so that it is displayed on top of the first one.
• The issue: the first BlurView is not rendered at all in the areas under the second one - the element is not rendered including any child elements

Expected Behavior

The BlurViews should combine their blur effects correctly when overlaid, and both should render their respective effects and children.

Actual Behavior

The BlurView that is covered by another BlurView does not render its blur effect or any of its child elements.

[pavel-roj]

Also this issue occurs only on android (iOS looks fine)