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';
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ flexGrow: 0, flex: 0, padding: 10 }}>{"Wow! I'm a text inside a hole!"}</Text>
<TouchableOpacity onPress={() => {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
<Text>{"Wow! I'm a button inside a hole!"}</Text>
</TouchableOpacity>
<ScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}>
<Text numberOfLines={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>
<RNHoleView
style={{ 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-view
import Video from 'react-native-video';
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ flexGrow: 0, flex: 0, padding: 10 }}>{"Wow! I'm a text inside a hole!"}</Text>
<TouchableOpacity onPress={() => {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
<Text>{"Wow! I'm a button inside a hole!"}</Text>
</TouchableOpacity>
<ScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}>
<Text numberOfLines={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>
<RNHoleView
style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}
holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}>
<Video
source={{ uri: 'https://cdn.vidyard.com/videos/uuAgWcoM5N4eFR4lUxoYKg/480p.mp4?gbzK5DIaQtu334rQMWVKBAGFBwZCVR6SHKgkwVYjsSLvOhADBtM4IZ_NxKjBze8TzK1o0XNrUd3UyZiiIdlaz_8icTZDM15OeUZ7DSsCBsQ' }}
style={{ flex: 1 }}
/>
</RNHoleView>
</View>
Can be animated:
code
import {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from "react-native-hole-view";
import Video from 'react-native-video';
const firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60};
const secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60};
const animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200};
const App = () => {
const [holes, setHoles] = useState<RNHole[]>([]);
const [animated, setAnimated] = useState<boolean>(false);
const [animation, setAnimation] = useState<IRNHoleViewAnimation | undefined>(undefined);
const onPress = useCallback(() => {
if (animated) {
setHoles([firstHole]);
} else {
setHoles([secondHole])
}
setAnimation({...animationSettings});
setAnimated(!animated);
}, [animated, animation])
useEffect(() => {
onPress();
}, []);
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{flexGrow: 0, flex: 0, padding: 10}}>{"Wow! I'm a text inside a hole!"}</Text>
<TouchableOpacity onPress={() => {
}} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}>
<Text>{"Wow! I'm a button inside a hole!"}</Text>
</TouchableOpacity>
<ScrollView style={{flexGrow: 0, flex: 0, padding: 10}} horizontal={true}>
<Text numberOfLines={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>
<RNHoleView
style={{
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: 'rgba(34,146,231,0.4)'
}}
animation={animation}
holes={holes}
onAnimationFinished={() => {
setAnimation(undefined);
}}
>
<Video source={{uri: 'https://cdn.vidyard.com/videos/uuAgWcoM5N4eFR4lUxoYKg/480p.mp4?gbzK5DIaQtu334rQMWVKBAGFBwZCVR6SHKgkwVYjsSLvOhADBtM4IZ_NxKjBze8TzK1o0XNrUd3UyZiiIdlaz_8icTZDM15OeUZ7DSsCBsQ'}}
resizeMode={"contain"}
style={{flex: 1}}/>
</RNHoleView>
<View
pointerEvents={'box-none'}
style={{
position: 'absolute',
flex: 1,
width: '100%',
height: '100%',
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'center'
}}>
<TouchableOpacity onPress={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 we use is quite dirty, so please support our PR to FB’s react-native repo
https://github.com/facebook/react-native/pull/28956
Troubleshooting
If you have any diffuculties - please take a look on example/ app first.
In case you have xcode build error poining on this line
#import "RCTBridgeModule.h"
please use version 2.0.*
Running the example:
- Clone the repo
cd exampleyarncd iospod installcd ..yarn run android or yarn run ios
Running the web example:
The exampleWeb app demonstrates the React Native Web implementation of RNHoleView.
Using Yarn
cd exampleWebyarn install (or yarn)yarn dev- Open the printed Vite URL (defaults to http://localhost:5174) to interact with the overlay demo.
Using npm
cd exampleWebnpm installnpm run dev- Open the printed Vite URL (defaults to http://localhost:5174) to interact with the overlay demo.
For more details, see the exampleWeb README.
评论