Victory-native: VictoryLine is not working when adding animate prop

[boygirl]

_From @JensonMiralles on April 16, 2018 3:26_

VictoryLine is not working when adding animate prop (React Native)

_Copied from original issue: FormidableLabs/victory#972_

[boygirl]

@JensonMiralles

This issue is caused by a change in react-native-svg@^6.2.x. Since this change ClipPath components are not updating their widths which causes animating line and area charts to always be rendered with a 0 width ClipPath.

You can get around this by:

1) Using an earlier version of react-native-svg. Compatible versions are described here

2) Replacing the groupComponent in VictoryLine with a standard <G/> tag. You will not see curtaining transitions (no more 'onLoad' transitions, or nice transitions for changing numbers of data points), but regular animations will work correctly.

[JensonMiralles]

Oh okay, got that! thanks! 😁

[waltermvp]

@boygirl can you elaborate on the second part im trying this and getting invariant violation errors:

          <VictoryLine
            groupComponent={"<G/>"}
            style={{
              data: { stroke: "red" },
              parent: { border: "1px solid #ccc" }
            }}
            data={data1}
            x="x"
            y="y"
          />

[waltermvp]

still not working when using
"react-native-svg": "^6.1.4",

@boygirl

[boygirl]

@waltermvp you will need to omit the ^ in your version, as this is breaking with [email protected]

[boygirl]

@waltermvp you can also try groupComponent={<G/>}. It needs to be an element, not a string.

[waltermvp]

@boygirl got it working, thank you so very much.

[boygirl]

This issue is fixed with [email protected]