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

[dani-benet]

Description

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

it.works.on.iOS.mp4

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.

on.Android.no.mp4

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
  }

[wcandillon]

@WoLewicki it looks like RN SVG is using a type of view that we are not handling there: https://github.com/Shopify/react-native-skia/blob/main/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java#L123

We handle SurfaceView and TextureView, but maybe RN SVG is using something else?

[WoLewicki]

Hmm, react-native-svg views extend ReactViewGroup: https://github.com/software-mansion/react-native-svg/blob/acd29d74682f04a53336b716dec0e98af8d0fa01/android/src/main/java/com/horcrux/svg/SvgView.java#L37, https://github.com/software-mansion/react-native-svg/blob/acd29d74682f04a53336b716dec0e98af8d0fa01/android/src/main/java/com/horcrux/svg/VirtualView.java#L32.

We override onDraw: https://github.com/software-mansion/react-native-svg/blob/acd29d74682f04a53336b716dec0e98af8d0fa01/android/src/main/java/com/horcrux/svg/SvgView.java#L125 so this might be not handled properly by react-native-skia? Not sure though.

[wcandillon]

Thanks this is very helpful. If gre/react-native-view-shot handles it well, we will be able to do it as well: https://github.com/gre/react-native-view-shot/blob/master/android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java

[WoLewicki]

I'd guess react-native-svg views propably go here:

react-native-skia/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java

Line 86 in aadd424

if (view instanceof ViewGroup) {

and then here:

react-native-skia/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java

Lines 110 to 114 in aadd424

	Class[] cArg = new Class[1];
	cArg[0] = Canvas.class;
	Method method = ReactViewGroup.class.getDeclaredMethod("dispatchOverflowDraw", cArg);
	method.setAccessible(true);
	method.invoke(group, canvas);

and I think it is not the proper way.

[ersincakmak]

I am facing same issue, any update?