NSInvalidArgumentException when trying to use "Symbol" from react-native-svg library - reactjs

Question

I'm trying to use the react-native-svg library particularly with the Symbol element as follows. I used the example code here:
<Svg
height="150"
width="110"
>
<Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
/>
When I run this code, I get the following error in the logs and the app crashes:
<Error>: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSRegularExpression enumerateMatchesInString:options:range:usingBlock:]: nil argument'
When I don't use the Symbol object everything works fine. Has anyone run into this issue before?

Answer 1

I was actually able to fix this by copying and pasting the example on this page:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
You need the width and height elements on the Use tag as follows:
<Svg height="150" width="110">
<Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use href="#symbol" x="0" y="0" width="100" height="50"/>
</Svg>
I definitely thought I tried that before, so it may have also been me running the following clear cache and re-compiling commands as well:
rm -rf node_modules && npm install and npm start -- --reset-cache
Either way, problem fixed!