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.