1import React, {useEffect, useRef} from 'react'; 2import {BackHandler, NativeEventSubscription} from 'react-native'; 3import {Portal} from 'react-native-paper'; 4import panels from './types'; 5import {_usePanel} from './usePanel'; 6 7interface IProps {} 8export default function (props: IProps) { 9 const {panelName, payload, unmountPanel} = _usePanel(); 10 const Component = panelName ? panels[panelName] : null; 11 12 const backHandlerRef = useRef<NativeEventSubscription>(); 13 14 useEffect(() => { 15 if (backHandlerRef.current) { 16 backHandlerRef.current?.remove(); 17 backHandlerRef.current = undefined; 18 } 19 if (panelName) { 20 backHandlerRef.current = BackHandler.addEventListener( 21 'hardwareBackPress', 22 () => { 23 unmountPanel(); 24 return true; 25 }, 26 ); 27 } 28 return () => { 29 if (backHandlerRef.current) { 30 backHandlerRef.current?.remove(); 31 backHandlerRef.current = undefined; 32 } 33 }; 34 }, [panelName]); 35 36 return ( 37 <Portal> 38 {Component ? <Component {...(payload ?? {})}></Component> : <></>} 39 </Portal> 40 ); 41} 42