import React , { useEffect , useState } from 'react' ; import { Modal , ModalProps , Pressable , StyleSheet , } from 'react-native' ; import { ANIMATION_DURATION } from '../constants' ; import type { BackdropProps } from './Backdrop.d' ; const IOS_MODAL_SUPPORTED_ORIENTATIONS = [ 'portrait' , 'portrait-upside-down' , 'landscape' , 'landscape-left' , 'landscape-right' , ] ; export default function Backdrop ( { children , onPress , visible , } ) { const [ delayedVisible , setDelayedVisible ] = useState ( visible ) ; useEffect ( ( ) => { if ( visible ) { setDelayedVisible ( true ) ; } else { setTimeout ( ( ) => setDelayedVisible ( false ) , ANIMATION_DURATION ) ; } } , [ visible ] ) ; return ( < Modal visible = { delayedVisible } onRequestClose = { onPress } hardwareAccelerated transparent supportedOrientations = { IOS_MODAL_SUPPORTED_ORIENTATIONS } > < Pressable onPress = { onPress } style = { styles . pressable } > { children } < /Pressable> < /Modal>); } const styles = StyleSheet . create ( { pressable : { flex : 1 , } , } ) ;