How to render multiple images?

[jeremiahlachica]

I have base64 images and would like to render these images inside the canvas. Is this possible?

const Component = () => {
       return  <Canvas style={{ flex: 1}} ref={ref} onTouch={onTouch}>
          {base64Images.map((base64) => {
            const uri = `data:image/jpeg;base64,${base64}`;
            const image = useImage(uri);
            
            return (
              <Image
                image={image}
                fit="contain"
                x={0}
                y={0}
                width={256}
                height={256}
              />
            );
          })}
        </Canvas>
};
 

I'm getting this error though:
Error: Rendered more hooks than during the previous render.

[ryskin]

I think "Error: Rendered more hooks than during the previous render." is not about Skia. You shouldn't use a hook inside map. Make a new component then use it in the map. Google about the rule of hooks

{base64Images.map((base64) => <BaseImage base64={base64} />

[ryskin]

chatGTP

The problem here is that you're using the useImage hook inside a loop (base64Images.map()). React Hooks must be called in the exact same order in every component render, and you can't call Hooks inside loops, conditions, or nested functions. This ensures that the Hooks are always in the same order so that React can preserve the state between multiple useState and useEffect calls.

[jeremiahlachica]

I think "Error: Rendered more hooks than during the previous render." is not about Skia. You shouldn't use a hook inside map. Make a new component then use it in the map. Google about the rule of hooks

{base64Images.map((base64) => <BaseImage base64={base64} />

Thank you. This works.