SVG's from react-native-svg don't appear in skia snapshots (makeImageFromView) only Android

dani-benet commented 1 month ago

Description

I'm creating a popper-like component that snapshots a component and puts the image in top of a dark overlay ->

https://github.com/user-attachments/assets/2ffd3699-2b08-4d1a-9711-ddb1cde2c4a2

But I'm facing an issue on Android where the SVG's created using react native reanimated are not shown in the snapshots. See on the next video the cursor on the top-left disappears.

https://github.com/user-attachments/assets/e85e7e68-b5db-4003-879d-b862606cedcd

Version

1.3.9 and also tried it on 1.2.3

Steps to reproduce

Make a snapshot of any svg in Android and it doesn't work.

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

I've managed to reproduce the issue with this sample code

import {
  Canvas,
  Image,
  makeImageFromView,
  SkImage,
} from "@shopify/react-native-skia"
import { useRef, useState } from "react"
import { Button, View } from "react-native"
import Close from "~assets/icons/close.svg"

const Home = () => {
  const ref = useRef<View>(null)
  const [snapshot, setSnapshot] = useState<SkImage | null>(null)

  const handleImageCreation = async () => {
    const _snapshot = await makeImageFromView(ref)
    setSnapshot(_snapshot)
  }

  return (
    <View style={{ alignItems: "center", justifyContent: "center", flex: 1 }}>
      <View ref={ref} collapsable={false}>
        <Close style={{ height: 40, width: 40 }} />
      </View>
      {snapshot && (
        <Canvas style={{ height: 40, width: 40 }}>
          <Image image={snapshot} x={0} y={0} width={40} height={40} />
        </Canvas>
      )}
      <Button onPress={handleImageCreation} title="Create Image" />
    </View>
  )
}

on iOS it's visible but not on Android

iOS	Android

To render the svg I use the react-native-svg library

  declare module "*.svg" {
    import React from "react"
    import { SvgProps } from "react-native-svg"
    const content: React.FC<SvgProps>
    export default content
  }