Rendering many images in infinite-canvas

[TupiC]

Hey, im trying to render 100+ images on an infinite canvas using react native skia. Performance is fine while panning, but when zooming out the UI thread’s framerate drops significantly. How can I render a large number of images while keeping things performant?

I need to preserve the full image resolution, so implementing LOD isn’t an option.

I'm rendering the canvas and images here:
infinite-canvas.tsx
Here's the full repo:
rn-skia-many-images

Thanks in advance for any help :)

many-images.mp4

[wcandillon]

can this API help: https://shopify.github.io/react-native-skia/docs/shapes/atlas/?

…

On Mon, Nov 17, 2025 at 12:18 PM TupiC ***@***.***> wrote: Hey, im trying to render 100+ images on an infinite canvas using react native skia. Performance is fine while panning, but when zooming out the UI thread’s framerate drops significantly. How can I render a large number of images while keeping things performant? I need to preserve the full image resolution, so implementing LOD isn’t an option. I'm rendering the canvas and images here: infinite-canvas.tsx <https://github.com/TupiC/rn-skia-many-images/blob/main/components/infinite-canvas.tsx> Here's the full repo: rn-skia-many-images <https://github.com/TupiC/rn-skia-many-images/tree/main> Thanks in advance for any help :) https://github.com/user-attachments/assets/0ba7e66f-9f3a-44ab-a3e9-a0840060a506 — Reply to this email directly, view it on GitHub <#3544>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVTIOEXL4LHU3UKW5H335GVIXAVCNFSM6AAAAACMKLEA2SVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZZGE2DQNRRGM> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[TupiC]

can this API help: https://shopify.github.io/react-native-skia/docs/shapes/atlas/?

Thanks for the fast answer..
Hm, I dont think so because each image has its own source/url or am I missing something there 🤔

[wcandillon]

note sure if it helps but we are documenting rendering modes here https://shopify.github.io/react-native-skia/docs/canvas/rendering-modes/

[TupiC]

note sure if it helps but we are documenting rendering modes here https://shopify.github.io/react-native-skia/docs/canvas/rendering-modes/

Thanks. Found a solution which works with the atlas api.. I replaced drawing each image separately with a single skia atlas where all images are packed once into one texture and then rendered via atlas transforms. If this helps anyone else who has a similar problem: repo

many-images-solution.mov