Mask element does not fully cover the screen on Android in 9.9.3

[iamrenejr]

Bug

I am trying to do a transparent SVG overlay with a circular cutout that can dynamically appear anywhere on the page. I can achieve this on iOS using a Mask, but the mask fails to cover the whole screen on Android.

Basically, this is the result on iOS (left) and Android (right) from the same code:

They should look the same, but they don't. This is also the result on actual devices (vivo 1808, Android 8.0; iPhone 7 Plus iOS 13.0)

Environment info

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Memory: 422.29 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.3/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5

Library version: 9.9.3

Steps To Reproduce

1. Clone my repro
2. Run react-native run-android and see the result

-- OR --

1. Create a react native Modal
2. Inside the modal, create an SVG image with a Mask element
3. Inside the Mask element, place a Rect that covers the whole screen to force it to show (ie, width="100%" height="100%" fill="white")
4. Use that mask on a semi-transparent Rect element that also covers the whole screen
5. Run the app in iOS and Android

Describe what you expected to happen:

1. The parts covered by the Rect inside the Mask should be shown

Reproducible sample code

Here is my repro

This is the code:

<React.Fragment>
    <Svg height="100%" width="100%">
        <Rect width="100%" height="100%" fill="yellow" />
    </Svg>
    <Modal visible transparent>
        <Svg height="100%" width="100%">
            <Defs>
                <Mask id="Mask">
                    <Rect x="0" y="0" width="100%" height="100%" fill="white" />
                    <Circle cx="250" cy="250" r="50" fill="black" />
                </Mask>
            </Defs>
            <Rect x="0" y="0" width="100%" height="100%" fill="#555" fillOpacity="0.8" mask="id(#Mask)" stroke="blue" strokeWidth={16} />
        </Svg>
    </Modal>
</React.Fragment>

Extra Notes

I am also running into this issue on 9.4.0 and react-native 0.59.6, so this isn't an issue just from the latest versions.

[iamrenejr]

I've made a workaround using the ClipPath element instead for anyone who wants something similar but can't proceed due to this issue. Essentially, use a ClipPath to trace out the shapes instead. It might not work for you if your shapes have to be more complex, though.

If anyone wants to jump in, I'm not quite the expert when it comes to native Java development on Android, but I'd be happy to give this issue a go once I've got the hang of it.

[msand]

🎉 This issue has been resolved in version 9.9.8 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ncoen97]

I'm experiencing this exact same issue on v15.3.0 while running on Android (iOS works fine). I just upgraded from v12.3.0 (it used to work as expected).

My SVG looks like this:

<Svg height="100%" width="100%">
  <Defs>
    <Mask id="mask">
      <Rect height="100%" width="100%" fill="white" />
    </Mask>
  </Defs>
  <Rect
    height="100%"
    width="100%"
    fill="black"
    mask="id(#mask)"
    fillOpacity={0.7}
  />
</Svg>

This is what I see in my screen, the opacity mask is not occupying the entire screen, it stops at 70% height.

The weird thing is that it doesn't happen always, in some cases the filter occupies all the screen as it should. It depends from which screen I'm navigating from.

I wasn't able to figure this one out yet.... Any help will be appreciated.

[ncoen97]

I found it! On one of the screens the keyboard was open because there was an input. That caused the svg to detect the previous screen height (with the keyboard still open).

Fixed it by dismissing keyboard this way:

Keyboard.dismiss();
requestAnimationFrame(() => navigation.navigate());