Reusing resources for rendering pictures

[ekrembk]

Hey everyone,

I am developing a chart library for trading applications using Skia. Candlesticks, lines, text labels etc. When the chart is panned or pinched, y-scale changes. So almost everything needs to be drawn. I've added a video below that simulates pinches and pans to test performance.

Currently, I have a <Picture /> component and whenever one of the shared values (translateX, scale) change, I call beginRecording on a shared PictureRecorder, draw everything, call finishRecordingAsPicture() and assign generated picture to a shared value which is tied to <Picture />. I use useAnimatedReaction for this. Performance is already much better than acceptable but I am not really experienced on Skia and see thousands of small allocations which probably slow things down.

I wanted to ask if there are things I need to be careful in a setup like this to make sure I don't make easy mistakes. I do things like reusing rect/paint objects and call rewind on a shared SkPath instance instead of making a new path on every render.

Thanks!

https://github.com/Shopify/react-native-skia/assets/1821107/9b5811c1-ea7e-468d-8482-4c8ecc6cde07