react-native-svg not working with react native web

[Prashant-Mobile-Server]

Getting error when trying to load svg image from a local directory. It is working fine on mobile but has below issue when I try to run for web.


ERROR
Uncaught runtime errors:
×
ERROR
The string contains invalid characters.
createElement@[native code]
createElement@
createInstance@
completeWork@
completeUnitOfWork@
performUnitOfWork@
workLoopSync@
renderRootSync@
recoverFromConcurrentError@
performConcurrentWorkOnRoot@
workLoop@
flushWork@
performWorkUntilDeadline@

Made below changes to support on mobile:

custom.d.ts:

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react"
  },
  "extends": "@tsconfig/react-native/tsconfig.json",

  "include": ["**/*.ts", "**/*.tsx", "custom.d.ts"]
}

[bohdanprog]

Hello @Prashant-Mobile-Server ,
Can you share the example to reproduce that issue?
Thank you

[jkoutavas]

Here's an example of the failure: jkoutavas/react-native-web-sandbox#1. Can we re-open this issue please?

[jkoutavas]

@bohdanprog

[bohdanprog]

Hello @jkoutavas,
I checked your example, but you didn't use react-native-svg in your repository.
Also if you want to show SVG from file read that please.

[jkoutavas]

@bohdanprog please see the PR branch :-)

[bohdanprog]

@jkoutavas Did you read that :) ?

[jkoutavas]

@Prashant-Mobile-Server for what it's worth, I have a working example here: jkoutavas/react-native-web-sandbox#1