software-mansion / software-mansion/react-native-svg
Windows: RNSVGMask was not found in the UIManager
Nobody has claimed this yet.
- 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
- npx react-native init Bug
- npx react-native-windows-init
- npm install react-native-svg
- Link Win2D v1.26.0 (I did this with NuGet after opening my .sln)
- 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);
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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