software-mansion / software-mansion/react-native-svg
Svg is blur on react-native-windows
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8k
- Forks
- 1.2k
- Avg merge
- 10d 9h
- Merged PRs (30d)
- 2
Description
Bug
Using react-native-svg on react-native-windows. The same files are very clear in IOS and Android, but blurred in react-native-windows
Unexpected behavior
Blurry svgs in react-native-windows, they are not clear as in Android and IOS
react-native init CleanProject
cd CleanProject/
react-native-windows-init
yarn add react-native-svg
npx react-native autolink-windows
modify App.js and add svg-> run the app on both Platforms, Windows and (android/ios)
Environment info
React native info output:
ystem:
OS: Windows 11 10.0.22621
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 2.09 GB / 15.71 GB
Binaries:
Node:
version: 20.13.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.22
path: ~\Desktop\ReactNativeWindows\UnblocVpn\node_modules\.bin\yarn.CMD
npm:
version: 10.7.0
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.22621.0
IDEs:
Android Studio: AI-233.14808.21.2331.11709847
Visual Studio:
- 17.9.34728.123 (Visual Studio Community 2022)
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.8
wanted: ^0.73.0
react-native-windows:
installed: 0.73.13
wanted: 0.73.13
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Library version: 15.3.0
##Expected Result
Clear Svg icons as in Mobile platform
##Actual Result
Blurry icons and not clear as IOS and Android
react native svg on React Native Windows
react native svg on React Native (IOS)
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
The report provides a reproduction through a new React Native project and an SVG added to App.js; start by reproducing the rendering difference on React Native Windows versus iOS or Android. Done means identifying and correcting the Windows-specific cause so the SVG is as clear on Windows as on the mobile platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100