Movatterモバイル変換

ibitcy/react-native-hole-viewPublic

NotificationsYou must be signed in to change notification settings
Fork32
Star431

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

431 stars 32 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 190 Commits
android		android
example		example
ios		ios
misc		misc
src		src
.gitignore		.gitignore
.npmrc		.npmrc
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
react-native-hole-view.podspec		react-native-hole-view.podspec
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

Attention! Maintainers Wanted

Our company is not using this library and does not plan to in the near future, so we currently lack the resources to maintain it regularly.If you are interested in becoming a maintainer, please contact me at: newonxp [at] gmail [dot] com.

How it works

code

import{RNHoleView}from'react-native-hole-view';<Viewstyle={{flex:1,alignItems:'center',justifyContent:'center'}}><Textstyle={{flexGrow:0,flex:0,padding:10}}>{"Wow! I'm a text inside a hole!"}</Text><TouchableOpacityonPress={()=>{}}style={{backgroundColor:'pink',padding:10,borderRadius:5}}><Text>{"Wow! I'm a button inside a hole!"}</Text></TouchableOpacity><ScrollViewstyle={{flexGrow:0,flex:0,padding:10}}horizontal={true}><TextnumberOfLines={1}>{"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"}</Text></ScrollView><RNHoleViewstyle={{position:'absolute',width:'100%',height:'100%',backgroundColor:'rgba(34,146,231,0.4)'}}holes={[{x:150,y:390,width:120,height:120,borderRadius:60}]}></RNHoleView></View>

Works with any nested views:

code

import{RNHoleView}from'react-native-hole-viewimportVideofrom 'react-native-video';<Viewstyle={{flex:1,alignItems:'center',justifyContent:'center'}}><Textstyle={{flexGrow:0,flex:0,padding:10}}>{"Wow! I'm a text inside a hole!"}</Text><TouchableOpacityonPress={()=>{}}style={{backgroundColor:'pink',padding:10,borderRadius:5}}><Text>{"Wow! I'm a button inside a hole!"}</Text></TouchableOpacity><ScrollViewstyle={{flexGrow:0,flex:0,padding:10}}horizontal={true}><TextnumberOfLines={1}>{"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"}</Text></ScrollView><RNHoleViewstyle={{position:'absolute',width:'100%',height:'100%',backgroundColor:'rgba(34,146,231,0.4)'}}holes={[{x:150,y:390,width:120,height:120,borderRadius:60}]}><Videosource={{uri:'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'}}style={{flex:1}}/></RNHoleView></View>

Can be animated:

code

import{RNHole,RNHoleView,ERNHoleViewTimingFunction,IRNHoleViewAnimation}from"react-native-hole-view";importVideofrom'react-native-video';constfirstHole:RNHole={x:150,y:390,width:120,height:120,borderRadius:60};constsecondHole:RNHole={x:150,y:40,width:120,height:120,borderRadius:60};constanimationSettings:IRNHoleViewAnimation={timingFunction:ERNHoleViewTimingFunction.EASE_IN_OUT,duration:200};constApp=()=>{const[holes,setHoles]=useState<RNHole[]>([]);const[animated,setAnimated]=useState<boolean>(false);const[animation,setAnimation]=useState<IRNHoleViewAnimation|undefined>(undefined);constonPress=useCallback(()=>{if(animated){setHoles([firstHole]);}else{setHoles([secondHole])}setAnimation({...animationSettings});setAnimated(!animated);},[animated,animation])useEffect(()=>{onPress();},[]);return(<Viewstyle={{flex:1,alignItems:'center',justifyContent:'center'}}><Textstyle={{flexGrow:0,flex:0,padding:10}}>{"Wow! I'm a text inside a hole!"}</Text><TouchableOpacityonPress={()=>{}}style={{backgroundColor:'pink',padding:10,borderRadius:5}}><Text>{"Wow! I'm a button inside a hole!"}</Text></TouchableOpacity><ScrollViewstyle={{flexGrow:0,flex:0,padding:10}}horizontal={true}><TextnumberOfLines={1}>{"Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"}</Text></ScrollView><RNHoleViewstyle={{position:'absolute',width:'100%',height:'100%',backgroundColor:'rgba(34,146,231,0.4)'}}animation={animation}holes={holes}onAnimationFinished={()=>{setAnimation(undefined);}}><Videosource={{uri:'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'}}resizeMode={"contain"}style={{flex:1}}/></RNHoleView><ViewpointerEvents={'box-none'}style={{position:'absolute',flex:1,width:'100%',height:'100%',alignItems:'flex-end',flexDirection:'row',justifyContent:'center'}}><TouchableOpacityonPress={onPress}style={{backgroundColor:'pink',padding:10,borderRadius:5,bottom:50}}><Text>{"Animate!"}</Text></TouchableOpacity></View></View>);};

Getting started

Install the library using either Yarn:

yarn add react-native-hole-view

or npm:

npm install --save react-native-hole-view

Linking

This library fully supports RN's autolinking

iOS

cd ios && pod install

Android

By default RN doesn't support click through views on Android. The solution weuse is quite dirty, so please support our PR to FB's react-native repofacebook/react-native#28956