ibitcy/react-native-hole-view

✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay

react-native-hole-view's Issues

Transition hole

Hello,

Great library and easy to use. I was wonder if it's possible to transition the hole from one set of params to another? This would happen in a similar fashion to react-native-copilot.

animation doesn't work

Hello :)
I try your third example and I get this error

LOG BugReporting extraData: {"AppRegistry.runApplication1": "Running "testApp" with {"rootTag":31,"initialProps":{"isHeadless":false}}"}
WARN Possible Unhandled Promise Rejection (id: 1):
Error: You attempted to set the key duration with the value 200 on an object that is meant to be immutable and has been frozen.

react-native 0.61.0

Using RNHoleView on Android with position: "absolute" doesn't work

I'm using RNHoleVIew as an overlay over my RNCamera component. This code below works perfectly on iOS, but in Android the overlay is rendered only on top of the screen instead of covering all screen as intended.

<View>
  <RNCamera
      captureAudio={false}
      ref={cameraRef}
      style={styles.camera}
      autoFocus={true}
      flashMode={
        state.flashOn
          ? RNCamera.Constants.FlashMode.torch
          : RNCamera.Constants.FlashMode.off
      }
    />
    <RNHoleView
      style={styles.overlay}
      holes={[
        {
          x: 25 * WIDTH_RATIO,
          y: 164 * HEIGHT_RATIO,
          width: 364 * WIDTH_RATIO,
          height: 364 * WIDTH_RATIO,
          borderRadius: 182 * WIDTH_RATIO,
        },
      ]}>
      <View style={styles.bar}>
      </View>
    </RNHoleView>
<View />

const WIDTH_RATIO = Dimension.get("width") / 414
const HEIGHT_RATIO = Dimension.get("height") / 896

const styles = StyleSheet.create({
  camera: {
    flex: 1,
  },
  overlay: {
    ...StyleSheet.absoluteFill,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0, 0, 0, 0.6)",
  },
  bar: {
    position: "absolute",
    bottom: 28 * WIDTH_RATIO,
    left: 16 * WIDTH_RATIO,
    width: deviceWidth - 32 * WIDTH_RATIO,
    paddingHorizontal: 16 * WIDTH_RATIO,
    height: 80 * WIDTH_RATIO,
    paddingVertical: 8 * WIDTH_RATIO,
    borderRadius: 20 * WIDTH_RATIO,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#262331",
  },
});

The result on Android:

On iOS:

I use [email protected], [email protected]

Thank you very much!

Flickering after some animations passed

Hello, thank you for this nice lib! Being playing with example project I noticed a slight but nasty flickering of holes after several rounds of animation , see attached video.

bug-720.mov

Fade-in/Fade-out animation

Dear @stephenkopylov ,

Once again, thanks for your great job on this library.

This issue is rather a feature request. I would like to implement a fade-in/fade-out animation of the overlay on the UI thread, but wrapping <RNHoleView /> into <AnimatedView /> in order to set useNativeDriver to true does not seem to work. I wonder if you have any plans on adding native fade-in/fade-out animation of the entire overlay in addition to the animation of the holes which is already there.

If I missed something and it's already possible to fade the overlay in natively, please point me in the right direction.

Thank you in advance.

Kind regards,
Leo

Compilation failure, Android with RN 0.73.1

/react_native_hole_view/RNHoleView.kt:179:5 'onDraw' overrides nothing

I'm upgrading my project's version of React Native from 0.72.8 to 0.73.1. Now the Android build fails with the above error, near as I can tell. I presume this is a result of the introduction of Bridgeless Mode that happen in 0.73. Is it possible to enable new architecture and Fabric in this project?

rerendering, going from 1 hole, to no holes doesn't seem to erase the old hole

I have situation where I start out with 0 holes, add 1 hole that changes multiple times, and then (through a bug) goes back to 0 holes. At this last stage, passing the empty array of holes does not eliminate the hole from the previous stage. As a workaround, I can create a hole with 0 width/height and that does just fine.

borderRadius is not animated (and it's jarring) in some circumstances

I'm using borderRadius to make circular holes. However, when the diameter of the circle is reduced, it's quite jarring even when animated. I believe the border radius not animated.

1. Make large circular hole.
2. Replace it with a smaller circular hole and animate the change.

The visual jumps from a large circle to a large square with small rounded corners.

Note: this only happens when making the circle smaller. Not when making it larger. This suggests that my immediate problem could be solved by choosing when to update borderRadius bases on the whether it's increasing or decreasing, but I can image other edge cases where this might not be as good as proper animation.

Example: https://github.com/dcorbin/RNHoleViewBug/tree/borderRadius_bug

Build generation failed on Android : > Task :react-native-hole-view:compileReleaseKotlin FAILED

Getting the following errors while generating the Android build

> Task :react-native-hole-view:compileReleaseKotlin FAILED

'onDraw' overrides nothing
is Canvas? but Canvas was expected
'dispatchDraw' overrides nothing
Type mismatch: inferred type is Canvas? but Canvas was expected

Need some help!

Support for new architecture

Hi there! Am I wrong or does this module not support the new architecture (Fabric) ?

dynamic hole

Hi, I want to create facebook message gradient effect like this:

THen I found hold-view can do it (I think so)
As the Image above, the massageContainer is white background then the holdview is the TextMessage, that hard to calculate position. So I want to ask do you provide hold item as a child like this? Thanks so much

Animate hole opacity

I would like an option to be able to animate a hole's opacity/transparency.

Gradle plugin deprecated

Hi, I'm getting warning when trying to upgrade my gradle in Android.

The 'kotlin-android-extensions' Gradle plugin is deprecated. Please use this migration guide (https://goo.gle/kotlin-android-extensions-deprecation) to start working with View Binding (https://developer.android.com/topic/libraries/view-binding) and the 'kotlin-parcelize' plugin.

[android]: unable to click on a TouchableOpacity in React Native 0.70.5

Hello,

I see all the drama about clicks through the hole on Android. Maybe I misunderstood, but it should work, right? There's a dirty solution behind it all but it should work, is it?

In react-native 0.70.5 the Scroll works, but the click on TouchableOpacity does not. Is this expected?

background color issue when I have two hole on same position

I have a conflict between two holes, Is there a way I can remove the background color on the conflicted area also?

Doesn't compile with React Native 0.71.1

When I try to run the project after upgrading, it gives me this error:

The Android Gradle plugin supports only kotlin-android-extensions Gradle plugin version 1.6.20 and higher. The following dependencies do not satisfy the required version: project ':react-native-hole-view' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31

[QUESTION] FlatList inside RNHoleView

I have FlatList inside RNHoleVIew, like
<RNHoleView holes={<holes>}> <FlatList /> </RNHoleView>
But I can't scroll FlatList on Android. How can I resolve this?

Execution failed for task ':react-native-hole-view:compileDebugKotlin'.

i have upgraded :
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33

FAILURE: Build failed with an exception

System:
OS: macOS 12.5
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 427.18 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.17.4 - /usr/local/bin/node
Yarn: 1.22.11 - /usr/local/bin/yarn
npm: 7.20.3 - /usr/local/bin/npm
Watchman: 2021.08.02.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.12 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

e: /Users/yous.yoeun/Documents/robotech-repo/cdrb-flow-app/node_modules/react-native-hole-view/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt: (172, 17): 'onAnimationRepeat' overrides nothing

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-hole-view:compileDebugKotlin'.

Compilation error. See log for more details

Not compatible with Expo 44

Hey,

we just upgraded to Expo 44 in our ejected app and noticed an iOS build issue with this library. Fix is similar to expo/expo#15626

Here is the diff for this package:

diff --git a/node_modules/react-native-hole-view/ios/src/RNHoleViewManager.h b/node_modules/react-native-hole-view/ios/src/RNHoleViewManager.h
index 124e29c..b18377a 100644
--- a/node_modules/react-native-hole-view/ios/src/RNHoleViewManager.h
+++ b/node_modules/react-native-hole-view/ios/src/RNHoleViewManager.h
@@ -7,11 +7,7 @@
 //
 
 #import <Foundation/Foundation.h>
-#if __has_include("RCTBridgeModule.h")
-#import "RCTBridgeModule.h"
-#else
 #import <React/RCTBridgeModule.h>
-#endif
 
 #import <React/RCTViewManager.h>
 

Missing changelog

Dear team behind react-native-hole-view,

First of all, thanks a lot for your work! We use your library since version 1.0.0 and are happy with it!
One minor suggestion would be to include a file with changelog into the repo, so that it would be easier to see what changed from version to version and come up with how our code needs to be adapted to keep up (say, IRNHole seems to be gone and now I should probably use RNHole instead).

Other than that, great job and thanks once again! 👍

hole view with blur effect

Hi, I love your work , I have a request is it possible to make the view is blur ? and the hole is transparent, I think it will be good if there is any option for this, thank you so much