search

kristerkari / react-native-svg-transformer

Import SVG files in your React Native project the same way that you would in a Web application.
MIT License
1.57k stars 116 forks source link

The metro config module seems to break icons in Expo SDK 40 #128

Open AtmasApps opened 3 years ago

AtmasApps commented 3 years ago

I'm not sure exactly who is to blame, but I have isolated this problem down to an alteration requested by react-native-svg-transformer, so I'm logging this Issue here for your review and for posterity to others that may want to try this workaround.

Implementing the step to create the file metro.config.js that is titled "For React Native v0.57 or newer / Expo SDK v31.0.0 or newer" found on "https://www.npmjs.com/package/react-native-svg-transformer" causes react-native vector icons used prior to SDK 40 to break. Before, all icons were working fine.

Using an actual, basic android phone to test, I noticed all of the icons I was using were now rendering as square/rectangular boxes with an "X" in them.

i.e. the following would no longer render the image but would render a boxed X image:

`

`

The workaround was to remove the file "metro.config.js" In my case, I only had the file for this module. Presumably if you had it before, you could simply remove the alterations.

After removing the metro.config.js file, all Icons functioned normally as before.

kristerkari commented 3 years ago

Thanks for sharing this @AtmasApps !

I am myself not using Expo, so it might be that the instructions in the readme get outdated when Expo releases new versions.

If you notice that there are changes to the install process, please contribute a PR to update the install instructions, so that everyone can get the updated install instructions 👍

tgwow commented 3 years ago

I'm not sure exactly who is to blame, but I have isolated this problem down to an alteration requested by react-native-svg-transformer, so I'm logging this Issue here for your review and for posterity to others that may want to try this workaround.

Implementing the step to create the file metro.config.js that is titled "For React Native v0.57 or newer / Expo SDK v31.0.0 or newer" found on "https://www.npmjs.com/package/react-native-svg-transformer" causes react-native vector icons used prior to SDK 40 to break. Before, all icons were working fine.

Using an actual, basic android phone to test, I noticed all of the icons I was using were now rendering as square/rectangular boxes with an "X" in them.

i.e. the following would no longer render the image but would render a boxed X image:

<MaterialIcons name="menu" size={32} />

The workaround was to remove the file "metro.config.js" In my case, I only had the file for this module. Presumably if you had it before, you could simply remove the alterations.

After removing the metro.config.js file, all Icons functioned normally as before.

Thanks @AtmasApps , this solves my problems with fonts and icons that weren't being loaded