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: 3 days 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 4 years ago)
• Default Branch: master
• Last Pushed: 2024-01-25T00:41:44.000Z (12 months ago)
• Last Synced: 2024-04-26T02:36:07.397Z (9 months 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

        
![Screenshot](misc/cover.png)

[![npm](https://img.shields.io/npm/v/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view)

[![npm](https://img.shields.io/npm/dw/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view)

## 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`