updated a little bit the rendering condition and export the modal z index os…

src/contexts/ModalsManagerContext.tsx

-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { View } from "react-native";
 
 export interface ImodalsManagerContext {
@@ -26,6 +26,13 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 		setShowBackdrop(false);
 	};
 
+	useEffect(() => {
+		return () => {
+			setShowBackdrop(false);
+			setModalElement(null);
+		};
+	}, []);
+
 	return (
 		<ModalsManagerContext.Provider
 			value={{
@@ -34,8 +41,13 @@ export const ModalsManagerProvider = ({ children }: { children: React.ReactNode
 			}}
 		>
 			{children}
-			{showBackdrop && <OverlayBackdrop />}
-			{modalElement && modalElement}
+
+			{modalElement && (
+				<>
+					<OverlayBackdrop />
+					{modalElement}
+				</>
+			)}
 		</ModalsManagerContext.Provider>
 	);
 };
@@ -44,6 +56,8 @@ export const useModalsManagerContext = () => {
 	return useContext(ModalsManagerContext);
 };
 
+export const OVERLAY_BACKDROP_Z_INDEX = 10;
+
 const OverlayBackdrop = () => {
 	return (
 		<View
@@ -53,7 +67,7 @@ const OverlayBackdrop = () => {
 				height: "100%",
 				// justifyContent: "center",
 				// alignItems: "center",
-				zIndex: 10,
+				zIndex: OVERLAY_BACKDROP_Z_INDEX,
 				backgroundColor: "black",
 				opacity: 0.5,
 				position: "absolute",