Large data set animation lag

The line chart starts to drop some frames if the data set gets large on iOS. Under 45 items never drops frames. Under 55 is pretty reliable, but occasionally will. Once you get over 70, it’s consistently dropping frames on the UI thread when animating. I wonder if there could be optimizations for this.

Possible ideas:

• Investigate the fastest way to do a for loop, since we’re looping through lots of data (for (let i = 0) vs .map)
• Could we turn the data array into a shared value under the hood?
• Since parse(path) gets used in a few places, maybe we should offload that to the provider to reduce the number of times it gets calculated.
• Fork the redash helpers and try to optimize them if possible.

These are just a few off-hand ideas. I would have to do more digging.

[nandorojo]

Relevant: https://github.com/software-mansion/react-native-reanimated/issues/1302

Also: https://github.com/sbycrosz/d3-interpolate-path/tree/feat/react-native-reanimated-support

[jxom]

Been investigating making data a shared value under the hood. Seems like this problem is really not trivial as reanimated doesn’t really have first-class support for external library imports. We would probably have to find a way to convert libraries such as d3-scale and d3-shape to be worklet compatible. Will probably need a bit more time to look into this one.