[WIP] Fix element screenshots for react-native-skia and similar

detox/android/detox/src/main/java/com/wix/detox/espresso/action/ViewScreenshot.kt

@@ -3,7 +3,9 @@ package com.wix.detox.espresso.action
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.util.Base64
+import android.view.TextureView
 import android.view.View
+import android.view.ViewGroup
 import java.io.ByteArrayOutputStream
 
 class ScreenshotResult(private val bitmap: Bitmap) {
@@ -18,9 +20,36 @@ class ScreenshotResult(private val bitmap: Bitmap) {
 }
 
 class ViewScreenshot() {
+    /**
+     * Texture views do not support to drar themselves. To still capture them for a screenshot
+     * we have to traverse and render them manually. Some libraries like react-native-skia use them.
+     */
+    fun drawTextureViews(view: View, canvas: Canvas) {
+        if (view is TextureView) {
+            val viewBitmap = Bitmap.createBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
+            view.getBitmap(viewBitmap)
+            canvas.drawBitmap(viewBitmap, 0f, 0f, null)
+        } else if (view is ViewGroup) {
+            for (i in 0..(view.getChildCount() - 1)) {
+                val childContainerPos = view.getChildDrawingOrder(i)
+                val childView = view.getChildAt(childContainerPos)
+
+                val left = childView.left.toFloat()
+                val top = childView.top.toFloat()
+
+                canvas.translate(left, top);
+                this.drawTextureViews(childView, canvas)
+                canvas.translate(-left, -top);
+            }
+        }
+    }
+
     fun takeOf(view: View): ScreenshotResult {
         val bitmap = Bitmap.createBitmap(view.width, view.height, Bitmap.Config.ARGB_8888)
-        view.draw(Canvas(bitmap))
+        val canvas = Canvas(bitmap)
+
+        view.draw(canvas)
+        this.drawTextureViews(view, canvas)
 
         return ScreenshotResult(bitmap)
     }

detox/test/package.json

@@ -38,6 +38,7 @@
     "@react-native-community/slider": "4.5.0",
     "@react-native-picker/picker": "^2.1.0",
     "@react-native-segmented-control/segmented-control": "2.3.0",
+    "@shopify/react-native-skia": "^1.2.3",
     "moment": "^2.24.0",
     "react": "18.2.0",
     "react-native": "0.73.2",

detox/test/src/Screens/CanvasScreenshotScreen.js

@@ -0,0 +1,76 @@
+import { Canvas, Rect } from "@shopify/react-native-skia";
+import React, { Component } from 'react';
+import { View, Dimensions, TouchableHighlight } from 'react-native';
+
+const screenWidth = Dimensions.get('window').width;
+const screenHeight = Dimensions.get('window').height;
+
+class ArtisticRectangle extends Component {
+  static defaultProps = {
+    borderSizeV: 12,
+    borderSizeH: 12,
+  }
+
+  render() {
+    const paddingHorizontal = this.props.borderSizeH;
+    const paddingVertical = this.props.borderSizeV;
+    return (
+      <View testID={this.props.testID}>
+        <View style={{paddingHorizontal, paddingVertical, backgroundColor: 'cyan'}}>
+          <View style={{paddingHorizontal, paddingVertical, backgroundColor: 'magenta'}}>
+            <View style={{paddingHorizontal, paddingVertical, backgroundColor: 'yellow'}}>              
+              <Canvas
+                style={{ paddingHorizontal, paddingVertical }}
+                onLayout={(e) => {
+                  //setSize({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height });
+                }}>
+                <Rect x={0} y={0} width={10} height={10} color={'black'} />
+              </Canvas>
+
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default class CanvasScreenshotScreen extends Component {
+  static orientations = {
+    'vertical': {
+      borderSizeH: 12,
+      borderSizeV: screenHeight * 0.9 / 8,
+    },
+    'horizontal': {
+      borderSizeH: screenWidth * 0.9 / 8,
+      borderSizeV: 12,
+    }
+  };
+
+  constructor(props) {
+    super(props);
+    this.switchOrientation = this.switchOrientation.bind(this);
+
+    this.state = {
+      orientation: 'vertical',
+    };
+  }
+
+  render() {
+    const { borderSizeH, borderSizeV } = CanvasScreenshotScreen.orientations[this.state.orientation];
+
+    return (
+      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+        <TouchableHighlight testID='switchOrientation' onPress={this.switchOrientation}>
+          <ArtisticRectangle testID='fancyElement' borderSizeH={borderSizeH} borderSizeV={borderSizeV} />
+        </TouchableHighlight>
+      </View>
+    );
+  }
+
+  switchOrientation() {
+    this.setState({
+      orientation: this.state.orientation === 'vertical' ? 'horizontal' : 'vertical',
+    });
+  }
+}

detox/test/src/Screens/index.js

@@ -24,6 +24,7 @@ import PickerViewScreen from './PickerViewScreen';
 import DeviceScreen from './DeviceScreen';
 import OverlayScreen from './OverlayScreen';
 import ElementScreenshotScreen from './ElementScreenshotScreen';
+import CanvasScreenshotScreen from './CanvasScreenshotScreen';
 import VirtualizedListStressScreen from './VirtualizedListStressScreen';
 import WebViewScreen from './WebViewScreen';
 import VisibilityExpectationScreen from './VisibilityExpectationScreen';
@@ -59,6 +60,7 @@ export {
   DeviceScreen,
   OverlayScreen,
   ElementScreenshotScreen,
+  CanvasScreenshotScreen,
   WebViewScreen,
   VirtualizedListStressScreen,
   VisibilityExpectationScreen,

detox/test/src/app.js

@@ -116,7 +116,11 @@ export default class example extends Component {
         {this.renderScreenButton('Drag And Drop', Screens.DragNDropScreen)}
         {isIos && this.renderScreenNotifyingButton_iOS('Custom Keyboard', 'customKeyboard')}
 
-        {this.renderScreenButton('Element-Screenshots', Screens.ElementScreenshotScreen)}
+        <View style={{flexDirection: 'row', justifyContent: 'center'}}>
+          {this.renderScreenButton('Element-Screenshots', Screens.ElementScreenshotScreen)}
+          {this.renderInlineSeparator()}
+          {isAndroid && this.renderScreenButton('Canvas-Screenshots', Screens.CanvasScreenshotScreen)}
+        </View>
 
         <View style={{flexDirection: 'row', justifyContent: 'center'}}>
           {this.renderScreenButton('Init URL', Screens.LaunchUrlScreen)}