[Performance Issue] Pool Performance on UI FPS on iOS only with victory-native VictoryArea animating.

[ATShiTou]

I made a animated VictoryArea like this:

Watch the UI FPS ,please . The animation is bad. But it is much better on Android.

Anyone can help me? Thank you in advance.

dependencies:

"react-native": "0.55.4",
"react-native-svg": "^6.5.2",
"victory-native": "^0.17.4"

[msand]

Optimally, someone would implement support for animating string props in react-native using the native animated driver, I started work on it but not currently putting any time/effort into it, that should allow speeding up lots of animations with the flip of a switch.

But in this case, it seems from the gif that the same effect could be achieved using a static chart and a react-native animated view with white background, which starts out covering the entire chart and slides out to the right.

This way, it only needs to render the svg once, and then animate the x position of a white rectangle view using native animation and the simplest possible logic; which should be able to achieve 60fps easily, if it is at all possible to get 60fps using react-native with the specific hardware and operating environment in question.

[ATShiTou]

@msand Thank you.

I have already done that as you say to resolve this issue in this case. But not work in some other case.

Thank you again.

[rodrigoelp]

Hi @ATShiTou, alternatively, you could create a clipping mask that reveals the chart underneath (so you don't have to animate the paths, just a rectangle that grows to the width of the device (or height, depending on the orientation)

[ATShiTou]

Thank you for your advice, I will have a try.

[msand]

I've done some more work on native animation: #757
Any help in testing would be much appreciated 😄