Skia canvas not showing up in Detox element screenshots

[wesselvantilburg]

Problem

We are working on creating automatic screenshots of our app using Detox e2e testing.
While Detox's takeScreenshot() method works for full screen screenshots, it does not work well with element based screenshots. (In combination with a Skia canvas)

See example

This element should show Skia Images

Expected behaviour

The Skia canvas with it's elements should show up when taking screenshots of elements using Detox.

Question

Is this issue Skia related or is this an issue with Detox and the way they take screenshots of elements?

[wcandillon]

Can you confirm that this only happens on Android? On a private project we had a similar issue on Android. They essentially where getting the bitmap of the android view without taking TextureViews into account (which what React Native Skia uses). If this is the case, we can try to identify which part of Detox runs this code and make a suggestion on how to fix on Github.

This is an issue on both platform, could it be related to a GPU backend not being available when running the tests (e.g CI system).

[wesselvantilburg]

Was hoping that would be an easy fix, but that wasn't the issue. The elements I was screenshotting were already visible for quite a bit before I took the screenshots.

[wesselvantilburg]

I'm not completely sure how Detox makes the element based screenshots and how that works differently from their normal full screen screenshots.

[wcandillon]

I think it would be interesting to know if the issue happens on Android as well and then contact the Detox team to get more details on how element screenshot is done internally. you can cc me to it.

[wesselvantilburg]

Will do! 👌 Thank you for the help and quick responses already!

[mauricedoepke]

I opened an issue on the detox repo for this:
wix/Detox#4489

[mauricedoepke]

I am working on a pr to fix this in Detox and already have some working code for android in a local branch

The detox test app which I need to extend for an e2e test case is made with pure react-native, no expo.
When installing skia to create a test case I encounter this error:

error node_modules/@shopify/react-native-skia/lib/module/specs/SkiaPictureViewNativeComponent.js: /Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@shopify/react-native-skia/lib/module/specs/SkiaPictureViewNativeComponent.js: Could not find component config for native component.
Error: /Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@shopify/react-native-skia/lib/module/specs/SkiaPictureViewNativeComponent.js: Could not find component config for native component
    at throwIfConfigNotfound (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/error-utils.js:285:11)
    at findComponentConfig (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:896:3)
    at buildComponentSchema (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/flow/components/index.js:24:32)
    at buildSchemaFromConfigType (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:462:34)
    at buildSchema (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:526:10)
    at FlowParser.parseString (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/codegen/lib/parsers/flow/parser.js:134:12)
    at parseFile (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/babel-plugin-codegen/index.js:36:23)
    at generateViewConfig (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/babel-plugin-codegen/index.js:49:18)
    at PluginPass.exit (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/babel-plugin-codegen/index.js:169:32)
    at newFn (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/visitors.js:160:14)
    at NodePath._call (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/path/context.js:90:8)
    at TraversalContext.visitQueue (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/context.js:89:16)
    at TraversalContext.visitSingle (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/context.js:112:19)
    at traverseNode (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/traverse/lib/index.js:52:34)
    at transformFile (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/core/lib/transformation/index.js:82:31)
    at transformFile.next (<anonymous>)
    at run (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at /Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/core/lib/transform-ast.js:23:33
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/gensync/index.js:251:28)
    at sync (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at transformFromAstSync (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@babel/core/lib/transform-ast.js:43:83)
    at Object.transform (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/@react-native/metro-babel-transformer/src/index.js:216:7)
    at transformJSWithBabel (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/metro-transform-worker/src/index.js:287:45)
    at Object.transform (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/metro-transform-worker/src/index.js:412:18)
    at transformFile (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/metro/src/DeltaBundler/Worker.flow.js:54:36)
    at Object.transform (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/metro/src/DeltaBundler/Worker.flow.js:30:10)
    at execFunction (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/jest-worker/build/workers/processChild.js:149:17)
    at execHelper (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/jest-worker/build/workers/processChild.js:137:5)
    at execMethod (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/jest-worker/build/workers/processChild.js:140:5)
    at process.messageListener (/Users/maurice-pascaldopke/Desktop/projects/Detox/detox/test/node_modules/jest-worker/build/workers/processChild.js:44:7)
    at process.emit (node:events:517:28)
    at emit (node:internal/child_process:944:14)

This error comes up from just installing rn skia and adding a simple example page. Without skia, the app compiles fine:
wix/Detox@e2cd1b0

With google I only found this similar error:
react-native-webview/react-native-webview#3233
But rn skia already has the react-native field, that was mising in that project.

Unfortunately I have no experience on how rn native modules are working and due to the lack of google results I somewhat reached a dead end here.

Do you have any hints or ideas for me on how to proceed with this @wcandillon ?