import { createContext, useContext, useState } from "react"; import { View } from "react-native"; export interface ImodalsManagerContext { showModal(element: React.ReactElement): void; closeModal(): void; } export const ModalsManagerContext = createContext({ showModal: () => {}, closeModal: () => {}, }); export const ModalsManagerProvider = ({ children }: { children: React.ReactNode }) => { const [showBackdrop, setShowBackdrop] = useState(false); const [modalElement, setModalElement] = useState(null); const showModal = (element: React.ReactElement) => { setModalElement(element); setShowBackdrop(true); }; const closeModal = () => { setModalElement(null); setShowBackdrop(false); }; return ( {children} {showBackdrop && } {modalElement && modalElement} ); }; export const useModalsManagerContext = () => { return useContext(ModalsManagerContext); }; const OverlayBackdrop = () => { return ( ); };