├── example ├── _node-version ├── _ruby-version ├── _bundle │ └── config ├── app.json ├── babel.config.js ├── android │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── drawable │ │ │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── jni │ │ │ │ │ ├── CMakeLists.txt │ │ │ │ │ ├── MainApplicationModuleProvider.h │ │ │ │ │ ├── OnLoad.cpp │ │ │ │ │ ├── MainComponentsRegistry.h │ │ │ │ │ ├── MainApplicationModuleProvider.cpp │ │ │ │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ │ │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ │ │ │ └── MainComponentsRegistry.cpp │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── rnholeviewexample │ │ │ │ │ ├── newarchitecture │ │ │ │ │ ├── components │ │ │ │ │ │ └── MainComponentsRegistry.java │ │ │ │ │ ├── modules │ │ │ │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ │ │ │ └── MainApplicationReactNativeHost.java │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── rnholeviewexample │ │ │ │ └── ReactNativeFlipper.java │ │ ├── proguard-rules.pro │ │ ├── build_defs.bzl │ │ └── _BUCK │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── ios │ ├── RNHoleViewExample │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── AppDelegate.mm │ ├── RNHoleViewExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── _xcode.env │ ├── RNHoleViewExampleTests │ │ ├── Info.plist │ │ └── RNHoleViewExampleTests.m │ ├── Podfile │ └── RNHoleViewExample.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ └── RNHoleViewExample.xcscheme ├── tsconfig.json ├── Gemfile ├── index.js ├── refreshSrc.sh ├── __tests__ │ └── App-test.tsx ├── metro.config.js ├── refreshLib.sh ├── patches │ └── react-native+0.70.10-1.patch ├── README.md ├── package.json └── App.tsx ├── exampleNewArch ├── .watchmanconfig ├── jest.config.js ├── .bundle │ └── config ├── .eslintrc.js ├── app.json ├── babel.config.js ├── .prettierrc.js ├── android │ ├── app │ │ ├── debug.keystore │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── drawable │ │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── examplenewarch │ │ │ │ │ ├── MainApplication.kt │ │ │ │ │ └── MainActivity.kt │ │ │ │ └── AndroidManifest.xml │ │ ├── proguard-rules.pro │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── ios │ ├── exampleNewArch │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── PrivacyInfo.xcprivacy │ │ ├── AppDelegate.swift │ │ ├── Info.plist │ │ └── LaunchScreen.storyboard │ ├── exampleNewArch.xcworkspace │ │ └── contents.xcworkspacedata │ ├── .xcode.env │ ├── Podfile │ └── exampleNewArch.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ └── exampleNewArch.xcscheme ├── tsconfig.json ├── index.js ├── __tests__ │ └── App.test.tsx ├── metro.config.js ├── Gemfile ├── README.md ├── package.json ├── .gitignore └── App.tsx ├── .npmrc ├── misc ├── cover.png ├── demo1.gif ├── demo2.gif └── demo3.gif ├── android ├── src │ ├── main │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── ibitcy │ │ │ └── react_native_hole_view │ │ │ ├── RNHoleViewPackage.kt │ │ │ ├── events │ │ │ └── AnimFinishEvent.kt │ │ │ └── RNHoleViewManagerImpl.kt │ ├── oldarch │ │ └── com │ │ │ └── ibitcy │ │ │ └── react_native_hole_view │ │ │ └── RNHoleViewManager.kt │ └── newarch │ │ └── com │ │ └── ibitcy │ │ └── react_native_hole_view │ │ └── RNHoleViewManager.kt └── build.gradle ├── .travis.yml ├── CHANGELOG.md ├── tsconfig.json ├── ios ├── RNHoleView │ ├── RNHoleView.h │ ├── RNHoleViewManager.mm │ ├── RNHoleViewImpl.h │ ├── RNHoleView.mm │ └── RNHoleViewImpl.m └── RNHoleView.xcodeproj │ └── project.pbxproj ├── react-native-hole-view.podspec ├── .gitignore ├── src ├── codegenSpec │ └── RNHoleViewNativeComponent.ts └── index.tsx ├── package.json ├── yarn.lock └── README.md /example/_node-version: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /example/_ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /exampleNewArch/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /example/_bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /exampleNewArch/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'react-native', 3 | }; 4 | -------------------------------------------------------------------------------- /misc/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/misc/cover.png -------------------------------------------------------------------------------- /misc/demo1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/misc/demo1.gif -------------------------------------------------------------------------------- /misc/demo2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/misc/demo2.gif -------------------------------------------------------------------------------- /misc/demo3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/misc/demo3.gif -------------------------------------------------------------------------------- /exampleNewArch/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNHoleViewExample", 3 | "displayName": "RNHoleViewExample" 4 | } -------------------------------------------------------------------------------- /exampleNewArch/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native', 4 | }; 5 | -------------------------------------------------------------------------------- /exampleNewArch/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exampleNewArch", 3 | "displayName": "exampleNewArch" 4 | } 5 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /exampleNewArch/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNHoleViewExample 3 | 4 | -------------------------------------------------------------------------------- /exampleNewArch/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | }; 6 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/debug.keystore -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | exampleNewArch 3 | 4 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config", 3 | "include": ["**/*.ts", "**/*.tsx"], 4 | "exclude": ["**/node_modules", "**/Pods"] 5 | } 6 | -------------------------------------------------------------------------------- /exampleNewArch/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /exampleNewArch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@react-native/typescript-config", 3 | "include": ["**/*.ts", "**/*.tsx"], 4 | "exclude": ["**/node_modules", "**/Pods"] 5 | } 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby '2.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.3' 7 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibitcy/react-native-hole-view/HEAD/exampleNewArch/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '10' 4 | - '12' 5 | before_script: 6 | - yarn install 7 | script: 8 | - yarn build 9 | branches: 10 | only: 11 | - master 12 | cache: 13 | directories: 14 | - $HOME/.npm 15 | -------------------------------------------------------------------------------- /exampleNewArch/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import { AppRegistry } from 'react-native'; 6 | import App from './App'; 7 | import { name as appName } from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /example/refreshSrc.sh: -------------------------------------------------------------------------------- 1 | rm -rf ./../src/ 2 | rm -rf ./../ios/ 3 | rm -rf ./../android/ 4 | cp -r ./node_modules/react-native-hole-view/src ../ 5 | cp -r ./node_modules/react-native-hole-view/ios ../ 6 | cp -r ./node_modules/react-native-hole-view/android ../ 7 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 2.0.1 2 | 3 | - [FIX] onAnimationFinished implemented on Android 4 | 5 | # 2.0.0 6 | 7 | - [ADD] Animations! 8 | 9 | # 1.1.0 10 | 11 | - [FIX] Minor rendering fixes 12 | 13 | # 1.0.1 14 | 15 | - [FIX] Minor rendering fixes 16 | 17 | # 1.0.0 18 | 19 | - Initial release -------------------------------------------------------------------------------- /exampleNewArch/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip 4 | networkTimeout=10000 5 | validateDistributionUrl=true 6 | zipStoreBase=GRADLE_USER_HOME 7 | zipStorePath=wrapper/dists 8 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | cmake_minimum_required(VERSION 3.13) 2 | 3 | # Define the library name here. 4 | project(rnholeviewexample_appmodules) 5 | 6 | # This file includes all the necessary to let you build your application with the New Architecture. 7 | include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake) 8 | -------------------------------------------------------------------------------- /exampleNewArch/__tests__/App.test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import React from 'react'; 6 | import ReactTestRenderer from 'react-test-renderer'; 7 | import App from '../App'; 8 | 9 | test('renders correctly', async () => { 10 | await ReactTestRenderer.act(() => { 11 | ReactTestRenderer.create(); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /example/__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /exampleNewArch/metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); 2 | 3 | /** 4 | * Metro configuration 5 | * https://reactnative.dev/docs/metro 6 | * 7 | * @type {import('@react-native/metro-config').MetroConfig} 8 | */ 9 | const config = {}; 10 | 11 | module.exports = mergeConfig(getDefaultConfig(__dirname), config); 12 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /exampleNewArch/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") } 2 | plugins { id("com.facebook.react.settings") } 3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() } 4 | rootProject.name = 'RNHoleViewExampleNewArch' 5 | include ':app' 6 | includeBuild('../node_modules/@react-native/gradle-plugin') 7 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationModuleProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | std::shared_ptr MainApplicationModuleProvider( 12 | const std::string &moduleName, 13 | const JavaTurboModule::InitParams ¶ms); 14 | 15 | } // namespace react 16 | } // namespace facebook 17 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/OnLoad.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "MainApplicationTurboModuleManagerDelegate.h" 3 | #include "MainComponentsRegistry.h" 4 | 5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { 6 | return facebook::jni::initialize(vm, [] { 7 | facebook::react::MainApplicationTurboModuleManagerDelegate:: 8 | registerNatives(); 9 | facebook::react::MainComponentsRegistry::registerNatives(); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /example/refreshLib.sh: -------------------------------------------------------------------------------- 1 | rm -rf ./node_modules/react-native-hole-view/ 2 | mkdir ./node_modules/react-native-hole-view/ 3 | cp -r ../src ./node_modules/react-native-hole-view/ 4 | cp -r ../android ./node_modules/react-native-hole-view/ 5 | cp -r ../ios ./node_modules/react-native-hole-view/ 6 | cp ../tsconfig.json ./node_modules/react-native-hole-view/ 7 | cp ../package.json ./node_modules/react-native-hole-view/ 8 | cp ../react-native-hole-view.podspec ./node_modules/react-native-hole-view/ 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "skipLibCheck": true, 4 | "module": "commonjs", 5 | "sourceMap": true, 6 | "outDir": "./dist", 7 | "declaration": true, 8 | "jsx": "react-native", 9 | "target": "es6", 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "noImplicitAny": false, 13 | "typeRoots": [ 14 | "./node_modules/@types/" 15 | ], 16 | }, 17 | "include": [ 18 | "./src" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/ios/_xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /exampleNewArch/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /exampleNewArch/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby ">= 2.6.10" 5 | 6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures. 7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' 8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' 9 | gem 'xcodeproj', '< 1.26.0' 10 | gem 'concurrent-ruby', '< 1.3.4' 11 | 12 | # Ruby 3.4.0 has removed some libraries from the standard library. 13 | gem 'bigdecimal' 14 | gem 'logger' 15 | gem 'benchmark' 16 | gem 'mutex_m' 17 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /exampleNewArch/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | buildToolsVersion = "36.0.0" 4 | minSdkVersion = 24 5 | compileSdkVersion = 36 6 | targetSdkVersion = 36 7 | ndkVersion = "27.1.12297006" 8 | kotlinVersion = "2.1.20" 9 | } 10 | repositories { 11 | google() 12 | mavenCentral() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle") 16 | classpath("com.facebook.react:react-native-gradle-plugin") 17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 18 | } 19 | } 20 | 21 | apply plugin: "com.facebook.react.rootproject" 22 | -------------------------------------------------------------------------------- /android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleViewPackage.kt: -------------------------------------------------------------------------------- 1 | package com.ibitcy.react_native_hole_view 2 | 3 | import com.facebook.react.ReactPackage 4 | import com.facebook.react.bridge.NativeModule 5 | import com.facebook.react.bridge.ReactApplicationContext 6 | import com.facebook.react.uimanager.ViewManager 7 | 8 | class RNHoleViewPackage: ReactPackage { 9 | 10 | override fun createViewManagers(reactContext: ReactApplicationContext): List> = 11 | listOf(RNHoleViewManager(reactContext)) 12 | 13 | override fun createNativeModules(reactContext: ReactApplicationContext): List = 14 | emptyList() 15 | 16 | } -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNHoleViewExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | 6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { 7 | include(":ReactAndroid") 8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid') 9 | include(":ReactAndroid:hermes-engine") 10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine') 11 | } 12 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /ios/RNHoleView/RNHoleView.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoleView.h 3 | // RNHoleView 4 | // 5 | // Created by Thomas FETIVEAU on 22/06/2023. 6 | // Copyright © 2023 Stepan Kopylov. All rights reserved. 7 | // 8 | 9 | // This guard prevent the code from being compiled in the old architecture 10 | #ifdef RCT_NEW_ARCH_ENABLED 11 | #import 12 | #import 13 | 14 | #ifndef NativeComponentExampleComponentView_h 15 | #define NativeComponentExampleComponentView_h 16 | 17 | NS_ASSUME_NONNULL_BEGIN 18 | 19 | @interface RNHoleView : RCTViewComponentView 20 | @end 21 | 22 | NS_ASSUME_NONNULL_END 23 | 24 | #endif /* NativeComponentExampleComponentView_h */ 25 | #endif /* RCT_NEW_ARCH_ENABLED */ 26 | -------------------------------------------------------------------------------- /android/src/main/java/com/ibitcy/react_native_hole_view/events/AnimFinishEvent.kt: -------------------------------------------------------------------------------- 1 | package com.ibitcy.react_native_hole_view.events 2 | 3 | import com.facebook.react.bridge.Arguments 4 | import com.facebook.react.uimanager.events.Event 5 | import com.facebook.react.uimanager.events.RCTEventEmitter 6 | 7 | class AnimFinishEvent(viewId: Int) : Event(viewId) { 8 | override fun getEventName() = EVENT_NAME 9 | 10 | // All events for a given view can be coalesced. 11 | override fun getCoalescingKey(): Short = 0 12 | 13 | override fun dispatch(rctEventEmitter: RCTEventEmitter) { 14 | rctEventEmitter.receiveEvent(viewTag, eventName, Arguments.createMap()) 15 | } 16 | 17 | companion object { 18 | const val EVENT_NAME = "animationFinished" 19 | } 20 | } -------------------------------------------------------------------------------- /react-native-hole-view.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "react-native-hole-view" 7 | s.version = package['version'] 8 | s.summary = package['description'] 9 | s.description = package['description'] 10 | s.homepage = "ibitcy.com" 11 | s.license = "MIT" 12 | s.author = { "author" => "stepan.kopylov@ibitcy.com" } 13 | s.platforms = { :ios => "11.0" } 14 | s.source = { :git => "https://github.com/ibitcy/react-native-hole-view", :tag => "master" } 15 | s.source_files = "ios/**/*.{h,m,mm}" 16 | s.requires_arc = true 17 | s.dependency 'React-Core' 18 | 19 | if ENV["RCT_NEW_ARCH_ENABLED"] == "1" 20 | install_modules_dependencies(s) 21 | end 22 | end 23 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/RNHoleView/RNHoleViewManager.mm: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoleViewManager.mm 3 | // RNHoleViewProject 4 | // 5 | // Created by Stepan Kopylov on 20/05/2020. 6 | // Copyright © 2020 Stepan Kopylov. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | #import 12 | 13 | #import "RNHoleViewImpl.h" 14 | 15 | @interface RNHoleViewManager : RCTViewManager 16 | @end 17 | 18 | @implementation RNHoleViewManager 19 | 20 | RCT_EXPORT_MODULE(RNHoleView) 21 | 22 | -(UIView*)view{ 23 | return [RNHoleViewImpl new]; 24 | } 25 | 26 | - (dispatch_queue_t)methodQueue 27 | { 28 | return dispatch_get_main_queue(); 29 | } 30 | 31 | RCT_EXPORT_VIEW_PROPERTY(holes, NSArray) 32 | 33 | RCT_EXPORT_VIEW_PROPERTY(animation, NSDictionary) 34 | 35 | RCT_EXPORT_VIEW_PROPERTY(onAnimationFinished, RCTDirectEventBlock) 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /example/patches/react-native+0.70.10-1.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/react-native/third-party-podspecs/boost.podspec b/node_modules/react-native/third-party-podspecs/boost.podspec 2 | index 2f1fcc4..fa82134 100644 3 | --- a/node_modules/react-native/third-party-podspecs/boost.podspec 4 | +++ b/node_modules/react-native/third-party-podspecs/boost.podspec 5 | @@ -10,7 +10,7 @@ Pod::Spec.new do |spec| 6 | spec.homepage = 'http://www.boost.org' 7 | spec.summary = 'Boost provides free peer-reviewed portable C++ source libraries.' 8 | spec.authors = 'Rene Rivera' 9 | - spec.source = { :http => 'https://boostorg.jfrog.io/artifactory/main/release/1.76.0/source/boost_1_76_0.tar.bz2', 10 | + spec.source = { :http => 'https://archives.boost.io/release/1.76.0/source/boost_1_76_0.tar.bz2', 11 | :sha256 => 'f0397ba6e982c4450f27bf32a2a83292aba035b827a5623a14636ea583318c41' } 12 | 13 | # Pinning to the same version as React.podspec. 14 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/java/com/examplenewarch/MainApplication.kt: -------------------------------------------------------------------------------- 1 | package com.examplenewarch 2 | 3 | import android.app.Application 4 | import com.facebook.react.PackageList 5 | import com.facebook.react.ReactApplication 6 | import com.facebook.react.ReactHost 7 | import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative 8 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost 9 | 10 | class MainApplication : Application(), ReactApplication { 11 | 12 | override val reactHost: ReactHost by lazy { 13 | getDefaultReactHost( 14 | context = applicationContext, 15 | packageList = 16 | PackageList(this).packages.apply { 17 | // Packages that cannot be autolinked yet can be added manually here, for example: 18 | // add(MyReactNativePackage()) 19 | }, 20 | ) 21 | } 22 | 23 | override fun onCreate() { 24 | super.onCreate() 25 | loadReactNative(this) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/java/com/examplenewarch/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.examplenewarch 2 | 3 | import com.facebook.react.ReactActivity 4 | import com.facebook.react.ReactActivityDelegate 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate 7 | 8 | class MainActivity : ReactActivity() { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | override fun getMainComponentName(): String = "exampleNewArch" 15 | 16 | /** 17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate] 18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled] 19 | */ 20 | override fun createReactActivityDelegate(): ReactActivityDelegate = 21 | DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled) 22 | } 23 | -------------------------------------------------------------------------------- /exampleNewArch/ios/Podfile: -------------------------------------------------------------------------------- 1 | # Resolve react_native_pods.rb with node to allow for hoisting 2 | require Pod::Executable.execute_command('node', ['-p', 3 | 'require.resolve( 4 | "react-native/scripts/react_native_pods.rb", 5 | {paths: [process.argv[1]]}, 6 | )', __dir__]).strip 7 | 8 | platform :ios, min_ios_version_supported 9 | prepare_react_native_project! 10 | 11 | linkage = ENV['USE_FRAMEWORKS'] 12 | if linkage != nil 13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 14 | use_frameworks! :linkage => linkage.to_sym 15 | end 16 | 17 | target 'exampleNewArch' do 18 | config = use_native_modules! 19 | 20 | use_react_native!( 21 | :path => config[:reactNativePath], 22 | # An absolute path to your application root. 23 | :app_path => "#{Pod::Config.instance.installation_root}/.." 24 | ) 25 | 26 | post_install do |installer| 27 | react_native_post_install( 28 | installer, 29 | config[:reactNativePath], 30 | :mac_catalyst_enabled => false, 31 | # :ccache_enabled => true 32 | ) 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainComponentsRegistry.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | class MainComponentsRegistry 12 | : public facebook::jni::HybridClass { 13 | public: 14 | // Adapt it to the package you used for your Java class. 15 | constexpr static auto kJavaDescriptor = 16 | "Lcom/rnholeviewexample/newarchitecture/components/MainComponentsRegistry;"; 17 | 18 | static void registerNatives(); 19 | 20 | MainComponentsRegistry(ComponentFactory *delegate); 21 | 22 | private: 23 | static std::shared_ptr 24 | sharedProviderRegistry(); 25 | 26 | static jni::local_ref initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate); 29 | }; 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationModuleProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationModuleProvider.h" 2 | 3 | #include 4 | #include 5 | 6 | namespace facebook { 7 | namespace react { 8 | 9 | std::shared_ptr MainApplicationModuleProvider( 10 | const std::string &moduleName, 11 | const JavaTurboModule::InitParams ¶ms) { 12 | // Here you can provide your own module provider for TurboModules coming from 13 | // either your application or from external libraries. The approach to follow 14 | // is similar to the following (for a library called `samplelibrary`: 15 | // 16 | // auto module = samplelibrary_ModuleProvider(moduleName, params); 17 | // if (module != nullptr) { 18 | // return module; 19 | // } 20 | // return rncore_ModuleProvider(moduleName, params); 21 | 22 | // Module providers autolinked by RN CLI 23 | auto rncli_module = rncli_ModuleProvider(moduleName, params); 24 | if (rncli_module != nullptr) { 25 | return rncli_module; 26 | } 27 | 28 | return rncore_ModuleProvider(moduleName, params); 29 | } 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/PrivacyInfo.xcprivacy: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSPrivacyAccessedAPITypes 6 | 7 | 8 | NSPrivacyAccessedAPIType 9 | NSPrivacyAccessedAPICategoryFileTimestamp 10 | NSPrivacyAccessedAPITypeReasons 11 | 12 | C617.1 13 | 14 | 15 | 16 | NSPrivacyAccessedAPIType 17 | NSPrivacyAccessedAPICategoryUserDefaults 18 | NSPrivacyAccessedAPITypeReasons 19 | 20 | CA92.1 21 | 22 | 23 | 24 | NSPrivacyAccessedAPIType 25 | NSPrivacyAccessedAPICategorySystemBootTime 26 | NSPrivacyAccessedAPITypeReasons 27 | 28 | 35F9.1 29 | 30 | 31 | 32 | NSPrivacyCollectedDataTypes 33 | 34 | NSPrivacyTracking 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | ios/example/Pods 3 | 4 | # OSX 5 | # 6 | .DS_Store 7 | 8 | # node.js 9 | # 10 | node_modules/ 11 | npm-debug.log 12 | yarn-error.log 13 | example/node_modules/ 14 | example/ios/Pods/** 15 | 16 | 17 | # Xcode 18 | # 19 | build/ 20 | *.pbxuser 21 | !default.pbxuser 22 | *.mode1v3 23 | !default.mode1v3 24 | *.mode2v3 25 | !default.mode2v3 26 | *.perspectivev3 27 | !default.perspectivev3 28 | xcuserdata 29 | *.xccheckout 30 | *.moved-aside 31 | DerivedData 32 | *.hmap 33 | *.ipa 34 | *.xcuserstate 35 | project.xcworkspace 36 | 37 | 38 | # Android/IntelliJ 39 | # 40 | build/ 41 | .idea 42 | .gradle 43 | local.properties 44 | *.iml 45 | 46 | android/android.iml 47 | android/gradle.properties 48 | android/gradle/ 49 | android/gradlew 50 | android/gradlew.bat 51 | android/src/main/gen 52 | 53 | example/android/build/ 54 | example/android/.idea 55 | example/android/.gradle 56 | example/android/local.properties 57 | example/android/*.iml 58 | 59 | example/android/android.iml 60 | example/android/gradle.properties 61 | example/android/gradle/ 62 | example/android/gradlew 63 | example/android/gradlew.bat 64 | example/android/src/main/gen 65 | example/android/app/.cxx/ 66 | 67 | # BUCK 68 | buck-out/ 69 | \.buckd/ 70 | *.keystore 71 | 72 | ios/Pods/** -------------------------------------------------------------------------------- /src/codegenSpec/RNHoleViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import type {HostComponent,ViewProps} from 'react-native'; 2 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 3 | import type { 4 | DirectEventHandler, 5 | Int32, 6 | } from 'react-native/Libraries/Types/CodegenTypes'; 7 | 8 | type AnimFinishEvent = Readonly<{}>; 9 | 10 | type AnimationProp = { 11 | duration?: Int32; 12 | timingFunction?: string; 13 | } 14 | type HoleProp = { 15 | height: Int32; 16 | width: Int32; 17 | x: Int32; 18 | y: Int32; 19 | borderRadius?: Int32; 20 | isRTL?: boolean; 21 | borderTopLeftRadius?: Int32; 22 | borderTopRightRadius?: Int32; 23 | borderBottomLeftRadius?: Int32; 24 | borderBottomRightRadius?: Int32; 25 | borderTopStartRadius?: Int32; 26 | borderTopEndRadius?: Int32; 27 | borderBottomStartRadius?: Int32; 28 | borderBottomEndRadius?: Int32; 29 | } 30 | 31 | export interface NativeProps extends ViewProps { 32 | holes?: ReadonlyArray>; 33 | animation?: Readonly; 34 | onAnimationFinished?: DirectEventHandler; 35 | } 36 | 37 | export default codegenNativeComponent( 38 | 'RNHoleView', 39 | ) as HostComponent; -------------------------------------------------------------------------------- /exampleNewArch/README.md: -------------------------------------------------------------------------------- 1 | # Example app for new architecture 2 | 3 | NOTE: install node modules using NodeJS v20.19.4 or later 4 | 5 | ## Getting Started 6 | 7 | ### Prerequisites 8 | 9 | 1. Install dependencies: 10 | ```sh 11 | npm install 12 | # or 13 | yarn install 14 | ``` 15 | 16 | 2. For iOS, install CocoaPods dependencies: 17 | ```sh 18 | cd ios 19 | bundle install # First time only 20 | bundle exec pod install 21 | cd .. 22 | ``` 23 | 24 | ### Running the App 25 | 26 | #### Android 27 | 28 | 1. Start Metro bundler (optional - it will start automatically when running the app): 29 | ```sh 30 | npm start 31 | # or 32 | yarn start 33 | ``` 34 | 35 | 2. Run the app: 36 | ```sh 37 | npm run android 38 | # or 39 | yarn android 40 | ``` 41 | 42 | Or open `android/` in Android Studio and run from there. 43 | 44 | #### iOS 45 | 46 | 1. Start Metro bundler (optional - it will start automatically when building from Xcode): 47 | ```sh 48 | npm start 49 | # or 50 | yarn start 51 | ``` 52 | 53 | 2. Run the app: 54 | ```sh 55 | npm run ios 56 | # or 57 | yarn ios 58 | ``` 59 | 60 | Or open `ios/exampleNewArch.xcworkspace` in Xcode and run from there (⌘R). 61 | 62 | **Note:** When running from Xcode, Metro bundler will start automatically before the app launches. 63 | 64 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #include 5 | #include 6 | 7 | namespace facebook { 8 | namespace react { 9 | 10 | class MainApplicationTurboModuleManagerDelegate 11 | : public jni::HybridClass< 12 | MainApplicationTurboModuleManagerDelegate, 13 | TurboModuleManagerDelegate> { 14 | public: 15 | // Adapt it to the package you used for your Java class. 16 | static constexpr auto kJavaDescriptor = 17 | "Lcom/rnholeviewexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;"; 18 | 19 | static jni::local_ref initHybrid(jni::alias_ref); 20 | 21 | static void registerNatives(); 22 | 23 | std::shared_ptr getTurboModule( 24 | const std::string &name, 25 | const std::shared_ptr &jsInvoker) override; 26 | std::shared_ptr getTurboModule( 27 | const std::string &name, 28 | const JavaTurboModule::InitParams ¶ms) override; 29 | 30 | /** 31 | * Test-only method. Allows user to verify whether a TurboModule can be 32 | * created by instances of this class. 33 | */ 34 | bool canCreateTurboModule(const std::string &name); 35 | }; 36 | 37 | } // namespace react 38 | } // namespace facebook 39 | -------------------------------------------------------------------------------- /exampleNewArch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rnholeviewexamplenewarch", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "lint": "eslint .", 9 | "start": "react-native start", 10 | "test": "jest" 11 | }, 12 | "dependencies": { 13 | "@types/react-native-video": "^5.0.15", 14 | "react": "19.1.1", 15 | "react-native": "0.82.1", 16 | "react-native-hole-view": "../", 17 | "react-native-video": "v6.17.0" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.25.2", 21 | "@babel/preset-env": "^7.25.3", 22 | "@babel/runtime": "^7.25.0", 23 | "@react-native-community/cli": "20.0.0", 24 | "@react-native-community/cli-platform-android": "20.0.0", 25 | "@react-native-community/cli-platform-ios": "20.0.0", 26 | "@react-native/babel-preset": "0.82.1", 27 | "@react-native/eslint-config": "0.82.1", 28 | "@react-native/metro-config": "0.82.1", 29 | "@react-native/typescript-config": "0.82.1", 30 | "@types/jest": "^29.5.13", 31 | "@types/react": "^19.1.1", 32 | "@types/react-test-renderer": "^19.1.0", 33 | "eslint": "^8.19.0", 34 | "jest": "^29.6.3", 35 | "prettier": "2.8.8", 36 | "react-test-renderer": "19.1.1", 37 | "typescript": "^5.8.3" 38 | }, 39 | "engines": { 40 | "node": ">=20" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnholeviewexample/newarchitecture/components/MainComponentsRegistry.java: -------------------------------------------------------------------------------- 1 | package com.rnholeviewexample.newarchitecture.components; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.proguard.annotations.DoNotStrip; 5 | import com.facebook.react.fabric.ComponentFactory; 6 | import com.facebook.soloader.SoLoader; 7 | 8 | /** 9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a 10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 11 | * folder for you). 12 | * 13 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 14 | * `newArchEnabled` property). Is ignored otherwise. 15 | */ 16 | @DoNotStrip 17 | public class MainComponentsRegistry { 18 | static { 19 | SoLoader.loadLibrary("fabricjni"); 20 | } 21 | 22 | @DoNotStrip private final HybridData mHybridData; 23 | 24 | @DoNotStrip 25 | private native HybridData initHybrid(ComponentFactory componentFactory); 26 | 27 | @DoNotStrip 28 | private MainComponentsRegistry(ComponentFactory componentFactory) { 29 | mHybridData = initHybrid(componentFactory); 30 | } 31 | 32 | @DoNotStrip 33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) { 34 | return new MainComponentsRegistry(componentFactory); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Example app for old architecture 2 | 3 | **NOTE:** run iOS on XCode 16.2 - [issue on 16.3 and later](https://github.com/facebook/react-native/issues/50411?timeline_page=1) 4 | 5 | ## Getting Started 6 | 7 | ### Prerequisites 8 | 9 | 1. Install dependencies: 10 | ```sh 11 | npm install 12 | # or 13 | yarn install 14 | ``` 15 | 16 | 2. For iOS, install CocoaPods dependencies: 17 | ```sh 18 | cd ios 19 | bundle install # First time only 20 | bundle exec pod install 21 | cd .. 22 | ``` 23 | 24 | ### Running the App 25 | 26 | #### Android 27 | 28 | 1. Start Metro bundler (optional - it will start automatically when running the app): 29 | ```sh 30 | npm start 31 | # or 32 | yarn start 33 | ``` 34 | 35 | 2. Run the app: 36 | ```sh 37 | npm run android 38 | # or 39 | yarn android 40 | ``` 41 | 42 | Or open `android/` in Android Studio and run from there. 43 | 44 | #### iOS 45 | 46 | 1. Start Metro bundler (optional - it will start automatically when building from Xcode): 47 | ```sh 48 | npm start 49 | # or 50 | yarn start 51 | ``` 52 | 53 | 2. Run the app: 54 | ```sh 55 | npm run ios 56 | # or 57 | yarn ios 58 | ``` 59 | 60 | Or open `ios/example.xcworkspace` in Xcode and run from there (⌘R). 61 | 62 | **Note:** When running from Xcode, Metro bundler will start automatically before the app launches. 63 | -------------------------------------------------------------------------------- /exampleNewArch/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | **/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | *.keystore 35 | !debug.keystore 36 | .kotlin/ 37 | 38 | # node.js 39 | # 40 | node_modules/ 41 | npm-debug.log 42 | yarn-error.log 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | **/fastlane/report.xml 52 | **/fastlane/Preview.html 53 | **/fastlane/screenshots 54 | **/fastlane/test_output 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # Ruby / CocoaPods 60 | **/Pods/ 61 | /vendor/bundle/ 62 | 63 | # Temporary files created by Metro to check the health of the file watcher 64 | .metro-health-check* 65 | 66 | # testing 67 | /coverage 68 | 69 | # Yarn 70 | .yarn/* 71 | !.yarn/patches 72 | !.yarn/plugins 73 | !.yarn/releases 74 | !.yarn/sdks 75 | !.yarn/versions 76 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import React 3 | import React_RCTAppDelegate 4 | import ReactAppDependencyProvider 5 | 6 | @main 7 | class AppDelegate: UIResponder, UIApplicationDelegate { 8 | var window: UIWindow? 9 | 10 | var reactNativeDelegate: ReactNativeDelegate? 11 | var reactNativeFactory: RCTReactNativeFactory? 12 | 13 | func application( 14 | _ application: UIApplication, 15 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil 16 | ) -> Bool { 17 | let delegate = ReactNativeDelegate() 18 | let factory = RCTReactNativeFactory(delegate: delegate) 19 | delegate.dependencyProvider = RCTAppDependencyProvider() 20 | 21 | reactNativeDelegate = delegate 22 | reactNativeFactory = factory 23 | 24 | window = UIWindow(frame: UIScreen.main.bounds) 25 | 26 | factory.startReactNative( 27 | withModuleName: "exampleNewArch", 28 | in: window, 29 | launchOptions: launchOptions 30 | ) 31 | 32 | return true 33 | } 34 | } 35 | 36 | class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate { 37 | override func sourceURL(for bridge: RCTBridge) -> URL? { 38 | self.bundleURL() 39 | } 40 | 41 | override func bundleURL() -> URL? { 42 | #if DEBUG 43 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index") 44 | #else 45 | Bundle.main.url(forResource: "main", withExtension: "jsbundle") 46 | #endif 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /ios/RNHoleView/RNHoleViewImpl.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoleViewImpl.h 3 | // RNHoleViewProject 4 | // 5 | // Created by Stepan Kopylov on 20/05/2020. 6 | // Copyright © 2020 Stepan Kopylov. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface RNHoleViewHole : NSObject 13 | 14 | @property (nonatomic) CGRect rect; 15 | @property (nonatomic) CGFloat borderRadius; 16 | @property (nonatomic) CGFloat borderTopLeftRadius; 17 | @property (nonatomic) CGFloat borderTopRightRadius; 18 | @property (nonatomic) CGFloat borderBottomLeftRadius; 19 | @property (nonatomic) CGFloat borderBottomRightRadius; 20 | 21 | - (instancetype)initWitnX:(CGFloat)x y:(CGFloat)y 22 | width:(CGFloat)width 23 | height:(CGFloat)height 24 | andBorderRadius:(CGFloat)borderRadius 25 | andBorderTopLeftRadius:(CGFloat)borderTopLeftRadius 26 | andBorderTopRightRadius:(CGFloat)borderTopRightRadius 27 | andBorderBottomLeftRadius:(CGFloat)borderBottomLeftRadius 28 | andBorderBottomRightRadius:(CGFloat)borderBottomRightRadius; 29 | 30 | @end 31 | 32 | typedef void(^AnimationFinishedCallback)(); 33 | 34 | @interface RNHoleViewImpl : UIView 35 | 36 | @property (nonatomic) NSArray *parsedHoles; 37 | 38 | @property (nonatomic) NSArray *holes; 39 | 40 | @property (nonatomic) NSDictionary *animation; 41 | 42 | @property (nonatomic, copy) RCTDirectEventBlock onAnimationFinished; 43 | 44 | @property (nonatomic, copy) AnimationFinishedCallback onAnimationFinishedFabric; 45 | 46 | @end 47 | -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.rnholeviewexample", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.rnholeviewexample", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationTurboModuleManagerDelegate.h" 2 | #include "MainApplicationModuleProvider.h" 3 | 4 | namespace facebook { 5 | namespace react { 6 | 7 | jni::local_ref 8 | MainApplicationTurboModuleManagerDelegate::initHybrid( 9 | jni::alias_ref) { 10 | return makeCxxInstance(); 11 | } 12 | 13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() { 14 | registerHybrid({ 15 | makeNativeMethod( 16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid), 17 | makeNativeMethod( 18 | "canCreateTurboModule", 19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule), 20 | }); 21 | } 22 | 23 | std::shared_ptr 24 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 25 | const std::string &name, 26 | const std::shared_ptr &jsInvoker) { 27 | // Not implemented yet: provide pure-C++ NativeModules here. 28 | return nullptr; 29 | } 30 | 31 | std::shared_ptr 32 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 33 | const std::string &name, 34 | const JavaTurboModule::InitParams ¶ms) { 35 | return MainApplicationModuleProvider(name, params); 36 | } 37 | 38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule( 39 | const std::string &name) { 40 | return getTurboModule(name, nullptr) != nullptr || 41 | getTurboModule(name, {.moduleName = name}) != nullptr; 42 | } 43 | 44 | } // namespace react 45 | } // namespace facebook 46 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rnholeviewexample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 11 | "update_src": "sh refreshSrc.sh", 12 | "postinstall": "sh refreshLib.sh && patch-package" 13 | }, 14 | "dependencies": { 15 | "@types/react-native-video": "^5.0.15", 16 | "patch-package": "^8.0.1", 17 | "react": "18.1.0", 18 | "react-native": "0.70.10", 19 | "react-native-hole-view": "../", 20 | "react-native-video": "v6.0.0-alpha.6" 21 | }, 22 | "devDependencies": { 23 | "@babel/core": "^7.12.9", 24 | "@babel/runtime": "^7.12.5", 25 | "@react-native-community/eslint-config": "^2.0.0", 26 | "@react-native/typescript-config": "0.82.1", 27 | "@tsconfig/react-native": "^2.0.2", 28 | "@types/jest": "^26.0.23", 29 | "@types/react": "^18.0.21", 30 | "@types/react-native": "^0.70.6", 31 | "@types/react-test-renderer": "^18.0.0", 32 | "@typescript-eslint/eslint-plugin": "^5.37.0", 33 | "@typescript-eslint/parser": "^5.37.0", 34 | "babel-jest": "^26.6.3", 35 | "eslint": "^7.32.0", 36 | "jest": "^26.6.3", 37 | "metro-react-native-babel-preset": "0.72.3", 38 | "react-test-renderer": "18.1.0", 39 | "typescript": "^4.8.3" 40 | }, 41 | "jest": { 42 | "preset": "react-native", 43 | "moduleFileExtensions": [ 44 | "ts", 45 | "tsx", 46 | "js", 47 | "jsx", 48 | "json", 49 | "node" 50 | ] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-hole-view", 3 | "version": "4.0.0", 4 | "description": "Component to made an overlay with touch-through hole", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "publishConfig": { 8 | "registry": "https://registry.npmjs.org" 9 | }, 10 | "scripts": { 11 | "build": "rm -rf ./dist && tsc -p tsconfig.json", 12 | "preversion": "npm run build", 13 | "prepare": "install-peers" 14 | }, 15 | "files": [ 16 | "android", 17 | "ios", 18 | "src", 19 | "dist", 20 | "react-native-hole-view.podspec" 21 | ], 22 | "keywords": [ 23 | "react-native", 24 | "react-component", 25 | "react-native-component", 26 | "react", 27 | "mobile", 28 | "ios", 29 | "android", 30 | "ui", 31 | "vector", 32 | "retina", 33 | "hole", 34 | "mask" 35 | ], 36 | "author": "ibitcy", 37 | "license": "ISC", 38 | "devDependencies": { 39 | "@types/node": "^20.3.2", 40 | "@types/react-native": "^0.69.2", 41 | "install-peers-cli": "2.2.0", 42 | "typescript": "4.2.4" 43 | }, 44 | "peerDependencies": { 45 | "react": "*", 46 | "react-native": "*" 47 | }, 48 | "dependencies": {}, 49 | "repository": { 50 | "type": "git", 51 | "url": "git+https://github.com/ibitcy/react-native-hole-view.git" 52 | }, 53 | "bugs": { 54 | "url": "https://github.com/ibitcy/react-native-hole-view/issues" 55 | }, 56 | "homepage": "https://github.com/ibitcy/react-native-hole-view#readme", 57 | "codegenConfig": { 58 | "name": "RNHoleView", 59 | "type": "components", 60 | "jsSrcsDir": "./src/codegenSpec", 61 | "ios": { 62 | "components": { 63 | "RNHoleView": { 64 | "className": "RNHoleView" 65 | } 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | RNHoleViewExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "31.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 31 8 | targetSdkVersion = 31 9 | 10 | if (System.properties['os.arch'] == "aarch64") { 11 | // For M1 Users we need to use the NDK 24 which added support for aarch64 12 | ndkVersion = "24.0.8215888" 13 | } else { 14 | // Otherwise we default to the side-by-side NDK version from AGP. 15 | ndkVersion = "21.4.7075529" 16 | } 17 | } 18 | repositories { 19 | google() 20 | mavenCentral() 21 | } 22 | dependencies { 23 | classpath("com.android.tools.build:gradle:7.2.1") 24 | classpath("com.facebook.react:react-native-gradle-plugin") 25 | classpath("de.undercouch:gradle-download-task:5.0.1") 26 | // NOTE: Do not place your application dependencies here; they belong 27 | // in the individual module build.gradle files 28 | } 29 | } 30 | 31 | allprojects { 32 | repositories { 33 | maven { 34 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 35 | url("$rootDir/../node_modules/react-native/android") 36 | } 37 | maven { 38 | // Android JSC is installed from npm 39 | url("$rootDir/../node_modules/jsc-android/dist") 40 | } 41 | mavenCentral { 42 | // We don't want to fetch react-native from Maven Central as there are 43 | // older versions over there. 44 | content { 45 | excludeGroup "com.facebook.react" 46 | } 47 | } 48 | google() 49 | maven { url 'https://www.jitpack.io' } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CADisableMinimumFrameDurationOnPhone 6 | 7 | CFBundleDevelopmentRegion 8 | en 9 | CFBundleDisplayName 10 | exampleNewArch 11 | CFBundleExecutable 12 | $(EXECUTABLE_NAME) 13 | CFBundleIdentifier 14 | $(PRODUCT_BUNDLE_IDENTIFIER) 15 | CFBundleInfoDictionaryVersion 16 | 6.0 17 | CFBundleName 18 | $(PRODUCT_NAME) 19 | CFBundlePackageType 20 | APPL 21 | CFBundleShortVersionString 22 | $(MARKETING_VERSION) 23 | CFBundleSignature 24 | ???? 25 | CFBundleVersion 26 | $(CURRENT_PROJECT_VERSION) 27 | LSRequiresIPhoneOS 28 | 29 | NSAppTransportSecurity 30 | 31 | NSAllowsArbitraryLoads 32 | 33 | NSAllowsLocalNetworking 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | RCTNewArchEnabled 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | arm64 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnholeviewexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rnholeviewexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.ReactRootView; 6 | 7 | public class MainActivity extends ReactActivity { 8 | 9 | /** 10 | * Returns the name of the main component registered from JavaScript. This is used to schedule 11 | * rendering of the component. 12 | */ 13 | @Override 14 | protected String getMainComponentName() { 15 | return "RNHoleViewExample"; 16 | } 17 | 18 | /** 19 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 20 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer 21 | * (Paper). 22 | */ 23 | @Override 24 | protected ReactActivityDelegate createReactActivityDelegate() { 25 | return new MainActivityDelegate(this, getMainComponentName()); 26 | } 27 | 28 | public static class MainActivityDelegate extends ReactActivityDelegate { 29 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) { 30 | super(activity, mainComponentName); 31 | } 32 | 33 | @Override 34 | protected ReactRootView createRootView() { 35 | ReactRootView reactRootView = new ReactRootView(getContext()); 36 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 37 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); 38 | return reactRootView; 39 | } 40 | 41 | @Override 42 | protected boolean isConcurrentRootEnabled() { 43 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). 44 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html 45 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /android/src/oldarch/com/ibitcy/react_native_hole_view/RNHoleViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.ibitcy.react_native_hole_view 2 | 3 | import android.content.res.Resources 4 | 5 | import com.facebook.react.bridge.* 6 | import com.facebook.react.common.MapBuilder 7 | import com.facebook.react.uimanager.ThemedReactContext 8 | import com.facebook.react.uimanager.ViewGroupManager 9 | import com.facebook.react.uimanager.annotations.ReactProp 10 | import com.facebook.react.uimanager.events.RCTEventEmitter 11 | 12 | class RNHoleViewManager(private val reactContext: ReactApplicationContext): ViewGroupManager() { 13 | 14 | private val impl = RNHoleViewManagerImpl(reactContext) 15 | 16 | override fun getName() = RNHoleViewManagerImpl.NAME 17 | 18 | override fun createViewInstance(reactContext: ThemedReactContext): RNHoleView { 19 | val v = RNHoleView(reactContext) 20 | v.onAnimationFinished = { 21 | reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent( 22 | v.id, 23 | RNHoleViewManagerImpl.ON_ANIMATION_FINISHED, 24 | Arguments.createMap() 25 | ) 26 | } 27 | return v 28 | } 29 | 30 | override fun getExportedCustomDirectEventTypeConstants(): MutableMap { 31 | return MapBuilder.builder() 32 | .put(RNHoleViewManagerImpl.ON_ANIMATION_FINISHED, MapBuilder.of( 33 | "registrationName", RNHoleViewManagerImpl.ON_ANIMATION_FINISHED 34 | ) 35 | ) 36 | .build() 37 | } 38 | 39 | @ReactProp(name = "animation") 40 | fun setAnimation(view: RNHoleView, animation: ReadableMap?) { 41 | impl.setAnimation(view, animation) 42 | } 43 | 44 | @ReactProp(name = "holes") 45 | fun setHoles(view: RNHoleView, holesArg: ReadableArray?) { 46 | impl.setHoles(view, holesArg) 47 | } 48 | } -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnholeviewexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java: -------------------------------------------------------------------------------- 1 | package com.rnholeviewexample.newarchitecture.modules; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.soloader.SoLoader; 8 | import java.util.List; 9 | 10 | /** 11 | * Class responsible to load the TurboModules. This class has native methods and needs a 12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 13 | * folder for you). 14 | * 15 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 16 | * `newArchEnabled` property). Is ignored otherwise. 17 | */ 18 | public class MainApplicationTurboModuleManagerDelegate 19 | extends ReactPackageTurboModuleManagerDelegate { 20 | 21 | private static volatile boolean sIsSoLibraryLoaded; 22 | 23 | protected MainApplicationTurboModuleManagerDelegate( 24 | ReactApplicationContext reactApplicationContext, List packages) { 25 | super(reactApplicationContext, packages); 26 | } 27 | 28 | protected native HybridData initHybrid(); 29 | 30 | native boolean canCreateTurboModule(String moduleName); 31 | 32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder { 33 | protected MainApplicationTurboModuleManagerDelegate build( 34 | ReactApplicationContext context, List packages) { 35 | return new MainApplicationTurboModuleManagerDelegate(context, packages); 36 | } 37 | } 38 | 39 | @Override 40 | protected synchronized void maybeLoadOtherSoLibraries() { 41 | if (!sIsSoLibraryLoaded) { 42 | // If you change the name of your application .so file in the Android.mk file, 43 | // make sure you update the name here as well. 44 | SoLoader.loadLibrary("rnholeviewexample_appmodules"); 45 | sIsSoLibraryLoaded = true; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /exampleNewArch/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | 25 | # Use this property to specify which architecture you want to build. 26 | # You can also override it from the CLI using 27 | # ./gradlew -PreactNativeArchitectures=x86_64 28 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 29 | 30 | # Use this property to enable support to the new architecture. 31 | # This will allow you to use TurboModules and the Fabric render in 32 | # your application. You should enable this flag either if you want 33 | # to write custom TurboModules/Fabric components OR use libraries that 34 | # are providing them. 35 | newArchEnabled=true 36 | 37 | # Use this property to enable or disable the Hermes JS engine. 38 | # If set to false, you will be using JSC instead. 39 | hermesEnabled=true 40 | 41 | # Use this property to enable edge-to-edge display support. 42 | # This allows your app to draw behind system bars for an immersive UI. 43 | # Note: Only works with ReactActivity and should not be used with custom Activity. 44 | edgeToEdgeEnabled=false 45 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '12.4' 5 | install! 'cocoapods', :deterministic_uuids => false 6 | 7 | target 'RNHoleViewExample' do 8 | config = use_native_modules! 9 | 10 | # Flags change depending on the env values. 11 | flags = get_default_flags() 12 | 13 | use_react_native!( 14 | :path => config[:reactNativePath], 15 | # Hermes is now enabled by default. Disable by setting this flag to false. 16 | # Upcoming versions of React Native may rely on get_default_flags(), but 17 | # we make it explicit here to aid in the React Native upgrade process. 18 | :hermes_enabled => true, 19 | :fabric_enabled => flags[:fabric_enabled], 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | :flipper_configuration => FlipperConfiguration.enabled, 25 | # An absolute path to your application root. 26 | :app_path => "#{Pod::Config.instance.installation_root}/.." 27 | ) 28 | 29 | target 'RNHoleViewExampleTests' do 30 | inherit! :complete 31 | # Pods for testing 32 | end 33 | 34 | post_install do |installer| 35 | react_native_post_install( 36 | installer, 37 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 38 | # necessary for Mac Catalyst builds 39 | :mac_catalyst_enabled => false 40 | ) 41 | # https://stackoverflow.com/questions/78121217/build-error-on-xcode-15-3-called-object-type-facebookflippersocketcertifi 42 | installer.pods_project.targets.each do |target| 43 | if target.name == 'Flipper' 44 | file_path = 'Pods/Flipper/xplat/Flipper/FlipperTransportTypes.h' 45 | contents = File.read(file_path) 46 | unless contents.include?('#include ') 47 | File.chmod(0755, file_path) 48 | File.open(file_path, 'w') do |file| 49 | file.puts('#include ') 50 | file.puts(contents) 51 | end 52 | end 53 | end 54 | end 55 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 56 | end 57 | end 58 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExampleTests/RNHoleViewExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface RNHoleViewExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation RNHoleViewExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | 2 | buildscript { 3 | ext.kotlin_version = '1.6.20' 4 | 5 | repositories { 6 | google() 7 | mavenCentral() 8 | } 9 | 10 | dependencies { 11 | classpath 'com.android.tools.build:gradle:4.1.0' 12 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 13 | } 14 | } 15 | 16 | def isNewArchitectureEnabled() { 17 | return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true" 18 | } 19 | 20 | apply plugin: 'com.android.library' 21 | if (isNewArchitectureEnabled()) { 22 | apply plugin: 'com.facebook.react' 23 | } 24 | apply plugin: 'kotlin-android' 25 | 26 | def safeExtGet(prop, fallback) { 27 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 28 | } 29 | 30 | android { 31 | namespace 'com.ibitcy.react_native_hole_view' 32 | compileSdkVersion safeExtGet('compileSdkVersion', 29) 33 | buildToolsVersion safeExtGet('buildToolsVersion', '29.0.2') 34 | 35 | defaultConfig { 36 | minSdkVersion safeExtGet('minSdkVersion', 21) 37 | targetSdkVersion safeExtGet('targetSdkVersion', 29) 38 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 39 | externalNativeBuild { 40 | cmake { 41 | arguments "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON" 42 | } 43 | } 44 | } 45 | lintOptions { 46 | abortOnError false 47 | } 48 | sourceSets { 49 | main { 50 | if (isNewArchitectureEnabled()) { 51 | java.srcDirs += ['src/newarch/'] 52 | } else { 53 | java.srcDirs += ['src/oldarch/'] 54 | } 55 | } 56 | } 57 | } 58 | 59 | repositories { 60 | google() 61 | mavenCentral() 62 | maven { 63 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 64 | url "$rootDir/../../../node_modules/react-native/android" 65 | } 66 | } 67 | 68 | dependencies { 69 | implementation 'com.facebook.react:react-native:+' 70 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 71 | } 72 | 73 | // if (isNewArchitectureEnabled()) { 74 | // react { 75 | // jsRootDir = file("../src/") 76 | // libraryName = "RNHoleView" 77 | // } 78 | // } -------------------------------------------------------------------------------- /example/android/app/src/main/jni/MainComponentsRegistry.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponentsRegistry.h" 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | 9 | namespace facebook { 10 | namespace react { 11 | 12 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {} 13 | 14 | std::shared_ptr 15 | MainComponentsRegistry::sharedProviderRegistry() { 16 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); 17 | 18 | // Autolinked providers registered by RN CLI 19 | rncli_registerProviders(providerRegistry); 20 | 21 | // Custom Fabric Components go here. You can register custom 22 | // components coming from your App or from 3rd party libraries here. 23 | // 24 | // providerRegistry->add(concreteComponentDescriptorProvider< 25 | // AocViewerComponentDescriptor>()); 26 | return providerRegistry; 27 | } 28 | 29 | jni::local_ref 30 | MainComponentsRegistry::initHybrid( 31 | jni::alias_ref, 32 | ComponentFactory *delegate) { 33 | auto instance = makeCxxInstance(delegate); 34 | 35 | auto buildRegistryFunction = 36 | [](EventDispatcher::Weak const &eventDispatcher, 37 | ContextContainer::Shared const &contextContainer) 38 | -> ComponentDescriptorRegistry::Shared { 39 | auto registry = MainComponentsRegistry::sharedProviderRegistry() 40 | ->createComponentDescriptorRegistry( 41 | {eventDispatcher, contextContainer}); 42 | 43 | auto mutableRegistry = 44 | std::const_pointer_cast(registry); 45 | 46 | mutableRegistry->setFallbackComponentDescriptor( 47 | std::make_shared( 48 | ComponentDescriptorParameters{ 49 | eventDispatcher, contextContainer, nullptr})); 50 | 51 | return registry; 52 | }; 53 | 54 | delegate->buildRegistryFunction = buildRegistryFunction; 55 | return instance; 56 | } 57 | 58 | void MainComponentsRegistry::registerNatives() { 59 | registerHybrid({ 60 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid), 61 | }); 62 | } 63 | 64 | } // namespace react 65 | } // namespace facebook 66 | -------------------------------------------------------------------------------- /android/src/newarch/com/ibitcy/react_native_hole_view/RNHoleViewManager.kt: -------------------------------------------------------------------------------- 1 | package com.ibitcy.react_native_hole_view 2 | 3 | import com.ibitcy.react_native_hole_view.events.AnimFinishEvent 4 | 5 | import android.content.res.Resources 6 | 7 | import com.facebook.react.bridge.* 8 | import com.facebook.react.common.MapBuilder 9 | import com.facebook.react.module.annotations.ReactModule 10 | import com.facebook.react.uimanager.ThemedReactContext 11 | import com.facebook.react.uimanager.ViewGroupManager 12 | import com.facebook.react.uimanager.annotations.ReactProp 13 | import com.facebook.react.uimanager.events.RCTEventEmitter 14 | import com.facebook.react.uimanager.ViewManagerDelegate 15 | import com.facebook.react.uimanager.UIManagerHelper 16 | import com.facebook.react.uimanager.events.EventDispatcher 17 | 18 | import com.facebook.react.viewmanagers.RNHoleViewManagerInterface 19 | import com.facebook.react.viewmanagers.RNHoleViewManagerDelegate 20 | 21 | @ReactModule(name = RNHoleViewManagerImpl.NAME) 22 | class RNHoleViewManager(val reactContext: ReactApplicationContext): ViewGroupManager(), RNHoleViewManagerInterface { 23 | 24 | val impl = RNHoleViewManagerImpl(reactContext) 25 | 26 | private val delegate: RNHoleViewManagerDelegate = RNHoleViewManagerDelegate(this) 27 | 28 | override fun getDelegate(): ViewManagerDelegate = delegate 29 | 30 | override fun getName() = RNHoleViewManagerImpl.NAME 31 | 32 | override fun createViewInstance(reactContext: ThemedReactContext): RNHoleView { 33 | val v = RNHoleView(reactContext) 34 | v.onAnimationFinished = { 35 | val event = AnimFinishEvent(v.id) 36 | val eventDispatcher: EventDispatcher? = 37 | UIManagerHelper.getEventDispatcherForReactTag(reactContext, v.id) 38 | eventDispatcher?.dispatchEvent(event) 39 | } 40 | return v 41 | } 42 | 43 | override fun getExportedCustomBubblingEventTypeConstants(): MutableMap { 44 | return MapBuilder.builder() 45 | .put( 46 | "topAnimationFinished", 47 | MapBuilder.of( 48 | "phasedRegistrationNames", 49 | MapBuilder.of("bubbled", RNHoleViewManagerImpl.ON_ANIMATION_FINISHED) 50 | ) 51 | ) 52 | .build() 53 | .toMutableMap() 54 | } 55 | 56 | @ReactProp(name = "animation") 57 | override fun setAnimation(view: RNHoleView, animation: ReadableMap?) { 58 | impl.setAnimation(view,animation) 59 | } 60 | 61 | @ReactProp(name = "holes") 62 | override fun setHoles(view: RNHoleView, holesArg: ReadableArray?) { 63 | impl.setHoles(view,holesArg) 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnholeviewexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rnholeviewexample; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.config.ReactFeatureFlags; 11 | import com.facebook.soloader.SoLoader; 12 | import com.rnholeviewexample.newarchitecture.MainApplicationReactNativeHost; 13 | import java.lang.reflect.InvocationTargetException; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | private final ReactNativeHost mNewArchitectureNativeHost = 41 | new MainApplicationReactNativeHost(this); 42 | 43 | @Override 44 | public ReactNativeHost getReactNativeHost() { 45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 46 | return mNewArchitectureNativeHost; 47 | } else { 48 | return mReactNativeHost; 49 | } 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | // If you opted-in for the New Architecture, we enable the TurboModule system 56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 57 | SoLoader.init(this, /* native exopackage */ false); 58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 59 | } 60 | 61 | /** 62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | * 65 | * @param context 66 | * @param reactInstanceManager 67 | */ 68 | private static void initializeFlipper( 69 | Context context, ReactInstanceManager reactInstanceManager) { 70 | if (BuildConfig.DEBUG) { 71 | try { 72 | /* 73 | We use reflection here to pick up the class that initializes Flipper, 74 | since Flipper library is not available in release mode 75 | */ 76 | Class aClass = Class.forName("com.rnholeviewexample.ReactNativeFlipper"); 77 | aClass 78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 79 | .invoke(null, context, reactInstanceManager); 80 | } catch (ClassNotFoundException e) { 81 | e.printStackTrace(); 82 | } catch (NoSuchMethodException e) { 83 | e.printStackTrace(); 84 | } catch (IllegalAccessException e) { 85 | e.printStackTrace(); 86 | } catch (InvocationTargetException e) { 87 | e.printStackTrace(); 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /example/android/app/src/debug/java/com/rnholeviewexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.rnholeviewexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceEventListener; 23 | import com.facebook.react.ReactInstanceManager; 24 | import com.facebook.react.bridge.ReactContext; 25 | import com.facebook.react.modules.network.NetworkingModule; 26 | import okhttp3.OkHttpClient; 27 | 28 | public class ReactNativeFlipper { 29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 30 | if (FlipperUtils.shouldEnableFlipper(context)) { 31 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 32 | 33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 34 | client.addPlugin(new ReactFlipperPlugin()); 35 | client.addPlugin(new DatabasesFlipperPlugin(context)); 36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 37 | client.addPlugin(CrashReporterPlugin.getInstance()); 38 | 39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 40 | NetworkingModule.setCustomClientBuilder( 41 | new NetworkingModule.CustomClientBuilder() { 42 | @Override 43 | public void apply(OkHttpClient.Builder builder) { 44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 45 | } 46 | }); 47 | client.addPlugin(networkFlipperPlugin); 48 | client.start(); 49 | 50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 51 | // Hence we run if after all native modules have been initialized 52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 53 | if (reactContext == null) { 54 | reactInstanceManager.addReactInstanceEventListener( 55 | new ReactInstanceEventListener() { 56 | @Override 57 | public void onReactContextInitialized(ReactContext reactContext) { 58 | reactInstanceManager.removeReactInstanceEventListener(this); 59 | reactContext.runOnNativeModulesQueueThread( 60 | new Runnable() { 61 | @Override 62 | public void run() { 63 | client.addPlugin(new FrescoFlipperPlugin()); 64 | } 65 | }); 66 | } 67 | }); 68 | } else { 69 | client.addPlugin(new FrescoFlipperPlugin()); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@types/node@^20.3.2": 6 | version "20.3.2" 7 | resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.2.tgz#fa6a90f2600e052a03c18b8cb3fd83dd4e599898" 8 | integrity sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw== 9 | 10 | "@types/prop-types@*": 11 | version "15.7.5" 12 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" 13 | integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== 14 | 15 | "@types/react-native@^0.69.2": 16 | version "0.69.21" 17 | resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.69.21.tgz#50180a7531310df3bb71fda4d1822bca42039ac8" 18 | integrity sha512-D8WTR5gmrdwv95nxzjRdrYYRENv9UEP/MJemHWSBK10FYi2+qqpLq9D3W2pJNJCA6xUzIAQwcUrAsWbwQTadOA== 19 | dependencies: 20 | "@types/react" "*" 21 | 22 | "@types/react@*": 23 | version "18.2.14" 24 | resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127" 25 | integrity sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g== 26 | dependencies: 27 | "@types/prop-types" "*" 28 | "@types/scheduler" "*" 29 | csstype "^3.0.2" 30 | 31 | "@types/scheduler@*": 32 | version "0.16.3" 33 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5" 34 | integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ== 35 | 36 | commander@^2.20.0: 37 | version "2.20.3" 38 | resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" 39 | integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== 40 | 41 | csstype@^3.0.2: 42 | version "3.1.2" 43 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" 44 | integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== 45 | 46 | executioner@^2.0.1: 47 | version "2.0.1" 48 | resolved "https://registry.yarnpkg.com/executioner/-/executioner-2.0.1.tgz#add328e03bc45dd598f358fbb529fc0be0ec6fcd" 49 | integrity sha1-rdMo4DvEXdWY81j7tSn8C+Dsb80= 50 | dependencies: 51 | mixly "^1.0.0" 52 | 53 | fulcon@^1.0.1: 54 | version "1.0.2" 55 | resolved "https://registry.yarnpkg.com/fulcon/-/fulcon-1.0.2.tgz#8a4dfda4c73fcd9cc62a79d5045c392b45547320" 56 | integrity sha1-ik39pMc/zZzGKnnVBFw5K0VUcyA= 57 | 58 | install-peers-cli@2.2.0: 59 | version "2.2.0" 60 | resolved "https://registry.yarnpkg.com/install-peers-cli/-/install-peers-cli-2.2.0.tgz#f76f1ec8ac9fa7f920c05743e011554edad85f8d" 61 | integrity sha512-scSNvF49HDOLNm2xLFwST23g/OvfsceiA087bcGBgZP/ZNCrvpSaCn5IrWNZ2XYmFFykXF/6J1Zgm+D/JgRgtA== 62 | dependencies: 63 | commander "^2.20.0" 64 | executioner "^2.0.1" 65 | 66 | mixly@^1.0.0: 67 | version "1.0.0" 68 | resolved "https://registry.yarnpkg.com/mixly/-/mixly-1.0.0.tgz#9b5a2e1f63e6dfba0d30e6797ffae62ab1dc24ef" 69 | integrity sha1-m1ouH2Pm37oNMOZ5f/rmKrHcJO8= 70 | dependencies: 71 | fulcon "^1.0.1" 72 | 73 | typescript@4.2.4: 74 | version "4.2.4" 75 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961" 76 | integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg== 77 | -------------------------------------------------------------------------------- /exampleNewArch/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @REM Copyright (c) Meta Platforms, Inc. and affiliates. 2 | @REM 3 | @REM This source code is licensed under the MIT license found in the 4 | @REM LICENSE file in the root directory of this source tree. 5 | 6 | @rem 7 | @rem Copyright 2015 the original author or authors. 8 | @rem 9 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 10 | @rem you may not use this file except in compliance with the License. 11 | @rem You may obtain a copy of the License at 12 | @rem 13 | @rem https://www.apache.org/licenses/LICENSE-2.0 14 | @rem 15 | @rem Unless required by applicable law or agreed to in writing, software 16 | @rem distributed under the License is distributed on an "AS IS" BASIS, 17 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 18 | @rem See the License for the specific language governing permissions and 19 | @rem limitations under the License. 20 | @rem 21 | @rem SPDX-License-Identifier: Apache-2.0 22 | @rem 23 | 24 | @if "%DEBUG%"=="" @echo off 25 | @rem ########################################################################## 26 | @rem 27 | @rem Gradle startup script for Windows 28 | @rem 29 | @rem ########################################################################## 30 | 31 | @rem Set local scope for the variables with windows NT shell 32 | if "%OS%"=="Windows_NT" setlocal 33 | 34 | set DIRNAME=%~dp0 35 | if "%DIRNAME%"=="" set DIRNAME=. 36 | @rem This is normally unused 37 | set APP_BASE_NAME=%~n0 38 | set APP_HOME=%DIRNAME% 39 | 40 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 41 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 42 | 43 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 44 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 45 | 46 | @rem Find java.exe 47 | if defined JAVA_HOME goto findJavaFromJavaHome 48 | 49 | set JAVA_EXE=java.exe 50 | %JAVA_EXE% -version >NUL 2>&1 51 | if %ERRORLEVEL% equ 0 goto execute 52 | 53 | echo. 1>&2 54 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2 55 | echo. 1>&2 56 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 57 | echo location of your Java installation. 1>&2 58 | 59 | goto fail 60 | 61 | :findJavaFromJavaHome 62 | set JAVA_HOME=%JAVA_HOME:"=% 63 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 64 | 65 | if exist "%JAVA_EXE%" goto execute 66 | 67 | echo. 1>&2 68 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2 69 | echo. 1>&2 70 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2 71 | echo location of your Java installation. 1>&2 72 | 73 | goto fail 74 | 75 | :execute 76 | @rem Setup the command line 77 | 78 | set CLASSPATH= 79 | 80 | 81 | @rem Execute Gradle 82 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %* 83 | 84 | :end 85 | @rem End local scope for the variables with windows NT shell 86 | if %ERRORLEVEL% equ 0 goto mainEnd 87 | 88 | :fail 89 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 90 | rem the _cmd.exe /c_ return code! 91 | set EXIT_CODE=%ERRORLEVEL% 92 | if %EXIT_CODE% equ 0 set EXIT_CODE=1 93 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE% 94 | exit /b %EXIT_CODE% 95 | 96 | :mainEnd 97 | if "%OS%"=="Windows_NT" endlocal 98 | 99 | :omega 100 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch.xcodeproj/xcshareddata/xcschemes/exampleNewArch.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample.xcodeproj/xcshareddata/xcschemes/RNHoleViewExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | import { ScrollView, View, Text, TouchableOpacity } from "react-native"; 3 | 4 | import { 5 | RNHole, 6 | RNHoleView, 7 | ERNHoleViewTimingFunction, 8 | IRNHoleViewAnimation, 9 | } from "react-native-hole-view/src"; 10 | 11 | import Video from "react-native-video"; 12 | 13 | const firstHole: RNHole = { 14 | x: 150, 15 | y: 350, 16 | width: 120, 17 | height: 120, 18 | borderRadius: 60, 19 | }; 20 | const secondHole: RNHole = { 21 | x: 150, 22 | y: 40, 23 | width: 120, 24 | height: 120, 25 | borderRadius: 60, 26 | }; 27 | 28 | const animationSettings: IRNHoleViewAnimation = { 29 | timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, 30 | duration: 200, 31 | }; 32 | 33 | const App = () => { 34 | const [holes, setHoles] = useState([]); 35 | const [animated, setAnimated] = useState(false); 36 | const [animation, setAnimation] = useState( 37 | undefined 38 | ); 39 | 40 | const onPress = useCallback(() => { 41 | if (animated) { 42 | setHoles([firstHole]); 43 | } else { 44 | setHoles([secondHole]); 45 | } 46 | 47 | setAnimation({ ...animationSettings }); 48 | setAnimated(!animated); 49 | }, [animated, animation]); 50 | 51 | useEffect(() => { 52 | onPress(); 53 | }, []); 54 | 55 | return ( 56 | 57 | 58 | {"Wow! I'm a text inside a hole!"} 59 | 60 | {}} 62 | style={{ backgroundColor: "pink", padding: 10, borderRadius: 5 }} 63 | > 64 | {"Wow! I'm a button inside a hole!"} 65 | 66 | 70 | 71 | { 72 | "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" 73 | } 74 | 75 | 76 | { 86 | setAnimation(undefined); 87 | }} 88 | > 89 | 98 | 110 | 119 | {"Animate!"} 120 | 121 | 122 | 123 | ); 124 | }; 125 | 126 | export default App; 127 | -------------------------------------------------------------------------------- /exampleNewArch/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from 'react'; 2 | import { ScrollView, View, Text, TouchableOpacity } from 'react-native'; 3 | 4 | import { 5 | RNHole, 6 | RNHoleView, 7 | ERNHoleViewTimingFunction, 8 | IRNHoleViewAnimation, 9 | } from 'react-native-hole-view/src'; 10 | 11 | import Video from 'react-native-video'; 12 | 13 | const firstHole: RNHole = { 14 | x: 150, 15 | y: 350, 16 | width: 120, 17 | height: 120, 18 | borderRadius: 60, 19 | }; 20 | const secondHole: RNHole = { 21 | x: 150, 22 | y: 40, 23 | width: 120, 24 | height: 120, 25 | borderRadius: 60, 26 | }; 27 | 28 | const animationSettings: IRNHoleViewAnimation = { 29 | timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, 30 | duration: 200, 31 | }; 32 | 33 | const App = () => { 34 | const [holes, setHoles] = useState([]); 35 | const [animated, setAnimated] = useState(false); 36 | const [animation, setAnimation] = useState( 37 | undefined, 38 | ); 39 | 40 | const onPress = useCallback(() => { 41 | if (animated) { 42 | setHoles([firstHole]); 43 | } else { 44 | setHoles([secondHole]); 45 | } 46 | 47 | setAnimation({ ...animationSettings }); 48 | setAnimated(!animated); 49 | }, [animated, animation]); 50 | 51 | useEffect(() => { 52 | onPress(); 53 | }, []); 54 | 55 | return ( 56 | 57 | 58 | {"Wow! I'm a text inside a hole!"} 59 | 60 | {}} 62 | style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }} 63 | > 64 | {"Wow! I'm a button inside a hole!"} 65 | 66 | 70 | 71 | { 72 | "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" 73 | } 74 | 75 | 76 | { 86 | setAnimation(undefined); 87 | }} 88 | > 89 | 98 | 110 | 119 | {'Animate!'} 120 | 121 | 122 | 123 | ); 124 | }; 125 | 126 | export default App; 127 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { requireNativeComponent, ViewProps } from 'react-native'; 2 | import * as React from 'react'; 3 | 4 | const isFabricEnabled = global.nativeFabricUIManager != null; 5 | 6 | const RNHoleViewManager = isFabricEnabled ? 7 | require("./codegenSpec/RNHoleViewNativeComponent").default : 8 | requireNativeComponent('RNHoleView'); 9 | 10 | const DEFAULT_DURATION = 1000; 11 | const DEFAULT_RADIUS_VALUE = -1; 12 | 13 | export class RNHole { 14 | height: number; 15 | width: number; 16 | x: number; 17 | y: number; 18 | borderRadius?: number = DEFAULT_RADIUS_VALUE; 19 | isRTL? = false; 20 | borderTopLeftRadius? = DEFAULT_RADIUS_VALUE; 21 | borderTopRightRadius? = DEFAULT_RADIUS_VALUE; 22 | borderBottomLeftRadius? = DEFAULT_RADIUS_VALUE; 23 | borderBottomRightRadius? = DEFAULT_RADIUS_VALUE; 24 | borderTopStartRadius? = DEFAULT_RADIUS_VALUE; 25 | borderTopEndRadius? = DEFAULT_RADIUS_VALUE; 26 | borderBottomStartRadius? = DEFAULT_RADIUS_VALUE; 27 | borderBottomEndRadius? = DEFAULT_RADIUS_VALUE; 28 | } 29 | 30 | export enum ERNHoleViewTimingFunction { 31 | LINEAR = 'LINEAR', 32 | EASE_IN = 'EASE_IN', 33 | EASE_OUT = 'EASE_OUT', 34 | EASE_IN_OUT = 'EASE_IN_OUT', 35 | } 36 | 37 | export interface IRNHoleViewAnimation { 38 | duration?: number; 39 | timingFunction?: ERNHoleViewTimingFunction; 40 | } 41 | 42 | export interface IRNHoleView extends ViewProps { 43 | holes?: RNHole[]; 44 | animation?: IRNHoleViewAnimation; 45 | onAnimationFinished?: () => void; 46 | } 47 | 48 | const sanitizeAnimationProp = (animation) => { 49 | const animationProp = animation 50 | ? { 51 | duration: typeof animation.duration === 'number' ? animation.duration : DEFAULT_DURATION, 52 | timingFunction: animation.timingFunction || ERNHoleViewTimingFunction.LINEAR, 53 | } 54 | : undefined; 55 | return animationProp; 56 | } 57 | 58 | const sanitizeHolesProp = (holes) => { 59 | const holesProp = []; 60 | if (holes!=null) { 61 | holes.forEach(h => { 62 | holesProp.push({ 63 | height: h.height, 64 | width: h.width, 65 | x: h.x, 66 | y: h.y, 67 | borderRadius: typeof h.borderRadius === 'number' ? h.borderRadius : DEFAULT_RADIUS_VALUE, 68 | isRTL: !!h.isRTL, 69 | borderTopLeftRadius: typeof h.borderTopLeftRadius === 'number' ? h.borderTopLeftRadius : DEFAULT_RADIUS_VALUE, 70 | borderTopRightRadius: typeof h.borderTopRightRadius === 'number' ? h.borderTopRightRadius : DEFAULT_RADIUS_VALUE, 71 | borderBottomLeftRadius: typeof h.borderBottomLeftRadius === 'number' ? h.borderBottomLeftRadius : DEFAULT_RADIUS_VALUE, 72 | borderBottomRightRadius: typeof h.borderBottomRightRadius === 'number' ? h.borderBottomRightRadius : DEFAULT_RADIUS_VALUE, 73 | borderTopStartRadius: typeof h.borderTopStartRadius === 'number' ? h.borderTopStartRadius : DEFAULT_RADIUS_VALUE, 74 | borderTopEndRadius: typeof h.borderTopEndRadius === 'number' ? h.borderTopEndRadius : DEFAULT_RADIUS_VALUE, 75 | borderBottomStartRadius: typeof h.borderBottomStartRadius === 'number' ? h.borderBottomStartRadius : DEFAULT_RADIUS_VALUE, 76 | borderBottomEndRadius: typeof h.borderBottomEndRadius === 'number' ? h.borderBottomEndRadius : DEFAULT_RADIUS_VALUE 77 | }); 78 | }); 79 | } 80 | return holesProp; 81 | } 82 | 83 | export const RNHoleView: React.FC = props => { 84 | const { animation, holes, onAnimationFinished, ...rest } = props; 85 | 86 | const animationProp = sanitizeAnimationProp(animation); 87 | const holesProp = sanitizeHolesProp(holes); 88 | 89 | return ( 90 | 91 | ); 92 | }; 93 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /exampleNewArch/ios/exampleNewArch/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/ios/RNHoleViewExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #import 8 | 9 | #if RCT_NEW_ARCH_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | #import 18 | 19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot"; 20 | 21 | @interface AppDelegate () { 22 | RCTTurboModuleManager *_turboModuleManager; 23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter; 24 | std::shared_ptr _reactNativeConfig; 25 | facebook::react::ContextContainer::Shared _contextContainer; 26 | } 27 | @end 28 | #endif 29 | 30 | @implementation AppDelegate 31 | 32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 33 | { 34 | RCTAppSetupPrepareApp(application); 35 | 36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 37 | 38 | #if RCT_NEW_ARCH_ENABLED 39 | _contextContainer = std::make_shared(); 40 | _reactNativeConfig = std::make_shared(); 41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig); 42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer]; 43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter; 44 | #endif 45 | 46 | NSDictionary *initProps = [self prepareInitialProps]; 47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"RNHoleViewExample", initProps); 48 | 49 | if (@available(iOS 13.0, *)) { 50 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 51 | } else { 52 | rootView.backgroundColor = [UIColor whiteColor]; 53 | } 54 | 55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 56 | UIViewController *rootViewController = [UIViewController new]; 57 | rootViewController.view = rootView; 58 | self.window.rootViewController = rootViewController; 59 | [self.window makeKeyAndVisible]; 60 | return YES; 61 | } 62 | 63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 64 | /// 65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. 68 | - (BOOL)concurrentRootEnabled 69 | { 70 | // Switch this bool to turn on and off the concurrent root 71 | return true; 72 | } 73 | 74 | - (NSDictionary *)prepareInitialProps 75 | { 76 | NSMutableDictionary *initProps = [NSMutableDictionary new]; 77 | 78 | #ifdef RCT_NEW_ARCH_ENABLED 79 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]); 80 | #endif 81 | 82 | return initProps; 83 | } 84 | 85 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 86 | { 87 | #if DEBUG 88 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 89 | #else 90 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 91 | #endif 92 | } 93 | 94 | #if RCT_NEW_ARCH_ENABLED 95 | 96 | #pragma mark - RCTCxxBridgeDelegate 97 | 98 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge 99 | { 100 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge 101 | delegate:self 102 | jsInvoker:bridge.jsCallInvoker]; 103 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager); 104 | } 105 | 106 | #pragma mark RCTTurboModuleManagerDelegate 107 | 108 | - (Class)getModuleClassFromName:(const char *)name 109 | { 110 | return RCTCoreModulesClassProvider(name); 111 | } 112 | 113 | - (std::shared_ptr)getTurboModule:(const std::string &)name 114 | jsInvoker:(std::shared_ptr)jsInvoker 115 | { 116 | return nullptr; 117 | } 118 | 119 | - (std::shared_ptr)getTurboModule:(const std::string &)name 120 | initParams: 121 | (const facebook::react::ObjCTurboModule::InitParams &)params 122 | { 123 | return nullptr; 124 | } 125 | 126 | - (id)getModuleInstanceFromClass:(Class)moduleClass 127 | { 128 | return RCTAppSetupDefaultModuleFromClass(moduleClass); 129 | } 130 | 131 | #endif 132 | 133 | @end 134 | -------------------------------------------------------------------------------- /exampleNewArch/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "org.jetbrains.kotlin.android" 3 | apply plugin: "com.facebook.react" 4 | 5 | /** 6 | * This is the configuration block to customize your React Native Android app. 7 | * By default you don't need to apply any configuration, just uncomment the lines you need. 8 | */ 9 | react { 10 | /* Folders */ 11 | // The root of your project, i.e. where "package.json" lives. Default is '../..' 12 | // root = file("../../") 13 | // The folder where the react-native NPM package is. Default is ../../node_modules/react-native 14 | // reactNativeDir = file("../../node_modules/react-native") 15 | // The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen 16 | // codegenDir = file("../../node_modules/@react-native/codegen") 17 | // The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js 18 | // cliFile = file("../../node_modules/react-native/cli.js") 19 | 20 | /* Variants */ 21 | // The list of variants to that are debuggable. For those we're going to 22 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 23 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 24 | // debuggableVariants = ["liteDebug", "prodDebug"] 25 | 26 | /* Bundling */ 27 | // A list containing the node command and its flags. Default is just 'node'. 28 | // nodeExecutableAndArgs = ["node"] 29 | // 30 | // The command to run when bundling. By default is 'bundle' 31 | // bundleCommand = "ram-bundle" 32 | // 33 | // The path to the CLI configuration file. Default is empty. 34 | // bundleConfig = file(../rn-cli.config.js) 35 | // 36 | // The name of the generated asset file containing your JS bundle 37 | // bundleAssetName = "MyApplication.android.bundle" 38 | // 39 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 40 | // entryFile = file("../js/MyApplication.android.js") 41 | // 42 | // A list of extra flags to pass to the 'bundle' commands. 43 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 44 | // extraPackagerArgs = [] 45 | 46 | /* Hermes Commands */ 47 | // The hermes compiler command to run. By default it is 'hermesc' 48 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 49 | // 50 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 51 | // hermesFlags = ["-O", "-output-source-map"] 52 | 53 | /* Autolinking */ 54 | autolinkLibrariesWithApp() 55 | } 56 | 57 | /** 58 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 59 | */ 60 | def enableProguardInReleaseBuilds = false 61 | 62 | /** 63 | * The preferred build flavor of JavaScriptCore (JSC) 64 | * 65 | * For example, to use the international variant, you can use: 66 | * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+` 67 | * 68 | * The international variant includes ICU i18n library and necessary data 69 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 70 | * give correct results when using with locales other than en-US. Note that 71 | * this variant is about 6MiB larger per architecture than default. 72 | */ 73 | def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+' 74 | 75 | android { 76 | ndkVersion rootProject.ext.ndkVersion 77 | buildToolsVersion rootProject.ext.buildToolsVersion 78 | compileSdk rootProject.ext.compileSdkVersion 79 | 80 | namespace "com.examplenewarch" 81 | defaultConfig { 82 | applicationId "com.examplenewarch" 83 | minSdkVersion rootProject.ext.minSdkVersion 84 | targetSdkVersion rootProject.ext.targetSdkVersion 85 | versionCode 1 86 | versionName "1.0" 87 | } 88 | signingConfigs { 89 | debug { 90 | storeFile file('debug.keystore') 91 | storePassword 'android' 92 | keyAlias 'androiddebugkey' 93 | keyPassword 'android' 94 | } 95 | } 96 | buildTypes { 97 | debug { 98 | signingConfig signingConfigs.debug 99 | } 100 | release { 101 | // Caution! In production, you need to generate your own keystore file. 102 | // see https://reactnative.dev/docs/signed-apk-android. 103 | signingConfig signingConfigs.debug 104 | minifyEnabled enableProguardInReleaseBuilds 105 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 106 | } 107 | } 108 | } 109 | 110 | dependencies { 111 | // The version of react-native is set by the React Native Gradle Plugin 112 | implementation("com.facebook.react:react-android") 113 | 114 | if (hermesEnabled.toBoolean()) { 115 | implementation("com.facebook.react:hermes-android") 116 | } else { 117 | implementation jscFlavor 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnholeviewexample/newarchitecture/MainApplicationReactNativeHost.java: -------------------------------------------------------------------------------- 1 | package com.rnholeviewexample.newarchitecture; 2 | 3 | import android.app.Application; 4 | import androidx.annotation.NonNull; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactInstanceManager; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 10 | import com.facebook.react.bridge.JSIModulePackage; 11 | import com.facebook.react.bridge.JSIModuleProvider; 12 | import com.facebook.react.bridge.JSIModuleSpec; 13 | import com.facebook.react.bridge.JSIModuleType; 14 | import com.facebook.react.bridge.JavaScriptContextHolder; 15 | import com.facebook.react.bridge.ReactApplicationContext; 16 | import com.facebook.react.bridge.UIManager; 17 | import com.facebook.react.fabric.ComponentFactory; 18 | import com.facebook.react.fabric.CoreComponentsRegistry; 19 | import com.facebook.react.fabric.FabricJSIModuleProvider; 20 | import com.facebook.react.fabric.ReactNativeConfig; 21 | import com.facebook.react.uimanager.ViewManagerRegistry; 22 | import com.rnholeviewexample.BuildConfig; 23 | import com.rnholeviewexample.newarchitecture.components.MainComponentsRegistry; 24 | import com.rnholeviewexample.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; 25 | import java.util.ArrayList; 26 | import java.util.List; 27 | 28 | /** 29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both 30 | * TurboModule delegates and the Fabric Renderer. 31 | * 32 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 33 | * `newArchEnabled` property). Is ignored otherwise. 34 | */ 35 | public class MainApplicationReactNativeHost extends ReactNativeHost { 36 | public MainApplicationReactNativeHost(Application application) { 37 | super(application); 38 | } 39 | 40 | @Override 41 | public boolean getUseDeveloperSupport() { 42 | return BuildConfig.DEBUG; 43 | } 44 | 45 | @Override 46 | protected List getPackages() { 47 | List packages = new PackageList(this).getPackages(); 48 | // Packages that cannot be autolinked yet can be added manually here, for example: 49 | // packages.add(new MyReactNativePackage()); 50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: 51 | // packages.add(new TurboReactPackage() { ... }); 52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here 53 | // inside a ReactPackage. 54 | return packages; 55 | } 56 | 57 | @Override 58 | protected String getJSMainModuleName() { 59 | return "index"; 60 | } 61 | 62 | @NonNull 63 | @Override 64 | protected ReactPackageTurboModuleManagerDelegate.Builder 65 | getReactPackageTurboModuleManagerDelegateBuilder() { 66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary 67 | // for the new architecture and to use TurboModules correctly. 68 | return new MainApplicationTurboModuleManagerDelegate.Builder(); 69 | } 70 | 71 | @Override 72 | protected JSIModulePackage getJSIModulePackage() { 73 | return new JSIModulePackage() { 74 | @Override 75 | public List getJSIModules( 76 | final ReactApplicationContext reactApplicationContext, 77 | final JavaScriptContextHolder jsContext) { 78 | final List specs = new ArrayList<>(); 79 | 80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the 81 | // custom Fabric Components. 82 | specs.add( 83 | new JSIModuleSpec() { 84 | @Override 85 | public JSIModuleType getJSIModuleType() { 86 | return JSIModuleType.UIManager; 87 | } 88 | 89 | @Override 90 | public JSIModuleProvider getJSIModuleProvider() { 91 | final ComponentFactory componentFactory = new ComponentFactory(); 92 | CoreComponentsRegistry.register(componentFactory); 93 | 94 | // Here we register a Components Registry. 95 | // The one that is generated with the template contains no components 96 | // and just provides you the one from React Native core. 97 | MainComponentsRegistry.register(componentFactory); 98 | 99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); 100 | 101 | ViewManagerRegistry viewManagerRegistry = 102 | new ViewManagerRegistry( 103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); 104 | 105 | return new FabricJSIModuleProvider( 106 | reactApplicationContext, 107 | componentFactory, 108 | ReactNativeConfig.DEFAULT_CONFIG, 109 | viewManagerRegistry); 110 | } 111 | }); 112 | return specs; 113 | } 114 | }; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /ios/RNHoleView/RNHoleView.mm: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoleView.mm 3 | // RNHoleView 4 | // 5 | // Created by Thomas FETIVEAU on 22/06/2023. 6 | // Copyright © 2023 Stepan Kopylov. All rights reserved. 7 | // 8 | 9 | // This guard prevent the code from being compiled in the old architecture 10 | #ifdef RCT_NEW_ARCH_ENABLED 11 | #import "RNHoleView.h" 12 | #import "RNHoleViewImpl.h" 13 | 14 | #import 15 | #import 16 | #import 17 | #import 18 | 19 | #import "RCTFabricComponentsPlugins.h" 20 | #import 21 | 22 | using namespace facebook::react; 23 | 24 | @interface RNHoleView () 25 | 26 | @end 27 | 28 | @implementation RNHoleView { 29 | RNHoleViewImpl * _view; 30 | } 31 | 32 | + (ComponentDescriptorProvider)componentDescriptorProvider 33 | { 34 | return concreteComponentDescriptorProvider(); 35 | } 36 | 37 | - (instancetype)initWithFrame:(CGRect)frame 38 | { 39 | if (self = [super initWithFrame:frame]) { 40 | static const auto defaultProps = std::make_shared(); 41 | _props = defaultProps; 42 | 43 | _view = [RNHoleViewImpl new]; 44 | 45 | __weak __typeof(self) weakSelf = self; 46 | _view.onAnimationFinishedFabric = ^() { 47 | [weakSelf onAnimationFinished]; 48 | }; 49 | 50 | self.contentView = _view; 51 | } 52 | 53 | return self; 54 | } 55 | 56 | - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps 57 | { 58 | const auto &oldViewProps = *std::static_pointer_cast(_props); 59 | const auto &newViewProps = *std::static_pointer_cast(props); 60 | 61 | NSMutableArray *oldHoles = [[NSMutableArray alloc] init]; 62 | auto oldHolesIt = oldViewProps.holes.begin(); 63 | 64 | while (oldHolesIt != oldViewProps.holes.end()) { 65 | [oldHoles addObject: [self holeStructoDictionary: *oldHolesIt]]; 66 | oldHolesIt++; 67 | } 68 | 69 | NSMutableArray *newHoles = [[NSMutableArray alloc] init]; 70 | auto newHolesIt = newViewProps.holes.begin(); 71 | 72 | while (newHolesIt != newViewProps.holes.end()) { 73 | [newHoles addObject: [self holeStructoDictionary: *newHolesIt]]; 74 | newHolesIt++; 75 | } 76 | 77 | if(![newHoles isEqualToArray:oldHoles]){ 78 | [_view setHoles:newHoles]; 79 | } 80 | 81 | if (oldViewProps.animation.duration != newViewProps.animation.duration || 82 | oldViewProps.animation.timingFunction != newViewProps.animation.timingFunction) { 83 | NSDictionary * animation = @{ 84 | @"duration": [NSNumber numberWithInt:newViewProps.animation.duration], 85 | @"timingFunction": @(newViewProps.animation.timingFunction.c_str()) 86 | }; 87 | [_view setAnimation:animation]; 88 | } 89 | 90 | [super updateProps:props oldProps:oldProps]; 91 | 92 | super.backgroundColor = [UIColor clearColor]; 93 | _view.backgroundColor = RCTUIColorFromSharedColor(newViewProps.backgroundColor); 94 | } 95 | 96 | - (void)onAnimationFinished 97 | { 98 | if(!_eventEmitter) { 99 | return; 100 | } 101 | 102 | RNHoleViewEventEmitter::OnAnimationFinished event = { }; 103 | 104 | std::dynamic_pointer_cast(_eventEmitter)->onAnimationFinished(event); 105 | } 106 | 107 | - (void)mountChildComponentView:(UIView *)childComponentView index:(NSInteger)index 108 | { 109 | [_view mountChildComponentView:childComponentView index:index]; 110 | } 111 | 112 | - (void)unmountChildComponentView:(UIView *)childComponentView index:(NSInteger)index 113 | { 114 | [_view unmountChildComponentView:childComponentView index:index]; 115 | } 116 | 117 | - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 118 | { 119 | return [_view pointInside:point withEvent:event]; 120 | } 121 | 122 | - holeStructoDictionary:(facebook::react::RNHoleViewHolesStruct) holeStruct 123 | { 124 | return @{ 125 | @"height": [NSNumber numberWithInt:holeStruct.height], 126 | @"width": [NSNumber numberWithInt:holeStruct.width], 127 | @"x": [NSNumber numberWithInt:holeStruct.x], 128 | @"y": [NSNumber numberWithInt:holeStruct.y], 129 | @"borderRadius": [NSNumber numberWithInt:holeStruct.borderRadius], 130 | @"isRTL": [NSNumber numberWithInt:holeStruct.isRTL], // boolean 131 | @"borderTopLeftRadius": [NSNumber numberWithInt:holeStruct.borderTopLeftRadius], 132 | @"borderTopRightRadius": [NSNumber numberWithInt:holeStruct.borderTopRightRadius], 133 | @"borderBottomLeftRadius": [NSNumber numberWithInt:holeStruct.borderBottomLeftRadius], 134 | @"borderBottomRightRadius": [NSNumber numberWithInt:holeStruct.borderBottomRightRadius], 135 | @"borderTopStartRadius": [NSNumber numberWithInt:holeStruct.borderTopStartRadius], 136 | @"borderTopEndRadius": [NSNumber numberWithInt:holeStruct.borderTopEndRadius], 137 | @"borderBottomStartRadius": [NSNumber numberWithInt:holeStruct.borderBottomStartRadius], 138 | @"borderBottomEndRadius": [NSNumber numberWithInt:holeStruct.borderBottomEndRadius] 139 | }; 140 | } 141 | 142 | @end 143 | 144 | Class RNHoleViewCls(void) 145 | { 146 | return RNHoleView.class; 147 | } 148 | #endif 149 | -------------------------------------------------------------------------------- /android/src/main/java/com/ibitcy/react_native_hole_view/RNHoleViewManagerImpl.kt: -------------------------------------------------------------------------------- 1 | package com.ibitcy.react_native_hole_view 2 | 3 | import android.content.res.Resources 4 | 5 | import com.facebook.react.bridge.* 6 | import com.facebook.react.common.MapBuilder 7 | import com.facebook.react.module.annotations.ReactModule 8 | import com.facebook.react.uimanager.ThemedReactContext 9 | import com.facebook.react.uimanager.ViewGroupManager 10 | import com.facebook.react.uimanager.annotations.ReactProp 11 | import com.facebook.react.uimanager.events.RCTEventEmitter 12 | import com.facebook.react.uimanager.ViewManagerDelegate 13 | 14 | import com.ibitcy.react_native_hole_view.events.AnimFinishEvent 15 | 16 | import kotlin.math.roundToInt 17 | 18 | class RNHoleViewManagerImpl(reactContext: ReactApplicationContext) { 19 | 20 | val reactContext: ReactApplicationContext = reactContext 21 | 22 | companion object { 23 | public const val NAME = "RNHoleView" 24 | public const val ON_ANIMATION_FINISHED = "onAnimationFinished" 25 | } 26 | 27 | public fun setAnimation(view: RNHoleView, animation: ReadableMap?) { 28 | if (animation != null) { 29 | var duration = RNHoleView.ANIMATION_DURATION_DEFAULT 30 | if (animation.hasKey("duration")) { 31 | duration = animation.getDouble("duration").toLong() 32 | } 33 | var timingFunction: RNHoleView.EAnimationTimingFunction? = null 34 | if (animation.hasKey("timingFunction")) { 35 | timingFunction = 36 | RNHoleView.EAnimationTimingFunction.valueOf(animation.getString("timingFunction")!!) 37 | } 38 | 39 | if (timingFunction != null) { 40 | view.animation = RNHoleView.Animation(duration, timingFunction) 41 | } 42 | } 43 | } 44 | 45 | public fun setHoles(view: RNHoleView, holesArg: ReadableArray?) { 46 | if (holesArg == null || holesArg.size() == 0) { 47 | view.clearHoles() 48 | return 49 | } 50 | 51 | val holes = mutableListOf() 52 | for (i in 0 until holesArg.size()) { 53 | val hole = holesArg.getMap(i)!! 54 | val x = hole.getInt("x").dpToPx() 55 | val y = hole.getInt("y").dpToPx() 56 | val width = hole.getInt("width").dpToPx() 57 | val height = hole.getInt("height").dpToPx() 58 | 59 | val isRTL = try { 60 | hole.getBoolean("isRTL") 61 | } catch (e: Exception) { 62 | false 63 | } 64 | 65 | val borderRadius = try { 66 | hole.getInt("borderRadius").dpToPx() 67 | } catch(e: Exception) { 68 | 0 69 | } 70 | 71 | val borderTopLeftRadius = try { 72 | val value = hole.getInt("borderTopLeftRadius") 73 | if (value == -1) borderRadius else value.dpToPx() 74 | } catch(e: Exception) { 75 | borderRadius 76 | } 77 | 78 | val borderTopRightRadius = try { 79 | val value = hole.getInt("borderTopRightRadius") 80 | if (value == -1) borderRadius else value.dpToPx() 81 | } catch(e: Exception) { 82 | borderRadius 83 | } 84 | 85 | val borderBottomLeftRadius = try { 86 | val value = hole.getInt("borderBottomLeftRadius") 87 | if (value == -1) borderRadius else value.dpToPx() 88 | } catch(e: Exception) { 89 | borderRadius 90 | } 91 | 92 | val borderBottomRightRadius = try { 93 | val value = hole.getInt("borderBottomRightRadius") 94 | if (value == -1) borderRadius else value.dpToPx() 95 | } catch(e: Exception) { 96 | borderRadius 97 | } 98 | 99 | val borderBottomStartRadius = try { 100 | val value = hole.getInt("borderBottomStartRadius") 101 | if (value == -1) borderRadius else value.dpToPx() 102 | } catch (e: Exception) { 103 | if (isRTL) borderBottomRightRadius else borderBottomLeftRadius 104 | } 105 | 106 | val borderBottomEndRadius = try { 107 | val value = hole.getInt("borderBottomEndRadius") 108 | if (value == -1) borderRadius else value.dpToPx() 109 | } catch (e: Exception) { 110 | if (isRTL) borderBottomLeftRadius else borderBottomRightRadius 111 | } 112 | 113 | val borderTopStartRadius = try { 114 | val value = hole.getInt("borderTopStartRadius") 115 | if (value == -1) borderRadius else value.dpToPx() 116 | } catch (e: Exception) { 117 | if (isRTL) borderTopRightRadius else borderTopLeftRadius 118 | } 119 | 120 | val borderTopEndRadius = try { 121 | val value = hole.getInt("borderTopEndRadius") 122 | if (value == -1) borderRadius else value.dpToPx() 123 | } catch (e: Exception) { 124 | if (isRTL) borderTopLeftRadius else borderTopRightRadius 125 | } 126 | 127 | if (isRTL) { 128 | holes.add(RNHoleView.Hole( 129 | x, y, width, height, 130 | borderTopEndRadius, 131 | borderTopStartRadius, 132 | borderBottomEndRadius, 133 | borderBottomStartRadius) 134 | ) 135 | } else { 136 | holes.add(RNHoleView.Hole( 137 | x, y, width, height, 138 | borderTopStartRadius, 139 | borderTopEndRadius, 140 | borderBottomStartRadius, 141 | borderBottomEndRadius) 142 | ) 143 | } 144 | } 145 | view.setHoles(holes) 146 | } 147 | 148 | private fun Int.dpToPx(): Int { 149 | val metrics = Resources.getSystem().displayMetrics 150 | val px = this * (metrics.densityDpi / 160f) 151 | return px.roundToInt() 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot](misc/cover.png) 2 | 3 | [![npm](https://img.shields.io/npm/v/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view) 4 | [![npm](https://img.shields.io/npm/dw/react-native-hole-view.svg)](https://npmjs.com/package/react-native-hole-view) 5 | [![Maintainers Wanted](https://img.shields.io/badge/maintainers-wanted-red.svg)](https://github.com/pickhardt/maintainers-wanted) 6 | 7 | ## Attention! Maintainers Wanted 8 | 9 | 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. 10 | If you are interested in becoming a maintainer, please contact me at: newonxp [at] gmail [dot] com. 11 | 12 | ## How it works 13 | 14 | drawing 15 | 16 |

17 | code 18 | 19 | ```js 20 | import { RNHoleView } from 'react-native-hole-view'; 21 | 22 | 23 | {"Wow! I'm a text inside a hole!"} 24 | {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}> 25 | {"Wow! I'm a button inside a hole!"} 26 | 27 | 28 | 29 | { 30 | "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" 31 | } 32 | 33 | 34 | 37 | 38 | 39 | ``` 40 |
41 | 42 | Works with any nested views: 43 | 44 | drawing 45 | 46 |
47 | code 48 | 49 | ```js 50 | import { RNHoleView } from 'react-native-hole-view 51 | import Video from 'react-native-video'; 52 | 53 | 54 | {"Wow! I'm a text inside a hole!"} 55 | {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}> 56 | {"Wow! I'm a button inside a hole!"} 57 | 58 | 59 | 60 | { 61 | "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" 62 | } 63 | 64 | 65 | 68 | 73 | 74 | ``` 75 |
76 | 77 | Can be animated: 78 | 79 | drawing 80 | 81 |
82 | code 83 | 84 | ```js 85 | import {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from "react-native-hole-view"; 86 | 87 | import Video from 'react-native-video'; 88 | 89 | const firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60}; 90 | const secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60}; 91 | 92 | const animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200}; 93 | 94 | const App = () => { 95 | const [holes, setHoles] = useState([]); 96 | const [animated, setAnimated] = useState(false); 97 | const [animation, setAnimation] = useState(undefined); 98 | 99 | const onPress = useCallback(() => { 100 | if (animated) { 101 | setHoles([firstHole]); 102 | } else { 103 | setHoles([secondHole]) 104 | } 105 | 106 | setAnimation({...animationSettings}); 107 | setAnimated(!animated); 108 | }, [animated, animation]) 109 | 110 | useEffect(() => { 111 | onPress(); 112 | }, []); 113 | 114 | return ( 115 | 116 | {"Wow! I'm a text inside a hole!"} 117 | { 118 | }} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}> 119 | {"Wow! I'm a button inside a hole!"} 120 | 121 | 122 | 123 | { 124 | "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" 125 | } 126 | 127 | 128 | { 138 | setAnimation(undefined); 139 | }} 140 | > 141 | 145 | 157 | 159 | {"Animate!"} 160 | 161 | 162 | 163 | ); 164 | }; 165 | ``` 166 |
167 | 168 | ## Getting started 169 | 170 | Install the library using either Yarn: 171 | 172 | ``` 173 | yarn add react-native-hole-view 174 | ``` 175 | 176 | or npm: 177 | 178 | ``` 179 | npm install --save react-native-hole-view 180 | ``` 181 | 182 | ## Linking 183 | 184 | This library fully supports RN's autolinking 185 | 186 | ## iOS 187 | 188 | ``` 189 | cd ios && pod install 190 | ``` 191 | 192 | ## Android 193 | 194 | 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 195 | https://github.com/facebook/react-native/pull/28956 196 | 197 | ## Troubleshooting 198 | 199 | If you have any diffuculties - please take a look on `example/` app first. 200 | 201 | In case you have xcode build error poining on this line 202 | ```objectivec 203 | #import "RCTBridgeModule.h" 204 | ``` 205 | please use version 2.0.* 206 | 207 | ## Running the example: 208 | 209 | 1. Clone the repo 210 | 2. `cd example` 211 | 3. `yarn` 212 | 4. `cd ios` 213 | 5. `pod install` 214 | 6. `cd ..` 215 | 7. `yarn run android` or `yarn run ios` 216 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /exampleNewArch/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | # SPDX-License-Identifier: Apache-2.0 19 | # 20 | 21 | ############################################################################## 22 | # 23 | # Gradle start up script for POSIX generated by Gradle. 24 | # 25 | # Important for running: 26 | # 27 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 28 | # noncompliant, but you have some other compliant shell such as ksh or 29 | # bash, then to run this script, type that shell name before the whole 30 | # command line, like: 31 | # 32 | # ksh Gradle 33 | # 34 | # Busybox and similar reduced shells will NOT work, because this script 35 | # requires all of these POSIX shell features: 36 | # * functions; 37 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 38 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 39 | # * compound commands having a testable exit status, especially «case»; 40 | # * various built-in commands including «command», «set», and «ulimit». 41 | # 42 | # Important for patching: 43 | # 44 | # (2) This script targets any POSIX shell, so it avoids extensions provided 45 | # by Bash, Ksh, etc; in particular arrays are avoided. 46 | # 47 | # The "traditional" practice of packing multiple parameters into a 48 | # space-separated string is a well documented source of bugs and security 49 | # problems, so this is (mostly) avoided, by progressively accumulating 50 | # options in "$@", and eventually passing that to Java. 51 | # 52 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 53 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 54 | # see the in-line comments for details. 55 | # 56 | # There are tweaks for specific operating systems such as AIX, CygWin, 57 | # Darwin, MinGW, and NonStop. 58 | # 59 | # (3) This script is generated from the Groovy template 60 | # https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 61 | # within the Gradle project. 62 | # 63 | # You can find Gradle at https://github.com/gradle/gradle/. 64 | # 65 | ############################################################################## 66 | 67 | # Attempt to set APP_HOME 68 | 69 | # Resolve links: $0 may be a link 70 | app_path=$0 71 | 72 | # Need this for daisy-chained symlinks. 73 | while 74 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 75 | [ -h "$app_path" ] 76 | do 77 | ls=$( ls -ld "$app_path" ) 78 | link=${ls#*' -> '} 79 | case $link in #( 80 | /*) app_path=$link ;; #( 81 | *) app_path=$APP_HOME$link ;; 82 | esac 83 | done 84 | 85 | # This is normally unused 86 | # shellcheck disable=SC2034 87 | APP_BASE_NAME=${0##*/} 88 | # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) 89 | APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH="\\\"\\\"" 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | if ! command -v java >/dev/null 2>&1 137 | then 138 | die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 139 | 140 | Please set the JAVA_HOME variable in your environment to match the 141 | location of your Java installation." 142 | fi 143 | fi 144 | 145 | # Increase the maximum file descriptors if we can. 146 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 147 | case $MAX_FD in #( 148 | max*) 149 | # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked. 150 | # shellcheck disable=SC2039,SC3045 151 | MAX_FD=$( ulimit -H -n ) || 152 | warn "Could not query maximum file descriptor limit" 153 | esac 154 | case $MAX_FD in #( 155 | '' | soft) :;; #( 156 | *) 157 | # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked. 158 | # shellcheck disable=SC2039,SC3045 159 | ulimit -n "$MAX_FD" || 160 | warn "Could not set maximum file descriptor limit to $MAX_FD" 161 | esac 162 | fi 163 | 164 | # Collect all arguments for the java command, stacking in reverse order: 165 | # * args from the command line 166 | # * the main class name 167 | # * -classpath 168 | # * -D...appname settings 169 | # * --module-path (only if needed) 170 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 171 | 172 | # For Cygwin or MSYS, switch paths to Windows format before running java 173 | if "$cygwin" || "$msys" ; then 174 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 175 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 176 | 177 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 178 | 179 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 180 | for arg do 181 | if 182 | case $arg in #( 183 | -*) false ;; # don't mess with options #( 184 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 185 | [ -e "$t" ] ;; #( 186 | *) false ;; 187 | esac 188 | then 189 | arg=$( cygpath --path --ignore --mixed "$arg" ) 190 | fi 191 | # Roll the args list around exactly as many times as the number of 192 | # args, so each arg winds up back in the position where it started, but 193 | # possibly modified. 194 | # 195 | # NB: a `for` loop captures its iteration list before it begins, so 196 | # changing the positional parameters here affects neither the number of 197 | # iterations, nor the values presented in `arg`. 198 | shift # remove old arg 199 | set -- "$@" "$arg" # push replacement arg 200 | done 201 | fi 202 | 203 | 204 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 205 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 206 | 207 | # Collect all arguments for the java command: 208 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments, 209 | # and any embedded shellness will be escaped. 210 | # * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be 211 | # treated as '${Hostname}' itself on the command line. 212 | 213 | set -- \ 214 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 215 | -classpath "$CLASSPATH" \ 216 | -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \ 217 | "$@" 218 | 219 | # Stop when "xargs" is not available. 220 | if ! command -v xargs >/dev/null 2>&1 221 | then 222 | die "xargs is not available" 223 | fi 224 | 225 | # Use "xargs" to parse quoted args. 226 | # 227 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 228 | # 229 | # In Bash we could simply go: 230 | # 231 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 232 | # set -- "${ARGS[@]}" "$@" 233 | # 234 | # but POSIX shell has neither arrays nor command substitution, so instead we 235 | # post-process each arg (as a line of input to sed) to backslash-escape any 236 | # character that might be a shell metacharacter, then use eval to reverse 237 | # that process (while maintaining the separation between arguments), and wrap 238 | # the whole thing up as a single "set" statement. 239 | # 240 | # This will of course break if any of these variables contains a newline or 241 | # an unmatched quote. 242 | # 243 | 244 | eval "set -- $( 245 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 246 | xargs -n1 | 247 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 248 | tr '\n' ' ' 249 | )" '"$@"' 250 | 251 | exec "$JAVACMD" "$@" 252 | -------------------------------------------------------------------------------- /ios/RNHoleView/RNHoleViewImpl.m: -------------------------------------------------------------------------------- 1 | // 2 | // RNHoleViewImpl.m 3 | // RNHoleViewProject 4 | // 5 | // Created by Stepan Kopylov on 20/05/2020. 6 | // Copyright © 2020 Stepan Kopylov. All rights reserved. 7 | // 8 | 9 | #import "RNHoleViewImpl.h" 10 | 11 | #define degreesToRadians(x) ((x) * M_PI / 180.0) 12 | 13 | static const CGFloat DEFAULT_BORDER_RADIUS_VALUE = 0.f; 14 | static const CGFloat DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE = -1.f; 15 | 16 | @implementation RNHoleViewHole 17 | 18 | - (instancetype)initWitnX:(CGFloat)x y:(CGFloat)y 19 | width:(CGFloat)width 20 | height:(CGFloat)height 21 | andBorderRadius:(CGFloat)borderRadius 22 | andBorderTopLeftRadius:(CGFloat)borderTopLeftRadius 23 | andBorderTopRightRadius:(CGFloat)borderTopRightRadius 24 | andBorderBottomLeftRadius:(CGFloat)borderBottomLeftRadius 25 | andBorderBottomRightRadius:(CGFloat)borderBottomRightRadius 26 | { 27 | self = [super init]; 28 | if (self) { 29 | self.rect = CGRectMake(x, y, width, height); 30 | self.borderRadius = borderRadius; 31 | 32 | self.borderTopLeftRadius = borderTopLeftRadius == DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE ? borderRadius : borderTopLeftRadius; 33 | self.borderTopRightRadius = borderTopRightRadius == DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE ? borderRadius : borderTopRightRadius; 34 | self.borderBottomLeftRadius = borderBottomLeftRadius == DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE ? borderRadius : borderBottomLeftRadius; 35 | self.borderBottomRightRadius = borderBottomRightRadius == DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE ? borderRadius : borderBottomRightRadius; 36 | } 37 | return self; 38 | } 39 | 40 | @end 41 | 42 | 43 | @interface RNHoleViewImpl() 44 | 45 | @property (nonatomic) CAShapeLayer *maskLayer; 46 | @property (nonatomic) UIBezierPath *maskPath; 47 | 48 | @property (nonatomic) NSNumber *animationDuration; 49 | @property (nonatomic) CAMediaTimingFunction *animationTimingFunction; 50 | 51 | @property (nonatomic) dispatch_source_t holesTimer; 52 | 53 | @end 54 | 55 | @implementation RNHoleViewImpl 56 | 57 | - (instancetype)init 58 | { 59 | self = [super init]; 60 | if (self) { 61 | _maskLayer = [CAShapeLayer layer]; 62 | _maskLayer.fillColor = [UIColor redColor].CGColor; 63 | _maskLayer.fillRule = kCAFillRuleEvenOdd; 64 | _maskLayer.shouldRasterize = YES; 65 | _maskLayer.rasterizationScale = [UIScreen mainScreen].scale; 66 | 67 | self.layer.mask = _maskLayer; 68 | } 69 | return self; 70 | } 71 | 72 | 73 | -(void)layoutSubviews 74 | { 75 | _maskLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height); 76 | 77 | [self setMaskPath:self.holePaths skipAnimation:YES]; 78 | } 79 | 80 | 81 | -(void)setHoles:(NSArray *)holes 82 | { 83 | NSMutableArray *parsedHoles = @[].mutableCopy; 84 | 85 | [holes enumerateObjectsUsingBlock:^(NSDictionary * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { 86 | BOOL isRTL = obj[@"isRTL"] && [obj[@"isRTL"] boolValue] == YES; 87 | 88 | CGFloat borderRadius = obj[@"borderRadius"] ? [obj[@"borderRadius"] floatValue] : DEFAULT_BORDER_RADIUS_VALUE; 89 | CGFloat borderTopLeftRadius = obj[@"borderTopLeftRadius"] ? [obj[@"borderTopLeftRadius"] floatValue] : DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE; 90 | CGFloat borderTopRightRadius = obj[@"borderTopRightRadius"] ? [obj[@"borderTopRightRadius"] floatValue] : DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE; 91 | CGFloat borderBottomLeftRadius = obj[@"borderBottomLeftRadius"] ? [obj[@"borderBottomLeftRadius"] floatValue] : DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE; 92 | CGFloat borderBottomRightRadius = obj[@"borderBottomRightRadius"] ? [obj[@"borderBottomRightRadius"] floatValue] : DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE; 93 | 94 | if(obj[@"borderTopStartRadius"]){ 95 | CGFloat value = [obj[@"borderTopStartRadius"] floatValue]; 96 | 97 | if(value!=DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE){ 98 | if(isRTL){ 99 | borderTopRightRadius = value; 100 | }else{ 101 | borderTopLeftRadius = value; 102 | } 103 | } 104 | } 105 | 106 | if(obj[@"borderTopEndRadius"]){ 107 | CGFloat value = [obj[@"borderTopEndRadius"] floatValue]; 108 | 109 | if(value!=DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE){ 110 | if(isRTL){ 111 | borderTopLeftRadius = value; 112 | }else{ 113 | borderTopRightRadius = value; 114 | } 115 | } 116 | } 117 | 118 | if(obj[@"borderBottomStartRadius"]){ 119 | CGFloat value = [obj[@"borderBottomStartRadius"] floatValue]; 120 | 121 | if(value!=DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE){ 122 | if(isRTL){ 123 | borderBottomRightRadius = value; 124 | }else{ 125 | borderBottomLeftRadius = value; 126 | } 127 | } 128 | } 129 | 130 | if(obj[@"borderBottomEndRadius"]){ 131 | CGFloat value = [obj[@"borderBottomEndRadius"] floatValue]; 132 | 133 | if(value!=DEFAULT_SPECIFIC_BORDER_RADIUS_VALUE){ 134 | if(isRTL){ 135 | borderBottomLeftRadius = value; 136 | }else{ 137 | borderBottomRightRadius = value; 138 | } 139 | } 140 | } 141 | 142 | RNHoleViewHole *hole = [[RNHoleViewHole alloc] initWitnX:[obj[@"x"] floatValue] y:[obj[@"y"] floatValue] width:[obj[@"width"] floatValue] height:[obj[@"height"] floatValue] andBorderRadius:borderRadius andBorderTopLeftRadius:borderTopLeftRadius andBorderTopRightRadius:borderTopRightRadius andBorderBottomLeftRadius:borderBottomLeftRadius andBorderBottomRightRadius:borderBottomRightRadius]; 143 | 144 | [parsedHoles addObject:hole]; 145 | }]; 146 | 147 | self.parsedHoles = parsedHoles; 148 | } 149 | 150 | 151 | -(void)setAnimation:(NSDictionary *)animation{ 152 | _animation = animation; 153 | 154 | if(_animation){ 155 | _animationDuration = animation[@"duration"]; 156 | NSString *timingFunction = animation[@"timingFunction"]; 157 | 158 | if([timingFunction isEqualToString:@"LINEAR"]){ 159 | _animationTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 160 | }else if([timingFunction isEqualToString:@"EASE_IN"]){ 161 | _animationTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 162 | }else if([timingFunction isEqualToString:@"EASE_OUT"]){ 163 | _animationTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; 164 | }else if([timingFunction isEqualToString:@"EASE_IN_OUT"]){ 165 | _animationTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 166 | } 167 | 168 | } 169 | } 170 | 171 | 172 | -(void)setParsedHoles:(NSArray *)parsedHoles 173 | { 174 | _parsedHoles = parsedHoles; 175 | 176 | [self stopHolesTimer]; 177 | 178 | dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue()); 179 | 180 | if ( timer ) { 181 | dispatch_source_set_timer(timer, dispatch_time(DISPATCH_TIME_NOW, 0.01 * NSEC_PER_SEC), 0.01 * NSEC_PER_SEC, (1ull * NSEC_PER_SEC) / 10); 182 | dispatch_source_set_event_handler(timer, ^(){ 183 | [self stopHolesTimer]; 184 | 185 | [self setMaskPath:self.holePaths skipAnimation:NO]; 186 | }); 187 | dispatch_resume(timer); 188 | 189 | _holesTimer = timer; 190 | } 191 | } 192 | 193 | 194 | -(void)stopHolesTimer 195 | { 196 | if(_holesTimer){ 197 | dispatch_source_cancel(_holesTimer); 198 | _holesTimer = nil; 199 | } 200 | } 201 | 202 | 203 | -(void)setMaskPath:(UIBezierPath *)maskPath skipAnimation:(BOOL)skipAnimation{ 204 | UIBezierPath *oldPath = _maskPath; 205 | 206 | _maskPath = maskPath; 207 | 208 | if(!skipAnimation && self.animation){ 209 | [_maskLayer removeAnimationForKey:@"path"]; 210 | 211 | CABasicAnimation *pathAnimation = [CABasicAnimation new]; 212 | 213 | pathAnimation.duration = _animationDuration.doubleValue/1000.0; 214 | pathAnimation.keyPath = @"path"; 215 | pathAnimation.fromValue = oldPath ? (id)oldPath.CGPath : (id)_maskLayer.path; 216 | pathAnimation.toValue = (id)_maskPath.CGPath; 217 | pathAnimation.removedOnCompletion = NO; 218 | pathAnimation.fillMode = kCAFillModeForwards; 219 | pathAnimation.timingFunction = _animationTimingFunction; 220 | pathAnimation.delegate = self; 221 | 222 | [_maskLayer addAnimation:pathAnimation forKey:@"path"]; 223 | }else{ 224 | _maskLayer.path = _maskPath.CGPath; 225 | } 226 | 227 | } 228 | 229 | - (UIBezierPath *)holePaths 230 | { 231 | UIBezierPath *currentPath = [UIBezierPath new]; 232 | currentPath.usesEvenOddFillRule = YES; 233 | 234 | [_parsedHoles enumerateObjectsUsingBlock:^(RNHoleViewHole *hole, NSUInteger idx, BOOL *_Nonnull stop) { 235 | CGRect rect = hole.rect; 236 | 237 | UIBezierPath *path = [UIBezierPath new]; 238 | 239 | [path addArcWithCenter:CGPointMake(rect.origin.x+rect.size.width-hole.borderTopRightRadius, rect.origin.y+hole.borderTopRightRadius) radius:hole.borderTopRightRadius startAngle:degreesToRadians(-90.f) endAngle:degreesToRadians(0.f) clockwise:YES]; 240 | [path addArcWithCenter:CGPointMake(rect.origin.x+rect.size.width-hole.borderBottomRightRadius, rect.origin.y+rect.size.height-hole.borderBottomRightRadius) radius:hole.borderBottomRightRadius startAngle:degreesToRadians(0.f) endAngle:degreesToRadians(90.f) clockwise:YES]; 241 | [path addArcWithCenter:CGPointMake(rect.origin.x+hole.borderBottomLeftRadius, rect.origin.y+rect.size.height-hole.borderBottomLeftRadius) radius:hole.borderBottomLeftRadius startAngle:degreesToRadians(90.f) endAngle:degreesToRadians(180.f) clockwise:YES]; 242 | [path addArcWithCenter:CGPointMake(rect.origin.x+hole.borderTopLeftRadius, rect.origin.y+hole.borderTopLeftRadius) radius:hole.borderTopLeftRadius startAngle:degreesToRadians(180.f) endAngle:degreesToRadians(270.f) clockwise:YES]; 243 | 244 | [currentPath appendPath:path]; 245 | }]; 246 | 247 | [currentPath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(0.0, 0.0, self.frame.size.width, self.frame.size.height)]]; 248 | 249 | return currentPath; 250 | } 251 | 252 | 253 | - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 254 | { 255 | if ( [self pointInRects:point] || !self.userInteractionEnabled) { 256 | return NO; 257 | } 258 | 259 | BOOL superPoint = [super pointInside:point withEvent:event]; 260 | 261 | return superPoint; 262 | } 263 | 264 | 265 | - (BOOL)pointInRects:(CGPoint)point 266 | { 267 | __block BOOL pointInPath = NO; 268 | 269 | if (!CGPathContainsPoint(self.maskPath.CGPath, nil, point, YES) ) { 270 | pointInPath = YES; 271 | } 272 | 273 | return pointInPath; 274 | } 275 | 276 | -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)finished{ 277 | if(finished){ 278 | if(self.onAnimationFinished){ 279 | self.onAnimationFinished(NULL); 280 | } 281 | if(self.onAnimationFinishedFabric){ 282 | self.onAnimationFinishedFabric(); 283 | } 284 | } 285 | } 286 | 287 | @end 288 | -------------------------------------------------------------------------------- /ios/RNHoleView.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 56; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | E45373BA2A49CD9A00E8B3C7 /* RNHoleViewManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = E45373B42A49CD9A00E8B3C7 /* RNHoleViewManager.mm */; }; 11 | E45373BB2A49CD9A00E8B3C7 /* RNHoleViewImpl.m in Sources */ = {isa = PBXBuildFile; fileRef = E45373B52A49CD9A00E8B3C7 /* RNHoleViewImpl.m */; }; 12 | E45373BD2A49CD9A00E8B3C7 /* RNHoleView.mm in Sources */ = {isa = PBXBuildFile; fileRef = E45373B82A49CD9A00E8B3C7 /* RNHoleView.mm */; }; 13 | /* End PBXBuildFile section */ 14 | 15 | /* Begin PBXCopyFilesBuildPhase section */ 16 | E45373A62A49CD2300E8B3C7 /* CopyFiles */ = { 17 | isa = PBXCopyFilesBuildPhase; 18 | buildActionMask = 2147483647; 19 | dstPath = "include/$(PRODUCT_NAME)"; 20 | dstSubfolderSpec = 16; 21 | files = ( 22 | ); 23 | runOnlyForDeploymentPostprocessing = 0; 24 | }; 25 | /* End PBXCopyFilesBuildPhase section */ 26 | 27 | /* Begin PBXFileReference section */ 28 | E45373A82A49CD2300E8B3C7 /* libRNHoleView.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNHoleView.a; sourceTree = BUILT_PRODUCTS_DIR; }; 29 | E45373B42A49CD9A00E8B3C7 /* RNHoleViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = RNHoleViewManager.mm; sourceTree = ""; }; 30 | E45373B52A49CD9A00E8B3C7 /* RNHoleViewImpl.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNHoleViewImpl.m; sourceTree = ""; }; 31 | E45373B72A49CD9A00E8B3C7 /* RNHoleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNHoleView.h; sourceTree = ""; }; 32 | E45373B82A49CD9A00E8B3C7 /* RNHoleView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = RNHoleView.mm; sourceTree = ""; }; 33 | E45373B92A49CD9A00E8B3C7 /* RNHoleViewImpl.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNHoleViewImpl.h; sourceTree = ""; }; 34 | /* End PBXFileReference section */ 35 | 36 | /* Begin PBXFrameworksBuildPhase section */ 37 | E45373A52A49CD2300E8B3C7 /* Frameworks */ = { 38 | isa = PBXFrameworksBuildPhase; 39 | buildActionMask = 2147483647; 40 | files = ( 41 | ); 42 | runOnlyForDeploymentPostprocessing = 0; 43 | }; 44 | /* End PBXFrameworksBuildPhase section */ 45 | 46 | /* Begin PBXGroup section */ 47 | E453739F2A49CD2300E8B3C7 = { 48 | isa = PBXGroup; 49 | children = ( 50 | E45373AA2A49CD2300E8B3C7 /* RNHoleView */, 51 | E45373A92A49CD2300E8B3C7 /* Products */, 52 | ); 53 | sourceTree = ""; 54 | }; 55 | E45373A92A49CD2300E8B3C7 /* Products */ = { 56 | isa = PBXGroup; 57 | children = ( 58 | E45373A82A49CD2300E8B3C7 /* libRNHoleView.a */, 59 | ); 60 | name = Products; 61 | sourceTree = ""; 62 | }; 63 | E45373AA2A49CD2300E8B3C7 /* RNHoleView */ = { 64 | isa = PBXGroup; 65 | children = ( 66 | E45373B72A49CD9A00E8B3C7 /* RNHoleView.h */, 67 | E45373B82A49CD9A00E8B3C7 /* RNHoleView.mm */, 68 | E45373B92A49CD9A00E8B3C7 /* RNHoleViewImpl.h */, 69 | E45373B52A49CD9A00E8B3C7 /* RNHoleViewImpl.m */, 70 | E45373B42A49CD9A00E8B3C7 /* RNHoleViewManager.mm */, 71 | ); 72 | path = RNHoleView; 73 | sourceTree = ""; 74 | }; 75 | /* End PBXGroup section */ 76 | 77 | /* Begin PBXNativeTarget section */ 78 | E45373A72A49CD2300E8B3C7 /* RNHoleView */ = { 79 | isa = PBXNativeTarget; 80 | buildConfigurationList = E45373B12A49CD2300E8B3C7 /* Build configuration list for PBXNativeTarget "RNHoleView" */; 81 | buildPhases = ( 82 | E45373A42A49CD2300E8B3C7 /* Sources */, 83 | E45373A52A49CD2300E8B3C7 /* Frameworks */, 84 | E45373A62A49CD2300E8B3C7 /* CopyFiles */, 85 | ); 86 | buildRules = ( 87 | ); 88 | dependencies = ( 89 | ); 90 | name = RNHoleView; 91 | productName = RNHoleView; 92 | productReference = E45373A82A49CD2300E8B3C7 /* libRNHoleView.a */; 93 | productType = "com.apple.product-type.library.static"; 94 | }; 95 | /* End PBXNativeTarget section */ 96 | 97 | /* Begin PBXProject section */ 98 | E45373A02A49CD2300E8B3C7 /* Project object */ = { 99 | isa = PBXProject; 100 | attributes = { 101 | BuildIndependentTargetsInParallel = 1; 102 | LastUpgradeCheck = 1430; 103 | TargetAttributes = { 104 | E45373A72A49CD2300E8B3C7 = { 105 | CreatedOnToolsVersion = 14.3.1; 106 | }; 107 | }; 108 | }; 109 | buildConfigurationList = E45373A32A49CD2300E8B3C7 /* Build configuration list for PBXProject "RNHoleView" */; 110 | compatibilityVersion = "Xcode 14.0"; 111 | developmentRegion = en; 112 | hasScannedForEncodings = 0; 113 | knownRegions = ( 114 | en, 115 | Base, 116 | ); 117 | mainGroup = E453739F2A49CD2300E8B3C7; 118 | productRefGroup = E45373A92A49CD2300E8B3C7 /* Products */; 119 | projectDirPath = ""; 120 | projectRoot = ""; 121 | targets = ( 122 | E45373A72A49CD2300E8B3C7 /* RNHoleView */, 123 | ); 124 | }; 125 | /* End PBXProject section */ 126 | 127 | /* Begin PBXSourcesBuildPhase section */ 128 | E45373A42A49CD2300E8B3C7 /* Sources */ = { 129 | isa = PBXSourcesBuildPhase; 130 | buildActionMask = 2147483647; 131 | files = ( 132 | E45373BA2A49CD9A00E8B3C7 /* RNHoleViewManager.mm in Sources */, 133 | E45373BB2A49CD9A00E8B3C7 /* RNHoleViewImpl.m in Sources */, 134 | E45373BD2A49CD9A00E8B3C7 /* RNHoleView.mm in Sources */, 135 | ); 136 | runOnlyForDeploymentPostprocessing = 0; 137 | }; 138 | /* End PBXSourcesBuildPhase section */ 139 | 140 | /* Begin XCBuildConfiguration section */ 141 | E45373AF2A49CD2300E8B3C7 /* Debug */ = { 142 | isa = XCBuildConfiguration; 143 | buildSettings = { 144 | ALWAYS_SEARCH_USER_PATHS = NO; 145 | CLANG_ANALYZER_NONNULL = YES; 146 | CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; 147 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; 148 | CLANG_ENABLE_MODULES = YES; 149 | CLANG_ENABLE_OBJC_ARC = YES; 150 | CLANG_ENABLE_OBJC_WEAK = YES; 151 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 152 | CLANG_WARN_BOOL_CONVERSION = YES; 153 | CLANG_WARN_COMMA = YES; 154 | CLANG_WARN_CONSTANT_CONVERSION = YES; 155 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 156 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 157 | CLANG_WARN_DOCUMENTATION_COMMENTS = YES; 158 | CLANG_WARN_EMPTY_BODY = YES; 159 | CLANG_WARN_ENUM_CONVERSION = YES; 160 | CLANG_WARN_INFINITE_RECURSION = YES; 161 | CLANG_WARN_INT_CONVERSION = YES; 162 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 163 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 164 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 165 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 166 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 167 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 168 | CLANG_WARN_STRICT_PROTOTYPES = YES; 169 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 170 | CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; 171 | CLANG_WARN_UNREACHABLE_CODE = YES; 172 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 173 | COPY_PHASE_STRIP = NO; 174 | DEBUG_INFORMATION_FORMAT = dwarf; 175 | ENABLE_STRICT_OBJC_MSGSEND = YES; 176 | ENABLE_TESTABILITY = YES; 177 | GCC_C_LANGUAGE_STANDARD = gnu11; 178 | GCC_DYNAMIC_NO_PIC = NO; 179 | GCC_NO_COMMON_BLOCKS = YES; 180 | GCC_OPTIMIZATION_LEVEL = 0; 181 | GCC_PREPROCESSOR_DEFINITIONS = ( 182 | "DEBUG=1", 183 | "$(inherited)", 184 | ); 185 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 186 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 187 | GCC_WARN_UNDECLARED_SELECTOR = YES; 188 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 189 | GCC_WARN_UNUSED_FUNCTION = YES; 190 | GCC_WARN_UNUSED_VARIABLE = YES; 191 | IPHONEOS_DEPLOYMENT_TARGET = 16.4; 192 | MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE; 193 | MTL_FAST_MATH = YES; 194 | ONLY_ACTIVE_ARCH = YES; 195 | SDKROOT = iphoneos; 196 | }; 197 | name = Debug; 198 | }; 199 | E45373B02A49CD2300E8B3C7 /* Release */ = { 200 | isa = XCBuildConfiguration; 201 | buildSettings = { 202 | ALWAYS_SEARCH_USER_PATHS = NO; 203 | CLANG_ANALYZER_NONNULL = YES; 204 | CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; 205 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; 206 | CLANG_ENABLE_MODULES = YES; 207 | CLANG_ENABLE_OBJC_ARC = YES; 208 | CLANG_ENABLE_OBJC_WEAK = YES; 209 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 210 | CLANG_WARN_BOOL_CONVERSION = YES; 211 | CLANG_WARN_COMMA = YES; 212 | CLANG_WARN_CONSTANT_CONVERSION = YES; 213 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 214 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 215 | CLANG_WARN_DOCUMENTATION_COMMENTS = YES; 216 | CLANG_WARN_EMPTY_BODY = YES; 217 | CLANG_WARN_ENUM_CONVERSION = YES; 218 | CLANG_WARN_INFINITE_RECURSION = YES; 219 | CLANG_WARN_INT_CONVERSION = YES; 220 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 221 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 222 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 223 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 224 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 225 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 226 | CLANG_WARN_STRICT_PROTOTYPES = YES; 227 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 228 | CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; 229 | CLANG_WARN_UNREACHABLE_CODE = YES; 230 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 231 | COPY_PHASE_STRIP = NO; 232 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 233 | ENABLE_NS_ASSERTIONS = NO; 234 | ENABLE_STRICT_OBJC_MSGSEND = YES; 235 | GCC_C_LANGUAGE_STANDARD = gnu11; 236 | GCC_NO_COMMON_BLOCKS = YES; 237 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 238 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 239 | GCC_WARN_UNDECLARED_SELECTOR = YES; 240 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 241 | GCC_WARN_UNUSED_FUNCTION = YES; 242 | GCC_WARN_UNUSED_VARIABLE = YES; 243 | IPHONEOS_DEPLOYMENT_TARGET = 16.4; 244 | MTL_ENABLE_DEBUG_INFO = NO; 245 | MTL_FAST_MATH = YES; 246 | SDKROOT = iphoneos; 247 | VALIDATE_PRODUCT = YES; 248 | }; 249 | name = Release; 250 | }; 251 | E45373B22A49CD2300E8B3C7 /* Debug */ = { 252 | isa = XCBuildConfiguration; 253 | buildSettings = { 254 | CODE_SIGN_STYLE = Automatic; 255 | DEVELOPMENT_TEAM = S79LAJQZ8Y; 256 | OTHER_LDFLAGS = "-ObjC"; 257 | PRODUCT_NAME = "$(TARGET_NAME)"; 258 | SKIP_INSTALL = YES; 259 | TARGETED_DEVICE_FAMILY = "1,2"; 260 | }; 261 | name = Debug; 262 | }; 263 | E45373B32A49CD2300E8B3C7 /* Release */ = { 264 | isa = XCBuildConfiguration; 265 | buildSettings = { 266 | CODE_SIGN_STYLE = Automatic; 267 | DEVELOPMENT_TEAM = S79LAJQZ8Y; 268 | OTHER_LDFLAGS = "-ObjC"; 269 | PRODUCT_NAME = "$(TARGET_NAME)"; 270 | SKIP_INSTALL = YES; 271 | TARGETED_DEVICE_FAMILY = "1,2"; 272 | }; 273 | name = Release; 274 | }; 275 | /* End XCBuildConfiguration section */ 276 | 277 | /* Begin XCConfigurationList section */ 278 | E45373A32A49CD2300E8B3C7 /* Build configuration list for PBXProject "RNHoleView" */ = { 279 | isa = XCConfigurationList; 280 | buildConfigurations = ( 281 | E45373AF2A49CD2300E8B3C7 /* Debug */, 282 | E45373B02A49CD2300E8B3C7 /* Release */, 283 | ); 284 | defaultConfigurationIsVisible = 0; 285 | defaultConfigurationName = Release; 286 | }; 287 | E45373B12A49CD2300E8B3C7 /* Build configuration list for PBXNativeTarget "RNHoleView" */ = { 288 | isa = XCConfigurationList; 289 | buildConfigurations = ( 290 | E45373B22A49CD2300E8B3C7 /* Debug */, 291 | E45373B32A49CD2300E8B3C7 /* Release */, 292 | ); 293 | defaultConfigurationIsVisible = 0; 294 | defaultConfigurationName = Release; 295 | }; 296 | /* End XCConfigurationList section */ 297 | }; 298 | rootObject = E45373A02A49CD2300E8B3C7 /* Project object */; 299 | } 300 | --------------------------------------------------------------------------------