Avatar can't render SVG image referenced with an URL

MattiaDellOca commented 2 months ago

Description

I'm using an Avatar component containing an image referenced with an URL. If the URL image ends with extension .svg, then I get an error: Error: [react-native-svg] You are trying to import a component 'SvgCssUri' that has been moved to a sub-package. Change your import from 'react-native-svg' to 'react-native-svg/css'.. Note this only happens for images with .svg extension.

Related to

[x] Components
[ ] Demo
[ ] Docs
[ ] Typings

Steps to reproduce

Try rendering this:

return (
   <Avatar
      source={{
         uri: 'https://upload.wikimedia.org/wikipedia/commons/9/9c/Dunder_Mifflin%2C_Inc.svg'
       }}
   />
)

Expected behavior

I would expect the image to be shown as happens for .jpg formats or similar

More Info

I suspect that the Avatar component is not fetching the .svg image from the URL but is trying to do some other operation which is resulting in the error.

Screenshots/Video

Screenshot 2024-07-12 at 13 49 28

Environment

React Native version: 0.74.1
React Native UI Lib version: 7.26.0

Affected platforms

[ ] Android
[x] iOS
[ ] Web

adids1221 commented 4 weeks ago

Hi @MattiaDellOca, does it reproduce on react-native 0.71 ? We aren't supporting version 0.74 yet.

I didn't managed to reproduce the issue with react-native 0.71

MattiaDellOca commented 3 weeks ago

Hello @adids1221, unfortunately I can't downgrade react-native to 0.71 in my project without breaking stuff. If you said that the problem does not present itself in react-native 0.71, then I guess it is just a dependency issue. Thank you!

wix / react-native-ui-lib