Offscreen - drawAsImage throws error

[ngothanhtai]

Description

Using drawAsImage throw errors:

root.dom.render is not a function.

Screenshot attached:

Version

0.1.173

Steps to reproduce

Run this code

import { drawAsImage, Circle } from '@shopify/react-native-skia';

const width = 100;
const height = 100;
const r = width / 2;
const snapshot = drawAsImage(
    <Circle r={r} cx={r} cy={r} color="lightblue" />, 
    width, 
    height
);
if (!snapshot) {
    throw new Error('Could not render images, please try again!');
}

[wcandillon]

We can confirm the issue. Currently you will need to use the imperative API if you want to perform offscreen drawing. I wrote some details about this at https://github.com/Shopify/react-native-skia/discussions/1359#discussioncomment-4983561

We will keep this issue open.

[danturu]

@wcandillon any updates?

[wcandillon]

no update there unfortunately, can you tell us more about your use-case?

[mrpmohiburrahman]

hi @wcandillon We are currently developing a feature involving a series of components, each comprising a mask and a thumbnail image, within a FlatList. We want to capture screenshots of each component when a user exits the individual component view. However, due to the small size of these elements, we are facing challenges in capturing high-quality screenshots.

This has led us to explore offscreen screenshots ( drawAsImage ). Could you assist us in refactoring the following code to utilize the imperative API you've previously mentioned?

<Canvas ref={viewRef} style={{ height, width }}>
  <Mask
    mode="luminance"
    clip={true}
    mask={<SkImage fit="cover" image={piece_mask} x={0} y={0} width={width} height={height}></SkImage>}>
    <SkImage fit="cover" image={thumbnail} x={0} y={0} width={width} height={height} />
  </Mask>
</Canvas>

[pycxxx]

@wcandillon I can't find a way to draw shaders via the imperative API. Do you have any suggestions?

[Yooooomi]

We have an annotation tool where each component of the annotation can return Skia components JSX put inside the canvas. We set the background as the image we want to annotate. Each tool has its own logic and few shared values to keep the whole annotation real time.

At the end of the annotation, we want to export a snapshot that has the side of the background image, thus needing the drawAsImage API. Unfortunately it does not work. It compels us to have an output image relative to the size of the screen that annotated and not the input image.

[wcandillon]

This is finally fixes part of #2162