Holes have black background on android devices in react native 0.77.0

[Kadir-flipcause]

During our recent upgrade of React Native from version 0.75.2 to 0.77.0, we observed that some views in the app are unexpectedly displaying with a dark background color, even though we haven't explicitly enabled or configured dark mode styling in those components.

But with IOS its working fine

[Kadir-flipcause]

Hey @stephenkopylov can you please help me.

[stephenkopylov]

Sorry @Kadir-flipcause , unfortunately, we don’t have enough time to maintain this library on a regular basis. So if you’re able to fix the issue, feel free to submit a PR.

[chavanRk]

I also got the same issue,

It was working fine on RN 0.74 but when updated to 0.78 highlighted part got blackened.

[kaaninan]

diff --git a/node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt b/node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt
index ec18da3..e915496 100644
--- a/node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt
+++ b/node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt
@@ -66,6 +66,8 @@ class RNHoleView(context: Context) : ReactViewGroup(context) {
 
     private var mHolesPath: Path? = null
     private val mHolesPaint: Paint
+    private var mLocalBitmap: Bitmap? = null
+    private var mLocalCanvas: Canvas? = null
 
     init {
         this.setLayerType(View.LAYER_TYPE_HARDWARE, null)
@@ -176,18 +178,40 @@ class RNHoleView(context: Context) : ReactViewGroup(context) {
         mHoles.addAll(holes)
     }
 
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        if (mLocalBitmap != null) {
+            mLocalBitmap!!.recycle()
+            mLocalBitmap = null
+        }
+    }
+
     override fun onDraw(canvas: Canvas) {
         super.onDraw(canvas)
-        if (mHolesPath != null) {
-            canvas?.drawPath(mHolesPath!!, mHolesPaint)
-        }
     }
 
     override fun dispatchDraw(canvas: Canvas) {
-        super.dispatchDraw(canvas)
+        if (width <= 0 || height <= 0) {
+            super.dispatchDraw(canvas)
+            return
+        }
+
+        if (mLocalBitmap == null || mLocalBitmap!!.width != width || mLocalBitmap!!.height != height) {
+            if (mLocalBitmap != null) {
+                mLocalBitmap!!.recycle()
+            }
+            mLocalBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+            mLocalCanvas = Canvas(mLocalBitmap!!)
+        }
+
+        mLocalCanvas!!.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
+        super.dispatchDraw(mLocalCanvas!!)
         if (mHolesPath != null) {
-            canvas?.drawPath(mHolesPath!!, mHolesPaint)
+
+            mLocalCanvas!!.drawPath(mHolesPath!!, mHolesPaint)
         }
+
+        canvas.drawBitmap(mLocalBitmap!!, 0f, 0f, null)
     }
 
     private fun isTouchInsideHole(touchX: Int, touchY: Int): Boolean {

This patch worked for me.

[Kadir-flipcause]

@kaaninan I'll check, Thanks for your help

[vikrantnegi]

Not working on 0.79.2 as well. Any workaround that is working

[zabojad]

Strange, I'm not having this issue with RN 0.79.5 and react-native-hole-view 3.0.1...

[Kadir-flipcause]

We are still facing this issue, and as a temporary workaround we decided to set newArchEnabled=false for Android. However, we know this isn’t a good long-term practice.

[vikrantnegi]

Try this solutions. Wrap the hole view component in a View like this:

<View renderToHardwareTextureAndroid={true}>
    <HoleView />
</View>

[egorlitsky]

@Kadir-flipcause we've fixed it in v4.0.0 Please, update and verify