Mixing async with the imperative canvas (createPicture & canvas.drawImage)

[Kyle-Mendes]

const drawImage = async (canvas) => {
  const data = await Skia.Data.fromURI('https://picsum.photos/500/500');
  const image = Skia.Image.MakeImageFromEncoded(data);
  canvas.drawImage(image, 0, 0); // crash
}

const Canvas = ({imageSrc}) => {
  const picture = React.useMemo(
    () =>
      createPicture(
        (canvas: SkCanvas) => { // if i make this function async, the device crashes.
          // If I put anything async in here, the device crashes.
          canvas.drawText('hello world'); // this is fine, not async.
          drawImage(canvas);
        },
        {x: 0, y: 0, width: 500, height: 500}
      ),
    [image, activity, user]
  );

  return (
    <Canvas style={{width: 500, height: 500}}>
      <Picture picture={picture} />
    </Canvas>
  );
};

I'm trying to make the ability to render dynamic images when using the imperative api for off-screen rendering. However, I can't find a way to make it so I can pass images by URL instead of requiring SkImages up front. If there's any async (or Promise even) in the chain after createPicture is called, the app will crash.

The error that we get in XCode is EXC_BAD_ACCESS which I think is caused by the memory shifting during the async call and we're trying to access memory addresses that we no longer have access to.

Does anyone know a good way to handle this? Thanks

[louix]

I'm not sure you can do async inside, but you can do your async stuff outside, e.g:

import * as skia from "@shopify/react-native-skia";
import React, { useEffect, useMemo, useState } from "react";
import { Button } from "react-native";

const fetchNewImage = async () => {
  const data = await skia.Skia.Data.fromURI('https://picsum.photos/500/500');
  const image = skia.Skia.Image.MakeImageFromEncoded(data);
  if (image == null) {
    throw new Error('Could not create image from data');
  } else {
    return image;
  }
}

export const App = () => {
  const [image, setImage] = useState<skia.SkImage | null>();

  useEffect(() => {
    fetchNewImage().then(setImage) // fetch first image here
  }, []);

  const picture = useMemo(
    () =>
      skia.createPicture(
        { x: 0, y: 0, width: 500, height: 500 },
        (canvas) => {
          if (image != null) {
            const paint = skia.Skia.Paint();
            paint.setColor(new Float32Array([1, 0, 0, 1]));
            canvas.drawImage(image, 0, 0);
            canvas.drawRect({ x: 50, y: 50, width: 50, height: 50 }, paint);
          }
        },
      ),
    [image] // rerun every time there is a new image
  );


  return (
    <>
      <skia.Canvas style={{ width: 500, height: 500 }}>
        <skia.Picture picture={picture}/>
      </skia.Canvas>
      <Button onPress={() => {
        fetchNewImage().then(setImage)
      }} title="Fetch new image"/>
    </>
  );
};

export default App;