import React , { Fragment } from 'react' ; import ReactNativeComponentTree , { View , ViewStyle , StyleProp , } from 'react-native' ; import { PaneOverlayStyles } from './PaneOverlay.styles' ; interface IPaneOverlayProps { /**
    * Content of the overlay
    */ children : React . ReactElement < any > ; /**
    * If true, the overlay is visible
    */ isVisible : boolean ; /**
    * Style for the backdrop
    */ backdropStyle ? : StyleProp < ViewStyle > ; /**
    * Style of the actual overlay
    */ overlayStyle ? : StyleProp < ViewStyle > ; /**
    * Callback when user touches the backdrop
    */ onBackdropPress : ( ) => void ; } const PaneOverlay = ( props ) => { return ( < Fragment > { props . isVisible && ( < View style = { [ PaneOverlayStyles . backdrop , props ?. backdropStyle ! ] } onTouchEndCapture = { event => { if ( String ( ReactNativeComponentTree . findNodeHandle ( event . currentTarget ) ) === String ( event . nativeEvent . target ) ) { if ( props . onBackdropPress ) { props . onBackdropPress ( ) ; } } } } > < View pointerEvents = { 'box-none' } style = { [ PaneOverlayStyles . overlay , props ?. overlayStyle ! ] } > { props . children } < /View> < /View>)} < /Fragment>); } ; export default PaneOverlay ;