fix: app crash on svg elements

[L03TJ3]

Description

When navigating to the Settings / Profile page the app crashed on mobile. the error was related to SVG element CountryFlag incorrectly transpiled (I think): invariant Violation: View config getter callback for component path must be a function (received undefined).

This has worked before but I believe that due to certain dependencies upgraded/added (related to SVG) something is conflicting/breaking and not working as expected.

I tried a bunch of bumps/downgrades to SVG packages. I tried alternative babel plugins. All are resulting in the same error or fully breaking build (missing plugin 'undefined', no longer recognizing local .svg's, etc). This related to for example: react-native-svg-transformer / react-native-svg / @svgr/babel-plugin-transform-svg-component

The current fix is based on the regular react-native-svg documentation, and seems to be the most simple to implement right now.

Fix:

• [x] directly import and serialize SVG for CountryFlag

About # (link your issue here)

4236

Note

many changes on yarn.lock are related to yarn dedupe. this can be reverted if need be

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
goodwallet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 7, 2024 8:19pm

2 Ignored Deployments

| Name | Status | Preview | Comments | Updated (UTC) | | :--- | :----- | :------ | :------- | :------ | | **gooddollar-delta** | ⬜️ Ignored ([Inspect](https://vercel.com/gooddollarteam/gooddollar-delta/AVgEy9daRtdkLryU2CarzEewBvpH)) | [Visit Preview](https://gooddollar-delta-git-4236-svg-app-crash-gooddollarteam.vercel.app) | | Mar 7, 2024 8:19pm | | **goodid** | ⬜️ Ignored ([Inspect](https://vercel.com/gooddollarteam/goodid/F7tPTqADS9y7tp6MvaAZVUS9UaFn)) | | | Mar 7, 2024 8:19pm |

[L03TJ3]

@johnsmith-gooddollar the issue is with how the country flags are transpiled (apparently).

So in this case I would have to not use the package but download all the country flags to the repo and write a custom hook for it to work. since the issue seems to be around third-party .svg's (local ones work as expected through import as components)

There is no other way that I know off (I spent quite a bit of time of trying to fix the dependencies / metro plugins, was unsuccesfull). Could be even needing a custom metro plugin to handle this case now

Current fix is fast, simple and aligned with the original docs

And it's only for showing a country flag anyway. (Which we only use on two places) Other svgs work as expected.

[L03TJ3]

@sirpy yes works on browser

2. I have a note added that the changes are caused by running yarn dedupe. I can revert but it also does not hurt do to sometimes