https://github.com/ibitcy/react-native-hole-view
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
https://github.com/ibitcy/react-native-hole-view
android animated click-through hole ios overlay react-native tint tutorial view
Last synced: 5 months ago
JSON representation
✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
- Host: GitHub
- URL: https://github.com/ibitcy/react-native-hole-view
- Owner: ibitcy
- Created: 2020-05-20T09:57:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-25T00:41:44.000Z (over 1 year ago)
- Last Synced: 2024-04-26T02:36:07.397Z (over 1 year ago)
- Topics: android, animated, click-through, hole, ios, overlay, react-native, tint, tutorial, view
- Language: Kotlin
- Homepage:
- Size: 8.71 MB
- Stars: 345
- Watchers: 8
- Forks: 19
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-react-native - react-native-hole-view ★6 - Component for cutting out click-through holes in any view. Perfect for making tutorial-like overlay (Components / UI)
- awesome-react-native - react-native-hole-view ★6 - Component for cutting out click-through holes in any view. Perfect for making tutorial-like overlay (Components / UI)
README
[](https://npmjs.com/package/react-native-hole-view)
[](https://npmjs.com/package/react-native-hole-view)
[](https://github.com/pickhardt/maintainers-wanted)
## Attention! Maintainers Wanted
Our company is not using this library and does not plan to in the near future, so we currently lack the resources to maintain it regularly.
If you are interested in becoming a maintainer, please contact me at: newonxp [at] gmail [dot] com.
## How it works
code
```js
import { RNHoleView } from 'react-native-hole-view';
{"Wow! I'm a text inside a hole!"}
{}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
{"Wow! I'm a button inside a hole!"}
{
"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
}
```
Works with any nested views:
code
```js
import { RNHoleView } from 'react-native-hole-view
import Video from 'react-native-video';
{"Wow! I'm a text inside a hole!"}
{}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
{"Wow! I'm a button inside a hole!"}
{
"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
}
```
Can be animated:
code
```js
import {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from "react-native-hole-view";
import Video from 'react-native-video';
const firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60};
const secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60};
const animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200};
const App = () => {
const [holes, setHoles] = useState([]);
const [animated, setAnimated] = useState(false);
const [animation, setAnimation] = useState(undefined);
const onPress = useCallback(() => {
if (animated) {
setHoles([firstHole]);
} else {
setHoles([secondHole])
}
setAnimation({...animationSettings});
setAnimated(!animated);
}, [animated, animation])
useEffect(() => {
onPress();
}, []);
return (
{"Wow! I'm a text inside a hole!"}
{
}} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}>
{"Wow! I'm a button inside a hole!"}
{
"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
}
{
setAnimation(undefined);
}}
>
{"Animate!"}
);
};
```
## Getting started
Install the library using either Yarn:
```
yarn add react-native-hole-view
```
or npm:
```
npm install --save react-native-hole-view
```
## Linking
This library fully supports RN's autolinking
## iOS
```
cd ios && pod install
```
## Android
By default RN doesn't support click through views on Android. The solution we [use](https://github.com/ibitcy/react-native-hole-view/blob/master/android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleView.kt) is quite dirty, so please support our PR to FB's react-native repo
https://github.com/facebook/react-native/pull/28956
## Troubleshooting
If you have any diffuculties - please take a look on `example/` app first.
In case you have xcode build error poining on this line
```objectivec
#import "RCTBridgeModule.h"
```
please use version 2.0.*
## Running the example:
1. Clone the repo
2. `cd example`
3. `yarn`
4. `cd ios`
5. `pod install`
6. `cd ..`
7. `yarn run android` or `yarn run ios`