React Native SVG is using unsupported JSX namespace tags. How to set throwIfNamespace to false?

user_4698611 0
Viewed 1860

I am trying to use kristerkari/react-native-svg-transformer, but I get following error after I run the metro:

error: assets/menu.svg: /user/Projects/mobile/assets/menu.svg: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
  2 | import Svg, { Path } from "react-native-svg";
  3 | 
> 4 | const SvgComponent = props => <Svg overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" width={24} height={24} {...props}><Path xmlns:default="http://www.w3.org/2000/svg" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" vectorEffect="non-scaling-stroke" fill="#949494" /></Svg>;
    |                                                                                                                                              ^^^^^^^^^^^^^
  5 | 
  6 | export default SvgComponent;

I followed the instructions. I am using React 16.13.1 and RN 0.63.2. I tried to set the flag in babel.config.js like this:

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    { throwIfNamespace: false },
  ],
};

but it's not working. Any idea how can I bypass the warning or maybe alternative way to be able to import a SVG file without runtime conversion?

react-native-svg react-native svg
3 Answers

I've encountered the same problem in past, not sure if it's the correct solution but removing the xmlns in the svg file worked for me

user_44783830

Can you use path Svg by The same package whitout transformer svg but you must link with React native.

react-native link react-native-svg-transformer
user_134945840

The error is because of not using camel case tags. Please note that here you are using jsx (react). So please make the following changes.

  1. sketch:type into sketchType
  2. xmlns:xlink into xmlnsXlink
  3. xlink:href into xlinkHref
  4. xmlns:default into xmlnsDefault
  5. And finally convert any css classes also into camelCase
user_109077200
Related