changed the name of the context to ModalsManager

App.tsx

+import { ModalsManagerProvider } from "@/contexts/ModalsManagerContext";
 import { UserAuthenticationContextProvider } from "@/contexts/UserAuthenticationContext";
 import AppMainStackNavigator from "@/navigations/AppMainStackNavigator";
 import theme from "@/themes/Theme";
@@ -13,21 +14,23 @@ export default function App() {
 	log.verbose("App started...");
 	return (
 		<ThemeProvider theme={theme}>
-			<SafeAreaProvider>
-				<NavigationContainer>
-					<ProvideQueryClient>
-						<UserAuthenticationContextProvider>
-							{/* <View style={styles.container}> */}
-							{/* <SafeAreaProvider>
+			<ModalsManagerProvider>
+				<SafeAreaProvider>
+					<NavigationContainer>
+						<ProvideQueryClient>
+							<UserAuthenticationContextProvider>
+								{/* <View style={styles.container}> */}
+								{/* <SafeAreaProvider>
 					<StatusBar style="auto" />
 					<UserLoginScreen />
 				</SafeAreaProvider> */}
-							<AppMainStackNavigator />
-							{/* </View> */}
-						</UserAuthenticationContextProvider>
-					</ProvideQueryClient>
-				</NavigationContainer>
-			</SafeAreaProvider>
+								<AppMainStackNavigator />
+								{/* </View> */}
+							</UserAuthenticationContextProvider>
+						</ProvideQueryClient>
+					</NavigationContainer>
+				</SafeAreaProvider>
+			</ModalsManagerProvider>
 		</ThemeProvider>
 	);
 }

src/contexts/Overlay.tsx → src/contexts/ModalsManagerContext.tsx

@@ -3,36 +3,52 @@ import LoadingModal from "@components/modals/LoadingModal";
 import { createContext, useContext, useState } from "react";
 import { View } from "react-native";
 
-export interface IoverlayContext {
-	showOverlay(): void;
-	hideOverlay(): void;
+export interface ImodalsManagerContext {
+	showLoadingModal(): void;
+	closeLoadingModal(): void;
+	showErrorModal(): void;
+	closeErrorModal(): void;
 }
 
-export const OverlayContext = createContext<IoverlayContext>({
-	showOverlay: () => {},
-	hideOverlay: () => {},
+export const ModalsManagerContext = createContext<ImodalsManagerContext>({
+	showLoadingModal: () => {},
+	closeLoadingModal: () => {},
+	showErrorModal: () => {},
+	closeErrorModal: () => {},
 });
 
-export const OverlayProvider = ({ children }: { children: React.ReactNode }) => {
-	const [showBackdrop, setShowBackdrop] = useState(true);
+export const ModalsManagerProvider = ({ children }: { children: React.ReactNode }) => {
+	const [showBackdrop, setShowBackdrop] = useState(false);
 	const [loadingModalVisible, setLoadingModalVisible] = useState(false);
-	const [errorModalVisible, setErrorModalVisible] = useState(true);
+	const [errorModalVisible, setErrorModalVisible] = useState(false);
 
-	const showOverlay = () => {
+	const showLoadingModal = () => {
 		setShowBackdrop(true);
 		setLoadingModalVisible(true);
 	};
 
-	const hideOverlay = () => {
+	const closeLoadingModal = () => {
 		setShowBackdrop(false);
 		setLoadingModalVisible(false);
 	};
 
+	const showErrorModal = () => {
+		setShowBackdrop(true);
+		setErrorModalVisible(true);
+	};
+
+	const closeErrorModal = () => {
+		setShowBackdrop(false);
+		setErrorModalVisible(false);
+	};
+
 	return (
-		<OverlayContext.Provider
+		<ModalsManagerContext.Provider
 			value={{
-				showOverlay,
-				hideOverlay,
+				showLoadingModal,
+				closeLoadingModal,
+				showErrorModal,
+				closeErrorModal,
 			}}
 		>
 			{children}
@@ -40,12 +56,12 @@ export const OverlayProvider = ({ children }: { children: React.ReactNode }) =>
 
 			{loadingModalVisible && <LoadingModal />}
 			{errorModalVisible && <ErrorModal />}
-		</OverlayContext.Provider>
+		</ModalsManagerContext.Provider>
 	);
 };
 
 export const useOverlayContext = () => {
-	return useContext(OverlayContext);
+	return useContext(ModalsManagerContext);
 };
 
 const OverlayBackdrop = () => {