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

Svg is blur on react-native-windows

Open
#2,283 5 comments 1 reaction 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

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
Screenshot 2024-05-23 180525

react native svg on React Native (IOS)
IMG_2288

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.