basic implementation of an overlay

src/contexts/Overlay.tsx

-import Box from "@components/bases/Box";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useState } from "react";
+import { View } from "react-native";
 
-export const OverlayContext = createContext({});
+export interface IoverlayContext {
+	showOverlay(): void;
+	hideOverlay(): void;
+}
+
+export const OverlayContext = createContext<IoverlayContext>({
+	showOverlay: () => {},
+	hideOverlay: () => {},
+});
 
 export const OverlayProvider = ({ children }: { children: React.ReactNode }) => {
-	return <OverlayContext.Provider value={{}}>{children}</OverlayContext.Provider>;
+	const [overlayVisible, setOverlayVisible] = useState(false);
+
+	const showOverlay = () => {
+		setOverlayVisible(true);
+	};
+
+	const hideOverlay = () => {
+		setOverlayVisible(false);
+	};
+
+	return (
+		<OverlayContext.Provider
+			value={{
+				showOverlay,
+				hideOverlay,
+			}}
+		>
+			{children}
+			{/* <OverlayComponent /> */}
+			{overlayVisible && <OverlayComponent />}
+		</OverlayContext.Provider>
+	);
 };
 
 export const useOverlayContext = () => {
@@ -12,5 +41,19 @@ export const useOverlayContext = () => {
 };
 
 const OverlayComponent = () => {
-	return <Box />;
+	return (
+		<View
+			style={{
+				flex: 1,
+				width: "100%",
+				height: "100%",
+				justifyContent: "center",
+				alignItems: "center",
+				zIndex: 10,
+				backgroundColor: "black",
+				opacity: 0.5,
+				position: "absolute",
+			}}
+		/>
+	);
 };