search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.52k stars 1.13k forks source link

Svg is blur on react-native-windows #2283

Open HunainHumail opened 6 months ago

HunainHumail commented 6 months ago

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

bohdanprog commented 3 months ago

CC @marlenecota

marlenecota commented 3 months ago

@HunainHumail what is the DPI or scale of the device?

HunainHumail commented 3 months ago

@HunainHumail what is the DPI or scale of the device?

I am using Lenovo ThinkPad E15 which comes with different dpi

15.6" FHD (1920x1080) IPS DPI: Approximately 141 DPI

15.6" FHD (1920x1080) TN DPI: Approximately 141 DPI

15.6" HD (1366x768) TN DPI: Approximately 100 DPI