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 7export default function () { 8 const {panelName, payload, unmountPanel} = _usePanel(); 9 const Component = panelName ? panels[panelName] : null; 10 11 const backHandlerRef = useRef<NativeEventSubscription>(); 12 13 useEffect(() => { 14 if (backHandlerRef.current) { 15 backHandlerRef.current?.remove(); 16 backHandlerRef.current = undefined; 17 } 18 if (panelName) { 19 backHandlerRef.current = BackHandler.addEventListener( 20 'hardwareBackPress', 21 () => { 22 unmountPanel(); 23 return true; 24 }, 25 ); 26 } 27 return () => { 28 if (backHandlerRef.current) { 29 backHandlerRef.current?.remove(); 30 backHandlerRef.current = undefined; 31 } 32 }; 33 }, [panelName]); 34 35 return ( 36 <Portal> 37 {Component ? <Component {...(payload ?? {})} /> : <></>} 38 </Portal> 39 ); 40} 41