Added portal above content area

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-dan-forden",
   "description": "Super simple react native toast that's just gonna work. (web, native, expo)",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "src/index.ts",
   "files": [
     "src"
@@ -31,6 +31,8 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.25",
+    "react-dom": "18.2.0",
     "react": "^18.2.0",
     "react-native": "^0.73.6",
     "react-native-gesture-handler": "^2.16.0",

src/ToastContainer.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { View, Pressable, StyleSheet } from "react-native";
 
 import { ToastMessage } from "./types";
@@ -17,6 +18,19 @@ export default function ToastContainer({
   children,
 }: Props) {
   const [slide, setSlide] = useState(false);
+  const [portalEl, setPortalEl] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const el = document.createElement("div");
+    el.style.zIndex = "10000";
+    el.style.position = "relative";
+    document.body.appendChild(el);
+    setPortalEl(el);
+
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, []);
 
   function onDismiss() {
     setSlide(false);
@@ -34,7 +48,7 @@ export default function ToastContainer({
     setSlide(true);
   }, []);
 
-  return (
+  const content = (
     <View
       pointerEvents="none"
       style={[styles.container, position === "bottom" && styles.positionBottom]}
@@ -64,6 +78,12 @@ export default function ToastContainer({
       </Pressable>
     </View>
   );
+
+  if (portalEl) {
+    return createPortal(content, portalEl);
+  }
+
+  return content;
 }
 
 const styles = StyleSheet.create({