stowball / react-native-svg-icon

A simple, but flexible SVG icon component for React Native

Home Page:https://medium.com/@stowball/creating-an-svg-icon-system-in-react-native-fa0964ea5fe4

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

invariant violation : view config not found for name RNSVGPath

HamidReazaNikoonia opened this issue · comments

image

my code --

 import { G, Path } from 'react-native-svg';
 import SvgIcon from 'react-native-svg-icon';

  const SVG = {
      SortArrows: <G><Path d="M0 45h90L45 0 0 45z"/><Path d="M0 55h90l-45 45L0 55z"/></G>,
        Tick: {
                svg: <Path d="M38.729 75.688a4.48 4.48 0 0 1-3.21-1.356L16.558 55.004c-1.774-1.807- 
                1.774-4.736-.001-6.543a4.48 4.48 0 0 1 6.42 0l15.753 16.056 37.749-38.474a4.478 4.478 
                 0 0 1 6.419 0c1.773 1.806 1.773 4.736 0 6.543L41.939 74.332a4.48 4.48 0 0 1-3.21 
                 1.356z"/>,
                  viewBox: '0 0 50 50',
  },
}

    const Icon = (props) => <SvgIcon {...props} svgs={SVG} />;

    export default class App extends React.Component {
     render() {
         return(

         <React.Fragment>
            <Icon name="SortArrows" height="20" width="20" />
            <Icon name="Tick" fill="#0f0" viewBox="0 0 200 200" />
            <Icon name="Star" fill="transparent" stroke="#fff" strokeWidth="5" />
         </React.Fragment>

    );
}
 }

This sounds like react-native-svg isn't linked properly. Can you see if that module by itself works?

sorry im new in RN , how can i see if that module by itself works?
and thanks for answer

again im change my code to
import {Svg, G, Path, Circle } from 'react-native-svg';

export default class App extends React.Component {
 render() {
    return(

          <React.Fragment>
           <Svg
             height="100"
             width="100"
         >
            <Circle
                  cx="50"
                  cy="50"
                  r="45"
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"
             />
          </Svg>
          </React.Fragment>

       );
   }
   }

and give this Erro now
image

Looks like you may need to relink react-native-svg. It can be a bit finicky at times. They have some instructions for manual linking if automatic doesn't work.

I had the exact same issue and I can confirm, relinking with rnpm link react-native-link works like a charm.