1import { RNHoleView } from 'react-native-hole-view';
2
3<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
4  <Text style={{ flexGrow: 0, flex: 0, padding: 10 }}>{"Wow! I'm a text inside a hole!"}</Text>
5  <TouchableOpacity onPress={() => {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
6    <Text>{"Wow! I'm a button inside a hole!"}</Text>
7  </TouchableOpacity>
8  <ScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}>
9    <Text numberOfLines={1}>
10      {
11        "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
12      }
13    </Text>
14  </ScrollView>
15  <RNHoleView
16    style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}
17    holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}>
18  </RNHoleView>
19</View>

1import { RNHoleView } from 'react-native-hole-view
2import Video from 'react-native-video';
3
4<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
5  <Text style={{ flexGrow: 0, flex: 0, padding: 10 }}>{"Wow! I'm a text inside a hole!"}</Text>
6  <TouchableOpacity onPress={() => {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}>
7    <Text>{"Wow! I'm a button inside a hole!"}</Text>
8  </TouchableOpacity>
9  <ScrollView style={{ flexGrow: 0, flex: 0, padding: 10 }} horizontal={true}>
10    <Text numberOfLines={1}>
11      {
12        "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
13      }
14    </Text>
15  </ScrollView>
16  <RNHoleView
17    style={{ position: 'absolute', width: '100%', height: '100%', backgroundColor: 'rgba(34,146,231,0.4)' }}
18    holes={[{ x: 150, y: 390, width: 120, height: 120, borderRadius: 60 }]}>
19    <Video source={{ uri: 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4' }} style={{ flex: 1 }} />
20  </RNHoleView>
21</View>

1import {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from "react-native-hole-view";
2
3import Video from 'react-native-video';
4
5const firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60};
6const secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60};
7
8const animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200};
9
10const App = () => {
11    const [holes, setHoles] = useState<RNHole[]>([]);
12    const [animated, setAnimated] = useState<boolean>(false);
13    const [animation, setAnimation] = useState<IRNHoleViewAnimation | undefined>(undefined);
14
15    const onPress = useCallback(() => {
16        if (animated) {
17            setHoles([firstHole]);
18        } else {
19            setHoles([secondHole])
20        }
21
22        setAnimation({...animationSettings});
23        setAnimated(!animated);
24    }, [animated, animation])
25
26    useEffect(() => {
27        onPress();
28    }, []);
29
30    return (
31        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
32            <Text style={{flexGrow: 0, flex: 0, padding: 10}}>{"Wow! I'm a text inside a hole!"}</Text>
33            <TouchableOpacity onPress={() => {
34            }} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}>
35                <Text>{"Wow! I'm a button inside a hole!"}</Text>
36            </TouchableOpacity>
37            <ScrollView style={{flexGrow: 0, flex: 0, padding: 10}} horizontal={true}>
38                <Text numberOfLines={1}>
39                    {
40                        "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!"
41                    }
42                </Text>
43            </ScrollView>
44            <RNHoleView
45                style={{
46                    position: 'absolute',
47                    width: '100%',
48                    height: '100%',
49                    backgroundColor: 'rgba(34,146,231,0.4)'
50                }}
51                animation={animation}
52                holes={holes}
53                onAnimationFinished={() => {
54                    setAnimation(undefined);
55                }}
56            >
57                <Video source={{uri: 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'}}
58                       resizeMode={"contain"}
59                       style={{flex: 1}}/>
60            </RNHoleView>
61            <View
62                pointerEvents={'box-none'}
63                style={{
64                    position: 'absolute',
65                    flex: 1,
66                    width: '100%',
67                    height: '100%',
68                    alignItems: 'flex-end',
69                    flexDirection: 'row',
70                    justifyContent: 'center'
71
72                }}>
73                <TouchableOpacity onPress={onPress}
74                                  style={{backgroundColor: 'pink', padding: 10, borderRadius: 5, bottom: 50}}>
75                    <Text>{"Animate!"}</Text>
76                </TouchableOpacity>
77            </View>
78        </View>
79    );
80};