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 ->

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
  }

[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: https://github.com/Shopify/react-native-skia/blob/aadd424a5a9be215fee5f400ae0029a0180ad367/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java#L86 and then here: https://github.com/Shopify/react-native-skia/blob/aadd424a5a9be215fee5f400ae0029a0180ad367/package/android/src/main/java/com/shopify/reactnative/skia/ViewScreenshotService.java#L110-L114 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

[Yurii-Lutsyk]

@WoLewicki Sorry, have u fixed this issue?

[WoLewicki]

Hey, @Yurii-Lutsyk, I haven't looked more into this issue unfortunately. One thing you may think of is if you really need react-native-svg when having many SVGs in the app, unless you need some control over parts of them. You can read more in this article: https://blog.swmansion.com/you-might-not-need-react-native-svg-b5c65646d01f.

If it's not the case for you, I'd try to dig more within the context from this reply.

[Yurii-Lutsyk]

@WoLewicki Thank you! I've actually already read you article (it's necessary), but it's not my case :(

[WoLewicki]

Ok sorry that I can't help more for now 😞

[Yurii-Lutsyk]

@WoLewicki Oh mate, you were absolutely right!!! I've added a fix and now it captures svg icons. Could you please check if I got your point correctly?

skia.patch

I don't know why this issues hasn't been fixed yet

[WoLewicki]

Great to hear that it works in your case! I for sure don't have enough context for this library to be able to decide if it is the proper way, I'd rather ask @wcandillon about his opinion. But for sure you can start with testing it in your use cases to gain some confidence that it might be the proper way 👏

[Yurii-Lutsyk]

I haven't spot any issues so far, hope it will work properly! @WoLewicki Thank you for the help!!!