{"id":4324,"url":"https://github.com/ibitcy/react-native-hole-view","last_synced_at":"2026-01-19T16:02:03.174Z","repository":{"id":40993211,"uuid":"265522882","full_name":"ibitcy/react-native-hole-view","owner":"ibitcy","description":"✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay","archived":false,"fork":false,"pushed_at":"2024-01-25T00:41:44.000Z","size":9131,"stargazers_count":345,"open_issues_count":5,"forks_count":19,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-26T02:36:07.397Z","etag":null,"topics":["android","animated","click-through","hole","ios","overlay","react-native","tint","tutorial","view"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ibitcy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-20T09:57:18.000Z","updated_at":"2024-06-18T18:43:46.401Z","dependencies_parsed_at":"2024-01-08T01:02:48.704Z","dependency_job_id":"72352ebe-9c88-47db-9889-3e1edb046454","html_url":"https://github.com/ibitcy/react-native-hole-view","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ibitcy%2Freact-native-hole-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ibitcy%2Freact-native-hole-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ibitcy%2Freact-native-hole-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ibitcy%2Freact-native-hole-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ibitcy","download_url":"https://codeload.github.com/ibitcy/react-native-hole-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994120,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animated","click-through","hole","ios","overlay","react-native","tint","tutorial","view"],"created_at":"2024-01-05T20:17:08.282Z","updated_at":"2026-01-19T16:02:03.167Z","avatar_url":"https://github.com/ibitcy.png","language":"Kotlin","funding_links":[],"categories":["Components","Kotlin"],"sub_categories":["UI"],"readme":"![Screenshot](misc/cover.png)\n\n[![npm](https://img.shields.io/npm/v/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view)\n[![npm](https://img.shields.io/npm/dw/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view)\n[![Maintainers Wanted](https://img.shields.io/badge/maintainers-wanted-red.svg)](https://github.com/pickhardt/maintainers-wanted)\n\n## Attention! Maintainers Wanted\n\nOur 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.\nIf you are interested in becoming a maintainer, please contact me at: newonxp [at] gmail [dot] com.\n\n## How it works\n\n\u003cimg src=\"misc/demo1.gif\" alt=\"drawing\" width=\"245\" height=\"500\"/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ecode\u003c/summary\u003e\n  \n```js\nimport { RNHoleView } from 'react-native-hole-view';\n\n\u003cView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n  \u003cText style={{ flexGrow: 0, flex: 0, padding: 10 }}\u003e{\"Wow! I'm a text inside a hole!\"}\u003c/Text\u003e\n  \u003cTouchableOpacity onPress={() =\u003e {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}\u003e\n    \u003cText\u003e{\"Wow! I'm a button inside a hole!\"}\u003c/Text\u003e\n  \u003c/TouchableOpacity\u003e\n  \u003cScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}\u003e\n    \u003cText numberOfLines={1}\u003e\n      {\n        \"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!\"\n      }\n    \u003c/Text\u003e\n  \u003c/ScrollView\u003e\n  \u003cRNHoleView\n    style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}\n    holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}\u003e\n  \u003c/RNHoleView\u003e\n\u003c/View\u003e\n```\n\u003c/details\u003e\n\nWorks with any nested views:\n\n\u003cimg src=\"misc/demo2.gif\" alt=\"drawing\" width=\"245\" height=\"500\"/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ecode\u003c/summary\u003e\n\n```js\nimport { RNHoleView } from 'react-native-hole-view\nimport Video from 'react-native-video';\n\n\u003cView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n  \u003cText style={{ flexGrow: 0, flex: 0, padding: 10 }}\u003e{\"Wow! I'm a text inside a hole!\"}\u003c/Text\u003e\n  \u003cTouchableOpacity onPress={() =\u003e {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}\u003e\n    \u003cText\u003e{\"Wow! I'm a button inside a hole!\"}\u003c/Text\u003e\n  \u003c/TouchableOpacity\u003e\n  \u003cScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}\u003e\n    \u003cText numberOfLines={1}\u003e\n      {\n        \"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!\"\n      }\n    \u003c/Text\u003e\n  \u003c/ScrollView\u003e\n  \u003cRNHoleView\n    style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}\n    holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}\u003e\n    \u003cVideo\n      source={{ uri: 'https://cdn.vidyard.com/videos/uuAgWcoM5N4eFR4lUxoYKg/480p.mp4?gbzK5DIaQtu334rQMWVKBAGFBwZCVR6SHKgkwVYjsSLvOhADBtM4IZ_NxKjBze8TzK1o0XNrUd3UyZiiIdlaz_8icTZDM15OeUZ7DSsCBsQ' }}\n      style={{ flex: 1 }}\n    /\u003e\n  \u003c/RNHoleView\u003e\n\u003c/View\u003e\n```\n\u003c/details\u003e\n\nCan be animated:\n\n\u003cimg src=\"misc/demo3.gif\" alt=\"drawing\" width=\"460\" height=\"500\"/\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ecode\u003c/summary\u003e\n\n```js\nimport {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from \"react-native-hole-view\";\n\nimport Video from 'react-native-video';\n\nconst firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60};\nconst secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60};\n\nconst animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200};\n\nconst App = () =\u003e {\n    const [holes, setHoles] = useState\u003cRNHole[]\u003e([]);\n    const [animated, setAnimated] = useState\u003cboolean\u003e(false);\n    const [animation, setAnimation] = useState\u003cIRNHoleViewAnimation | undefined\u003e(undefined);\n\n    const onPress = useCallback(() =\u003e {\n        if (animated) {\n            setHoles([firstHole]);\n        } else {\n            setHoles([secondHole])\n        }\n\n        setAnimation({...animationSettings});\n        setAnimated(!animated);\n    }, [animated, animation])\n\n    useEffect(() =\u003e {\n        onPress();\n    }, []);\n\n    return (\n        \u003cView style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}\u003e\n            \u003cText style={{flexGrow: 0, flex: 0, padding: 10}}\u003e{\"Wow! I'm a text inside a hole!\"}\u003c/Text\u003e\n            \u003cTouchableOpacity onPress={() =\u003e {\n            }} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}\u003e\n                \u003cText\u003e{\"Wow! I'm a button inside a hole!\"}\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cScrollView style={{flexGrow: 0, flex: 0, padding: 10}} horizontal={true}\u003e\n                \u003cText numberOfLines={1}\u003e\n                    {\n                        \"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!\"\n                    }\n                \u003c/Text\u003e\n            \u003c/ScrollView\u003e\n            \u003cRNHoleView\n                style={{\n                    position: 'absolute',\n                    width: '100%',\n                    height: '100%',\n                    backgroundColor: 'rgba(34,146,231,0.4)'\n                }}\n                animation={animation}\n                holes={holes}\n                onAnimationFinished={() =\u003e {\n                    setAnimation(undefined);\n                }}\n            \u003e\n                \u003cVideo source={{uri: 'https://cdn.vidyard.com/videos/uuAgWcoM5N4eFR4lUxoYKg/480p.mp4?gbzK5DIaQtu334rQMWVKBAGFBwZCVR6SHKgkwVYjsSLvOhADBtM4IZ_NxKjBze8TzK1o0XNrUd3UyZiiIdlaz_8icTZDM15OeUZ7DSsCBsQ'}}\n                       resizeMode={\"contain\"}\n                       style={{flex: 1}}/\u003e\n            \u003c/RNHoleView\u003e\n            \u003cView\n                pointerEvents={'box-none'}\n                style={{\n                    position: 'absolute',\n                    flex: 1,\n                    width: '100%',\n                    height: '100%',\n                    alignItems: 'flex-end',\n                    flexDirection: 'row',\n                    justifyContent: 'center'\n\n                }}\u003e\n                \u003cTouchableOpacity onPress={onPress}\n                                  style={{backgroundColor: 'pink', padding: 10, borderRadius: 5, bottom: 50}}\u003e\n                    \u003cText\u003e{\"Animate!\"}\u003c/Text\u003e\n                \u003c/TouchableOpacity\u003e\n            \u003c/View\u003e\n        \u003c/View\u003e\n    );\n};\n```\n\u003c/details\u003e\n\n## Getting started\n\nInstall the library using either Yarn:\n\n```\nyarn add react-native-hole-view\n```\n\nor npm:\n\n```\nnpm install --save react-native-hole-view\n```\n\n## Linking\n\nThis library fully supports RN's autolinking\n\n## iOS\n\n```\ncd ios \u0026\u0026 pod install\n```\n\n## Android\n\nBy 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\nhttps://github.com/facebook/react-native/pull/28956\n\n## Troubleshooting\n\nIf you have any diffuculties - please take a look on `example/` app first. \n\nIn case you have xcode build error poining on this line\n```objectivec\n#import \"RCTBridgeModule.h\"\n```\nplease use version 2.0.*\n  \n## Running the example:\n  \n  1. Clone the repo\n  2. `cd example`\n  3. `yarn`\n  4. `cd ios`\n  5. `pod install`\n  6. `cd ..`\n  7. `yarn run android` or `yarn run ios`\n\n## Running the web example:\n\nThe `exampleWeb` app demonstrates the React Native Web implementation of `RNHoleView`.\n\n### Using Yarn\n\n1. `cd exampleWeb`\n2. `yarn install` (or `yarn`)\n3. `yarn dev`\n4. Open the printed Vite URL (defaults to http://localhost:5174) to interact with the overlay demo.\n\n### Using npm\n\n1. `cd exampleWeb`\n2. `npm install`\n3. `npm run dev`\n4. Open the printed Vite URL (defaults to http://localhost:5174) to interact with the overlay demo.\n\nFor more details, see the [exampleWeb README](exampleWeb/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibitcy%2Freact-native-hole-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fibitcy%2Freact-native-hole-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibitcy%2Freact-native-hole-view/lists"}