search

ibitcy / react-native-hole-view

✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
398 stars 24 forks source link
android animated click-through hole ios overlay react-native tint tutorial view

readme

Screenshot

npm npm

How it works

drawing
code ```js import { RNHoleView } from 'react-native-hole-view'; {"Wow! I'm a text inside a hole!"} {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}> {"Wow! I'm a button inside a hole!"} { "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" } ```

Works with any nested views:

drawing
code ```js import { RNHoleView } from 'react-native-hole-view import Video from 'react-native-video'; {"Wow! I'm a text inside a hole!"} {}} style={{ backgroundColor: 'pink', padding: 10, borderRadius: 5 }}> {"Wow! I'm a button inside a hole!"} { "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" } ```

Can be animated:

drawing
code ```js 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([]); const [animated, setAnimated] = useState(false); const [animation, setAnimation] = useState(undefined); const onPress = useCallback(() => { if (animated) { setHoles([firstHole]); } else { setHoles([secondHole]) } setAnimation({...animationSettings}); setAnimated(!animated); }, [animated, animation]) useEffect(() => { onPress(); }, []); return ( {"Wow! I'm a text inside a hole!"} { }} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}> {"Wow! I'm a button inside a hole!"} { "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" } { setAnimation(undefined); }} > {"Animate!"} ); }; ```

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:

  1. Clone the repo
  2. cd example
  3. yarn
  4. cd ios
  5. pod install
  6. cd ..
  7. yarn run android or yarn run ios