invariant violation : view config not found for name RNSVGPath
HamidReazaNikoonia opened this issue · comments
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>
);
}
}
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.