Canvas failing to paint the contents inside it

Description

Only on kiosk hardware device, when trying to render a single Canvas Component with some Path/React elements, it fails to paint, while adding a one more Canvas component i.e when rendering two Canvas at same time, it starts to work as expected.

Here are some native layer via displayed via adb logcat | grep -i skia

01-15 12:40:49.602 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27
01-15 12:40:49.802 18834 18834 I SkiaTextureView: Create SurfaceTexture
01-15 12:40:49.802 18834 18834 I SkiaTextureView: onSurfaceTextureAvailable:  1216x100
01-15 12:40:49.805 18834 18834 I SkiaTextureView: Create SurfaceTexture
01-15 12:40:49.805 18834 18834 I SkiaTextureView: onSurfaceTextureAvailable:  0x0
01-15 12:40:49.810 18834 18834 I SkiaTextureView: Create SurfaceTexture
01-15 12:40:49.810 18834 18834 I SkiaTextureView: onSurfaceTextureAvailable:  0x0
01-15 12:40:50.017 18834 18834 I SkiaTextureView: Create SurfaceTexture
01-15 12:40:50.017 18834 18834 I SkiaTextureView: onSurfaceTextureAvailable:  0x0
01-15 12:40:50.025 18834 18834 I SkiaTextureView: onSurfaceTextureSizeChanged:  1216x100
01-15 12:40:50.027 18834 18834 I RNSkia  : updateAndRelease() failed. The exception above can safely be ignored
01-15 12:40:50.028 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27
01-15 12:40:50.051 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27
01-15 12:40:57.231 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27
01-15 12:40:57.239 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27
01-15 12:40:57.323 18834 18834 I RNSkia  : EGL Error: Bad Surface (12301) in /Users/vishpatil/Downloads/repos/rippling-kiosk-time-clock/node_modules/@shopify/react-native-skia/android/cpp/rnskia-android/gl/Surface.h:27

React Native Skia Version

1.6.0

React Native Version

0.76.7

Using New Architecture

• Enabled

Steps to Reproduce

Issues is reproduce only on custom kiosk hardware device, with single Canvas Component containing any simple Paths/Rect element.

Snack, Code Example, Screenshot, or Link to Repository

Doesn't work

import React from 'react';
import { Canvas, Rect } from '@shopify/react-native-skia';

const ExampleComponent = () => {

  return (
      <Canvas style={{ height: 400, width: 400 }}>
        <Rect x={0} y={0} width={256} height={256} color='lightblue' />
      </Canvas>
  );
};

Works as expected

import React from 'react';
import { Canvas, Rect } from '@shopify/react-native-skia';

const ExampleComponent = () => {
  return (
    <>
      <Canvas style={{ height: 400, width: 400 }}>
        <Rect x={0} y={0} width={256} height={256} color='lightblue' />
      </Canvas>
      <Canvas>
        <></>
      </Canvas>
    </>
  );
};

Reproduce the minimal single-Canvas example on the custom kiosk hardware and collect the adb logcat output, focusing on SkiaTextureView surface availability and the Surface.h EGL errors. Compare the single-Canvas and two-Canvas cases; done means the single Canvas paints its Rect reliably without Bad Surface errors.