Windows: RNSVGMask was not found in the UIManager

[AncientRoman]

Bug

Importing and using mask with react-native-windows causes:
Invariant Violation: requireNativeComponent: "RNSVGMask" was not found in the UIManager

This happens with a clean project using the latest versions of react native, react-native-windows. and react-native-svg.

Environment info

System:
OS: Windows 10 10.0.22624
CPU: (8) x64 virt-7.2
Memory: 6.98 GB / 15.99 GB
Binaries:
Node:
version: 18.16.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 9.5.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions:
- 10.0.18362.0
- 10.0.19041.0
- 10.0.20348.0
- 10.0.22000.0
- 10.0.22621.0
IDEs:
Android Studio: Not Found
Visual Studio:
- 17.6.33815.320 (Visual Studio Community 2022)
Languages:
Java: 11.0.18
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.0
wanted: 0.72.0
react-native-windows:
installed: 0.72.0
wanted: 0.72.0
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

[email protected]
[email protected]
[email protected]
[email protected]

Steps To Reproduce

1. npx react-native init Bug
2. npx react-native-windows-init
3. npm install react-native-svg
4. Link Win2D v1.26.0 (I did this with NuGet after opening my .sln)
5. Edit index.js to look like:

import {AppRegistry, Platform} from "react-native"
import {name as appName} from "./app.json"
import Svg, {Defs, Mask, Rect} from "react-native-svg"

const App = ()=>{
    return (
        <Svg width="100%" height="100%" viewBox="0 0 800 300">
            <Defs>
                <Mask
                    id="Mask"
                    maskUnits="userSpaceOnUse"
                    x="0"
                    y="0"
                    width="800"
                    height="300"
                >
                    <Rect x="0" y="0" width="800" height="300" fill="black"/>
                </Mask>
            </Defs>
        </Svg>
    )
}
AppRegistry.registerComponent(appName, () => App);

6. react-native run-windows

Short, Self Contained, Correct (Compilable), Example

import {AppRegistry, Platform} from "react-native"
import {name as appName} from "./app.json"
import Svg, {Defs, Mask, Rect} from "react-native-svg"

const App = ()=>{
    return (
        <Svg width="100%" height="100%" viewBox="0 0 800 300">
            <Defs>
                <Mask
                    id="Mask"
                    maskUnits="userSpaceOnUse"
                    x="0"
                    y="0"
                    width="800"
                    height="300"
                >
                    <Rect x="0" y="0" width="800" height="300" fill="black"/>
                </Mask>
            </Defs>
        </Svg>
    )
}
AppRegistry.registerComponent(appName, () => App);

[Arthurmtro]

Do we have news about this ?

[bohdanprog]

CC @marlenecota

[jakex7]

I believe this should be fixed now (starting with version 15.4.0), since RNSVGMask was added in this PR #2315

[AncientRoman]

Mask does now exist in windows. It can be imported and used. However, it doesn't seem to work.
Any shape with mask="url(#Mask)" just acts like it's not masked.