Mask in nested SVG not working on iOS

[zsmith3]

Bug

When I have a mask within 2 nested SVGs, it displays fine on Android and web but displays nothing on iOS.

Unexpected behavior

On web and an android phone, this displays a 100x100 red square with a 20x20 square missing in the top left corner, as expected. On an iPhone it shows a blank screen. Removing the inner <svg> tag fixes the problem.

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 16.51 GB / 31.75 GB
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: Not Found
  Languages:
    Java: 16.0.1 - C:\Program Files\Amazon Corretto\jdk16.0.1_9\bin\javac.EXE
    Python: 3.9.5 - C:\Python39\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.1

Steps To Reproduce

1. git clone https://github.com/zsmith3/rnsvg-bugreport
2. cd rnsvg-bugreport
3. yarn install
4. yarn start
5. Open on an android phone or web browser to see correct behaviour, open on an iphone to see bug.

Short, Self Contained, Correct (Compilable), Example

https://snack.expo.dev/@zsmith3/8a3c41

[Matt45D]

Getting same bug with iOs where my nested SVGs are not rendering at all, but on Android is renders perfectly fine. I wonder if it is intentional for the the Svg component to not be nested inside of each other?

[jankapunkt]

Anyone knows whats actually causing this?