Victory-native: react-native-svg 6.3.1 support

[sibelius]

There were a lot of improvements on react-native-svg 6.3.1 that makes svg faster on both android and ios

is it compatible with latest version of this package?

[esutton]

@sibelius I tried react-native-svg 6.3.1

You might give it a try and see if it works for you.

I found react-native-svg 6.3.1 broke a number of things on my victory-native line chart.

Things like axis tick scaling. It seemed to only plot axis scales for half of the screen.

Rolling back to 6.2.1 resolved the problems.

"react": "^16.2.0",
"react-native": "^0.53.3",
"react-native-svg": "6.2.1",
"victory-native": "^0.17.4",

[sibelius]

My main problem with react-native-svg 6.3.1 was this one https://github.com/react-native-community/react-native-svg/issues/665#issuecomment-384410039

transform={{}} does not work anymore I guess

you need to use transform="translate() rotate()" instead

[esutton]

@sibelius I just searched my repo for "transform" and found no hits.

My app's line chart problem with react-native-svg 6.3.1 must be something else.

Or perhaps a result of victory-native using transform that 6.3.1 has broken.

[sibelius]

transform should be fixed here https://github.com/FormidableLabs/victory-native/pull/203

maybe we could be something else

[boygirl]

@sibelius @esutton This is a known issue. react-native-svg@^6.2.0 has breaking changes for victory-native including changes in path caching, that mean that clipPath path dimensions are never updated. This is what causes VictoryLine and VictoryArea charts to appear invisible when animating. The clipPath starts with zero width and just stays there rather than expanding to reveal the line / area.

[JulianKingman]

@boygirl do you have an idea of what the path towards SVG compatibility looks like? I'd be happy to work on a PR, just need a pointer in the right direction.

Also, at this point we should be looking to make it compatible with 6.4.1, right?

[boygirl]

@JulianKingman

Thank you for offering to help out. I took a look at the 6.4.0 release notes, and based on the notes, the issue with clipPath property caching should be fixed. Unfortunately, the animation issue with VictoryLine and VictoryArea persists, so I need to do some more digging. If you would like to investigate as well, I would be happy for the help.

To clarify, the persisting issue with react-native-svg@^6.2.x is the following:

VictoryLine and VictoryArea components are rendered within a ClipPath. The width of the ClipPath starts at zero for animating components and then expands so that the components appear to curtain in. In newer versions of react-native-svg the width is never updated, so the components never appear.

[boygirl]

I've made a small PR to react-native-svg that fixes the issue for ios:
https://github.com/react-native-community/react-native-svg/pull/741

[boygirl]

@sibelius @JulianKingman @esutton

The clipPath caching issue that was preventing victory-native from working correctly with recent versions of react-native-svg hav been corrected in [email protected]