Holes have black background on android devices since 0.75.1

[bnemeth-parkl]

trafficstars

Error

On android devices the holes are black with zero opacity since react native 0.75.1 upgrade. It was working fine on 0.74.6.

Steps to reproduce

1. Create new React native repo with version 0.75.X
2. Add react-native-hole-view dependency (alpha4)
3. Used RNHoleView in existing App.tsx
4. Run on Android Device

sample repo: https://github.com/bnemeth-parkl/RNHoleViewBlackHoleDemo

[GolliAch]

Same here

[realmizzer]

same on react-native 0.75.3. can we waiting for fix the problem or this library is not longer supported?

[denisbevilacqua]

Same issue here!

[TheAdamBorek]

+1

[dcorbin]

+1

[dcorbin]

Anybody tried it on 0.75.0 version of react? Just to narrow down the source of the problem?

[stephenkopylov]

Guys, we’re sorry, but we’re currently unable to address this issue as our main project is still on React <0.70.

If anyone is able to fix it and submit a PR, we’d greatly appreciate it!

[dcorbin]

For others blocked by this problem: I was able to replace my usage of RHNV with SVG based masking:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Rect, Circle, Mask, Defs } from 'react-native-svg';

const HoleView = () => {
  return (
    <View style={styles.container}>
      <Svg height="100%" width="100%">
        <Defs>
          <Mask id="mask" x="0" y="0" width="100%" height="100%">
            <Rect width="100%" height="100%" fill="white" />
            <Circle cx="100" cy="100" r="50" fill="black" />
          </Mask>
        </Defs>
        <Rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.8)" mask="url(#mask)" />
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default HoleView;

It's not drop-in, and I have not been able to animate the movement of the hole. Also, I don't need touch access through the hole, just visual appearance.

[vladvlasov256]

An ugly hack that worked for me.

Step 1. Remove RN background:

backgroundColor: Platform.OS === 'android' ? 'clear' : rgba(0, 0, 0, 0.85)

Step 2. Patch RNHoleView.kt (node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt):

// 2.1 Remove the onDraw method

// 2.2 Duplicate the background color
private val customBackgroundColor = ColorUtils.setAlphaComponent(
    Color.parseColor("#000000"),
    (0.85 * 255).toInt()
)

// 2.3 Rework dispatchDraw
override fun dispatchDraw(canvas: Canvas) {
    if (mHolesPath != null) {
        val layerId = canvas.saveLayer(
            0F, 0F,
            canvas.width.toFloat(), canvas.height.toFloat(), null, Canvas.ALL_SAVE_FLAG
        )
        canvas.drawColor(customBackgroundColor)
        canvas.drawPath(mHolesPath!!, mHolesPaint)
        canvas.restoreToCount(layerId);
    }
    super.dispatchDraw(canvas)
}

I took the code from here. Not sure about performance.

--

Another idea. Still requires clear RN background style.

Instead of drawing the holes, let 's draw the background. Here is the paint object code:

mHolesPaint = Paint(Paint.ANTI_ALIAS_FLAG)
mHolesPaint.color = Color.argb(217, 0, 0, 0)
mHolesPaint.style = Paint.Style.FILL

Then the path creation starts with a background rect:

mHolesPath = Path()
mHolesPath!!.setFillType(Path.FillType.WINDING);
mHolesPath!!.addRect(0F, 0F, width.toFloat(), height.toFloat(), Path.Direction.CW);

And all addRoundRect calls require Path.Direction.CCW option.

isTouchInsideHole requires the inverted condition:

return !clickableRegion.contains(touchX, touchY)

[retyui]

same :(

[vikrantnegi]

Same issue is observved on React Native 0.79.2 as well.

[zabojad]

I'm reproducing it with "react-native": "0.79.5 and "@react-navigation/native": "7.1.17", only in a react navigation Modal. I don't reproduce the problem in a react-native <Modal />

[vikrantnegi]

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

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

[zabojad]

@vikrantnegi it works ! How did you find this?