Background
I'm trying to use a SVG component which has the property xlinkHref
within an Image
tag. The file was a plain SVG but I turned it into a React Native Component (TSX)
using https://react-svgr.com/playground/?native=true. I've used very simple SVG icons before with the same method but none had the xlinkHref
property.
Problem
The component at some point has an Image
tag within it which goes like this: xlinkHref="data:image/png;base64,
, however, straight after that it has about 474 lines of encripted information, or at least that is what I believe it is. As an example, this is the first half of the first line: iVBORw0KGgoAAAANSUhEUgAAAeUAAAJwCAYAAAC3c3kPAAAAAXNSR0IArs4c6QAAQABJREFUeAH
. The xlinkHref
tag is automatically highlighted as incorrect by VS Code and I get the error mentioned in the title:
Type 'string' is not assignable to type 'ImageSourcePropType'.
And below that the error message mentions that:
The expected type comes from property 'xlinkHref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ImageProps, any, any>> & Readonly & Readonly<...>'
I am not much of an expert programmer and can't understand what the error is trying to tell me, so if anyone would be as kind to explain, it'd mean a lot.
Question
Is it possible to use SVG components which have this kind of property and assigned value in React Native or is it simply not compatible? How can I go about solving it? Is this a known issue or have I just ran into a new roadblock? I couldn't find anything on the internet regarding this specific issue.
Thanks a lot in advance!
This worked for me: xlinkHref={'...' as any}