SVG translate not working with react-native@0.30.0 react-native-svg@4.0.0-rc

I there…

I am using react-native-svg to render charts but there seems to be problem with the svg translate attribute… as it doesn’t work.

Here is my package.json:

"react": "^15.2.0",
"react-native": "^0.29.0",
"react-native-svg": "^3.0.0"

Here is my render method:

render() {
  return (
      <View >
        <Svg height="640" width="360">
          <Circle transform="translate(200, 200)"
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
          />
          <Rect translate="rotate(45)"
              x="15"
              y="15"
              width="70"
              height="70"
              stroke="red"
              strokeWidth="2"
              fill="yellow"
            />
        </Svg>
      </View>
    );
  }

I made sure everything is in place for react-native@0.29.0 in line with https://github.com/magicismight/react-native-svg/issues/50#issuecomment-222893637

And here is a screenshot:

[magicismight]

Thanks for reporting this. transform prop have been fixed in 4.0.0-rc. And we have changed transform prop to something like this

          <Circle
              transform={{scale:0.5,translate:'200, 200'}}
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
          />

or this can do the same
          <Circle
              scale="0.5"
              translate="200, 200"
              cx="50"
              cy="50"
              r="45"
              stroke="blue"
              strokeWidth="2.5"
              fill="green"
          />

[carly-litchfield-zocdoc]

I had this problem too, and using transform={{ translate:'200, 200' }} instead of transform="translate(200, 200)" fixed it 😄