From my exprience , i found that using SVG in react native is very handy but also confusing as there are not much tutoirals out there. I was using Expo as development enviroment for react native which has react-native-svg builtin. Everything looked good during development but when i tried to push app in real device or emulator it kept giving "error while updating property d in shadow node of type RNSVGPath " which was very confusing.
After seraching for a while and being unable to find the solution in the internet , i installed react-native-svg and imported everything from there instead of expo , which solved my issue.
I replaced
import { SVG } from "expo";
with
import Svg,{
Circle,
Image,
Text
} from 'react-native-svg';
And people is the example of usage different SVG elements in render.
<View style={styles.container}>
<Svg height={height} width={width} >
<Image
x="0%"
y="0%"
width="100%"
height="100%"
preserveAspectRatio="xMidYMid slice"
opacity="0.99"
href={bgimg}
/>
<Text
x="49%"
y="10%"
textAnchor="middle"
fontWeight="bold"
fontSize="100"
fill="#13b0d8"
>{angle}°</Text>
<Circle
cy={height/2-Math.pow(this.state.accelerometerData.y.toFixed(2)*14.5,2)+80}
cx={-this.state.accelerometerData.y.toFixed(2)*(halfWidth)+halfWidth}
r={20}
strokeWidth={2}
stroke="#3498db"
fill="#530000"
opacity="0.8"
/>
<Text
x="10%"
y="90%"
textAnchor="middle"
fontWeight="bold"
fontSize="20"
fill="#13b0d8"
onPress={() =>
navigate('Contact', { angel: angle })
}
>Submit Data</Text>
</Svg>
</View>
Note : Its just sample , it won't work as there are variables used which has been defined above this .