Building an EPG interface

[evoactivity]

So I have a web based EPG interface that is built with canvas, an EPG is an electronic programme guide, something you'll have seen on any live tv service. I now have a need to port/rebuild this for react native. I would like to, as much as possible, have this run on the UI thread so I feel like skia might be my only option. I was considering using GCanvas for this, but that doesn't seem to run on the latest iOS, and I think I'd be rewriting a lot of it to make it work anyway.

A demo of my canvas implementation can be seen here (you might need to wait a moment as it loads the entire pluto.tv EPG which is a lot of data).

Now with Skia being built around react's component model I am left wondering how I might acheive similar experience, the imperative api would be a simpler thing to port to I think as it more closely matches how canvas works, but I believe that doesn't run on the UI thread (and the docs have been removed so not easy to know what I can and can't do). So I am wondering how I can build these features using the component model. I'm hoping someone can offer some guidance or ideas on how each of the below features might be acheivable with RN Skia.

1. Render loop. The canvas implementation uses a render loop, this acheives two things, it keeps the current view in sync with the current time and interpolated animations are easy, I just need to animate the xy offset numbers and the render loop takes care of everything else. The only way I can think of doing something similar here is keeping the current time and xy offset in react useState variables and updating them with requestAnimationFrame inside a useEffect. Is there a way to have this driven by reanimated instead so that happens in the UI thread? Otherwise I can see that potentially being a performance killer on low end devices with the entire component rerendering over and over.

2. Animations. As you navigate around the EPG it smoothly animates into it's new position. The state of the canvas is driven primarily by the x,y offset the user has scrolled to, so if we have {x: 500, y: 2000} we can decide which channels and programmes should be visible and draw them. Now because of the render loop when we interpolate between the current x,y and the new x,y this turns into a nice smooth animation, not disimilar to the exponential smoothing technique so as you tap up/down/left/right faster and faster it animates faster and faster and can be interupted without having to wait for current animations to complete. Now if there is a render loop, this should be easy, but if not how might I trigger these animations using reanimated and have them work in the same manner?

3. Sticky Text. As the programme titles reach the left edge of the EPG they stay in place until they run out of room. This is done on the canvas by measuring the text so we know how many pixels wide it is. Can text be measured in a similar way with Skia?

4. Caching. To keep things as jank free as possible I cache drawing operations where I can, hold the final drawing as bitmap data and when that thing needs to be redrawn I can just smash the bitmap data onto the canvas instead of drawing the whole thing from scratch. How might that be acheived in a Skia context?

I haven't started down this road yet but these are the things I think I am going to struggle with.