software-mansion / react-native-svg

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

Some svg urls don't work #1462

Closed jauggy closed 4 months ago

jauggy commented 4 years ago

NB Never post screenshots of code. Post copy paste-able code if you include any. Ignoring this will likely lead to direct closing of the issue. Please respect the time and energy of open source maintainers.

Bug

I created a blank app then tried to render an svg from a url. It works with one url but not another.

Unexpected behavior

Does work:

<SvgUri
          width="100%"
          height="100%"
          uri="https://c2.scryfall.com/file/scryfall-symbols/sets/tsr.svg"
        />

Doesn't work:

<SvgUri
          width="100%"
          height="100%"
          uri="https://c2.scryfall.com/file/scryfall-symbols/sets/cc1.svg"
        />

Tested on Android device running Android 9.

Environment info

React native info output:

System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i5-2500 CPU @ 3.30GHz
    Memory: 2.02 GB / 7.96 GB
  Binaries:
    Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 24, 25, 26, 27, 28, 29
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...google_apis | Google APIs Intel x86 Atom Sys..., a... | Intel x86 Atom_64, a...s_playstore | Google Play Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys...
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.10240.0, 10.0.10586.0, 10.0.14393.0, 10.0.15063.0, 10.0.16299.0
  IDEs:
    Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6626763
    Visual Studio: 15.6.27205.2004 (Visual Studio Community 2017), 16.7.30406.217 (Visual Studio Community 2019), 15.4.27004.2009 (Visual Studio Community 2017)
  Languages:
    Java: 1.8.0_162
    Python: 2.7.14
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: react-native-svg@12.1.0

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

  1. git clone https://github.com/jauggy/svg-uri-bug.git
  2. yarn
  3. yarn start
  4. yarn android
  5. There are two svgs in App.js but only one renders. If you change the url you can verify the url is the problem. However, if you try both urls in a browser they both work.

Have tested on Device with Android 9.

Short, Self Contained, Correct (Compilable), Example

See above

marquina-abreu commented 4 years ago

I have the same problem

Screen Shot 2020-09-25 at 2 43 54 PM
EliyahuMany commented 4 years ago

the same, I try to use http://www.accuweather.com/images/weathericons/33.svg

staghouse commented 4 years ago

I believe this comes down to error handling. I'm having the same problem with dynamic urls where data may or may not exist.

Here is where the error keeps popping: https://github.com/react-native-svg/react-native-svg/blob/b2e2c355204ff4b10973d3afce1495f7e4167ff7/src/xml.tsx#L313

bohdanprog commented 4 months ago

Hello, I have reviewed all the cases you provided, and I believe the SvgUri component has been updated and is now working correctly. I have closed the issue, but if you encounter the same problem, feel free to reopen it.

Thank you.