Web app crashes on Image update

[luizv]

Description

When trying to update image prop passed to ReactNativeSkia.Image component, it crashes with the error:

Cannot pass deleted object as a pointer of type sk_sp

Version

1.2.3

Steps to reproduce

1. On React Native Skia building for web, implement a simple image picker.

import { useState } from "react";
import { Button, View, StyleSheet } from "react-native";
import * as ImagePicker from "expo-image-picker";
import { CanvasComponent } from "./CanvasComponent";

export default function PickerComponent() {
  const [image, setImage] = useState<string | null>(null);

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: false,
      aspect: [2, 4],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />
      {image && <CanvasComponent imageSource={image} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
});

2. When selecting a new image, updates it on a Skia Image inside an Skia Canvas.

import { Canvas, Image, useImage } from "@shopify/react-native-skia";

interface CanvasComponentProps {
  imageSource: string;
}
export const CanvasComponent = ({ imageSource }: CanvasComponentProps) => {

  const image = useImage(imageSource);

  return (
    <Canvas
      style={{
        backgroundColor: "red",
        width: 500,
        height: 500,
        alignContent: "center",
      }}
    >
      <Image 
        image={image}
        fit="cover"
        width={500}
        height={500} />
    </Canvas>
  );
};

3. Updating the Image a couple times will crash the app on web with a error:

Cannot pass deleted object as a pointer of type sk_sp

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@xluizv/skia-update-image-bug

(At Snack I couldn't make the setup for running react-native-skia on the web, thought the code is there and working with iOS at least)

[doctordru]

I found a solution to this problem, which is to use the lower level API to create the image. Here's an example for that code

import axios from 'axios'
import { Skia } from '@shopify/react-native-skia'

const response = await axios.get(url, {
        responseType: 'arraybuffer',
      })
const base64 = Buffer.from(response.data, 'binary').toString('base64')
const data = Skia.Data.fromBase64(base64)
const image = Skia.Image.MakeImageFromEncoded(data)
return image

I wrapped this in a react-query query in my codebase so that it's cached and it's removed the deleted reference error. Hope this helps @luizv

[wcandillon]

@doctordru could you provide more context if it's something we could solve on our side?