Victory-native: Animations become exponentially slower based on the number of charts on the page

[phunkren]

Bugs and Questions

Checklist

• [x] This is a victory-native specific issue. (Issues that _also_ appear in victory should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of victory-native

• [x] I have checked to make sure that my versions of react-native and react-native-svg are compatible with this version of victory-native. Read about version requirements

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Describe the issue you're seeing, and what you expect the behaviour to be.

Requirements:
I am trying to display a number of charts on a FlatList board on React Native, and would like them to animate when they first load in.

Current Behaviour:
If I load a single chart the animation triggers instantly and is smooth as expected (see the screen grabs below). However, as soon as I start to add in additional charts there is an exponentially increasing delay on the chart animations triggering and the quality of the animation itself also diminishes.

I tried to add the initialNumToRender prop to the FlatList thinking it would animate the initial charts before rendering new cards, but the animations do not trigger until all cards have rendered. It feels like there is an animation queue for each chart on the page, and won't trigger any animations until all the charts are ready.

I tested with inline styles over styled components and spotted a noticeable increase in performance. However, a delay still exists which leads me to believe there is more to this problem than changing my style implementation.

Expected Behaviour:
I'm using a very small mock dataset. The animations should trigger instantaneously and should be as smooth as it is on storybook, regardless of the number of charts on the page.

ScreenGrabs:

• Single Chart
  

• Multiple Charts
  

Code Repository:

https://github.com/AndrewJDick/native-victory-sandbox

[boygirl]

@AndrewJDick thank you for the detailed write up and reproduction. We recently completed a performance audit for this project, but the results were sort of disappointing. You can read the results here: https://github.com/FormidableLabs/victory-native/issues/369. We will continue looking for ways to improve, but we haven't identified anything actionable yet.

[jacobrosenskold]

@boygirl Does the animations use native driver or is everything run on the js thread?

[boygirl]

Animations are all JS

[luongs3]

you should name this package "Victory JS" instead of "Victory Native"

[ryan-roemer]

@luongs3 -- A pull request that seamlessly integrates native animations would be most welcome from you!

As I'm sure you can guess, we've heavily invested extensive resources into both victory-native and the underlying victory family of libraries and rely on the community to fill in and organically prioritize the things that are often unable to get to with our world of competing open source obligations. Looking forward to your (as well as anyone else's) help on this issue that can pitch in!