Optimizing Performance for Lazy Loading Shapes

[Celfyn]

Hello,

I'm currently working on a timeline component inspired by 'The History of Everything' app https://github.com/2d-inc/HistoryOfEverything

My current simplified and stripped back implementation can be found here: https://gist.github.com/celfyn/dcee84d08102e3cc53be1828cd652caf.

I've utilized a pan gesture surrounding the canvas. On user swipe, the app calculates the visible items and subsequently repopulates the shapes array. While this method works, performance deteriorates when a substantial amount of shapes need to be rendered.

One workaround I considered was to move the calculations from the ‘onActive’ to the 'onEnd' method, thereby limiting rendering to once per pan. However, my goal is to achieve a seamless and smooth scrolling effect.

Being relatively new to React Native and the library, I'd appreciate any advice or suggestions to improve performance. Whether it's a different approach to lazy loading, or any best practices I should adopt.

Thanks for your time.

[wcandillon]

This is very interesting. By gut feeling recommendation based on the code you share is to absolutely not do any virtualisation your self.
I can see how the code you shared could be much slower than the virtualised example.

Once you draw the complete scene, if it is too slow, there is a lot we can do to optimize for the non visible parts but it should be done using Skia APIs not on the React side.

We haven't look at such an example yet so take this advice with a grain a salt but this would be my recommendation.