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

Issue

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?

Solution

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

Answered By - user4478383