ios - React Native Add To Apple Wallet SVG Failure - Stack Overflow

I am getting an error when trying to run or build my React Native Expo app. The issue is coming from an SVG that I am using.

At first I thought it was to do with SVGs in general, but I have found out that it is with a particular SVG.

I downloaded the SVG from Apple directly (here). I am using the 'Add to Apple Wallet Badges/US_UK/RGB/US-UK_Add_to_Apple_Wallet_RGB_101421.svg' SVG. When I run the app with npx expo run:ios or I try to build my app for both Android and iOS, I get an error:

error: assets/wallet/addToAppleWalletSVG.svg: Cannot set properties of undefined (setting 'shouldTestNextSiblings')

I have tried altering my metro.config.js but wasn't sure if this was necessary given the other SVGs I am using are fine. I also saw recommendations to use and SVG optimiser, I did try this and it still resulted in the same error, plus I didn't want to opt for that as Apple are pretty strict with using their assets.

EDIT

Within the SVG file, there is a <style> tag, I tried removing this and the error was fixed. However I feel like this isn't a great solution.

EDIT 2

As expected, removing the <style> tag is an awful solution. It completely changes the SVG.

I am getting an error when trying to run or build my React Native Expo app. The issue is coming from an SVG that I am using.

At first I thought it was to do with SVGs in general, but I have found out that it is with a particular SVG.

I downloaded the SVG from Apple directly (here). I am using the 'Add to Apple Wallet Badges/US_UK/RGB/US-UK_Add_to_Apple_Wallet_RGB_101421.svg' SVG. When I run the app with npx expo run:ios or I try to build my app for both Android and iOS, I get an error:

error: assets/wallet/addToAppleWalletSVG.svg: Cannot set properties of undefined (setting 'shouldTestNextSiblings')

I have tried altering my metro.config.js but wasn't sure if this was necessary given the other SVGs I am using are fine. I also saw recommendations to use and SVG optimiser, I did try this and it still resulted in the same error, plus I didn't want to opt for that as Apple are pretty strict with using their assets.

EDIT

Within the SVG file, there is a <style> tag, I tried removing this and the error was fixed. However I feel like this isn't a great solution.

EDIT 2

As expected, removing the <style> tag is an awful solution. It completely changes the SVG.

• ios
• react-native
• svg
• expo
• react-native-svg

Share Improve this question Follow edited Jan 2 at 11:56 TreyCollier asked Jan 2 at 11:31 TreyCollierTreyCollier 43977 silver badges2121 bronze badges 7

• Your problem is with a particular SVG. Shouldn't that SVG be in the question in that case? Please cut out all the parts of the SVG that don't contribute to the problem. – Robert Longson Commented Jan 2 at 11:40
• I am not sure what you mean exactly. I downloaded the folder of assets from Apple, I tried multiple SVGs from there, but they all give me the same problem. And if you are suggesting to alter the SVG until it works, I am not someone that has ever worked on an SVG. – TreyCollier Commented Jan 2 at 11:48
• Please cut out all the parts of the SVG that don't contribute to the problem. This suggests modifying the SVG, not the question. – TreyCollier Commented Jan 2 at 11:58
• sounds like svgo can convert these files: github.com/svg/svgo/pull/592 although this is not really a programming problem (unless there's some conversion software you are planning to write) and you'd be better off on ux.stackexchange.com I think. – Robert Longson Commented Jan 2 at 11:59
• Ok, wasn't aware there is a UX forum. Thanks – TreyCollier Commented Jan 2 at 12:00

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 2

I checked the documentation for the SVG packages I am using but couldn't find any explanation to the cause of my problem.

I noticed the following in the SVG file:

<style type="text/css">
    .st0{fill:#A6A6A6;}
    .st1{clip-path:url(#SVGID_2_);fill:#DEDBCE;}
    .st2{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#40A5D9;}
    .st3{clip-path:url(#SVGID_2_);}
    .st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFB003;}
    .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#40C740;}
    .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#F26D5F;}
    .st7{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#D9D6CC;}
    .st8{fill-rule:evenodd;clip-rule:evenodd;fill:#DEDBCE;}
    .st9{fill:#FFFFFF;}
</style>

I am not familiar with SVGs, but this to me looks like styles are being mapped to classes. I discovered this block of code was causing the problem, so I simply added the styles inline opposed to using the classes, and this resolved my issue.

I appreciate this is not an optimal solution, but maybe someone that knows more about this could expand.