FlatList Performance with every item having a Canvas inside

[nofacez]

I have a flat list of instagram-like post with every post having a different background that has been built using a colored rn-skia canvas and some blurred ellipses. The list is, let's say, endless and adds new items using pagination. What should I do to make the list performance better? With this setup it devours the device's RAM until the app crashes.

I will prepare a demo project asap, but maybe someone has something on their mind or has dealt with similar stuff.

[heitorrubira]

Hey @nofacez,

I would suggest to you to save the result as image and show this image instead a Canvas element. You can also have different image sizes, like:

• 128x128 pixes to load first or in a poor connection situation.
• 2048x2048 pixes or something like this to the moment when the user scrolls to this point and this image should be shown.

The important idea here is the lazy loading and improve performance, so regular image will help to achieve this, and only load the Canvas. if you want to show an effect or animation.

I believe Skia is should be used to perform some basic image editing in a Instagram like App, like when you are sharing a new picture and you go through the process to apply some effects and want to show the result in real-time, then you can use the take the snapshot function to get the result and upload, here you can find a example:

const ref = useCanvasRef();
  useEffect(() => {
    setTimeout(() => {
      // you can pass an optional rectangle
      // to only save part of the image
      const image = ref.current?.makeImageSnapshot();
      if (image) {
        // you can use image in an <Image> component
        // Or save to file using encodeToBytes -> Uint8Array
        const bytes = image.encodeToBytes();
      }
    }, 1000)
  });
  return (
    <Canvas style={{ flex: 1 }} ref={ref}>
      <Circle r={128} cx={128} cy={128} color="red" />
    </Canvas>
  );