software-mansion / software-mansion/react-native-svg

Windows: RNSVGMask was not found in the UIManager

Open
#2,076 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

windows
Dominant language
TypeScript
Stars
8k
Forks
1.2k
Avg merge
10d 9h
Merged PRs (30d)
2

Description

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

react-native-svg@13.9.0
react-native-windows@0.72.0
react-native@0.72.0
react@18.2.0

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);
  1. 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);

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal example in index.js and reproduce it with react-native-windows 0.72.0, react-native-svg 13.9.0, and the listed React Native versions. Inspect how the Mask component is registered for Windows and run react-native run-windows; done means the example no longer reports that RNSVGMask is missing from the UIManager.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.