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?

[arihirsch]

Hi,

Having same issue here. Curious if anyone is working on this issue or if I should try and find a work around?

[bigriot]

Facing same issue trying to capture views containing SVG. Wondering if this is being worked on or anyone has found a workaround? Works fine on iOS but problematic on Android.

[Ayrow]

I am having the same issue. I need to get a snapshot of a view that contains an SVG. Only issue here is the SVG not being displayed on the Android snapshot. Do we have any more info? Or any workaround to make it work?

[Bruce-zxy]

Same issue, any update?

[kkx64]

Same issue

[dawidzawada]

Same +1

"expo": "52.0.27",
"@shopify/react-native-skia": "^1.12.4",
"react-native-svg": "^15.11.2",

[hiepkay]

After a day, I found a workaround—converting the SVG with Skia.Path.MakeFromSVGString—and it works perfectly.
This tutorial video from @wcandillon: https://youtu.be/5yM4NPcTwY4?si=It0zPSPw9r-1vEz1

[hirvesh]

• 1 - facing the same issue.

[Yurii-Lutsyk]

I'm facing same issue, and can't fix it :(
@wcandillon Is there any chance to check it?
I have a lot of icons on screen and can't replace all of them