typescriptreact-nativesvg

Type 'string' is not assignable to type 'ImageSourcePropType'


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 xlinkHreftag 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!


Solution

  • This worked for me: xlinkHref={'...' as any}