From 7454e584833ba9f2086cffff961cd2a6830d99ea Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Thu, 13 Feb 2025 16:30:41 -0600
Subject: [PATCH] safe toast viewport?

---
 components/Global/components/toast-area-view-port.tsx | 9 +++++++++
 components/jellify.tsx                                | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 components/Global/components/toast-area-view-port.tsx

diff --git a/components/Global/components/toast-area-view-port.tsx b/components/Global/components/toast-area-view-port.tsx
new file mode 100644
index 00000000..77608bb5
--- /dev/null
+++ b/components/Global/components/toast-area-view-port.tsx
@@ -0,0 +1,9 @@
+import { ToastViewport } from '@tamagui/toast'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+export default function SafeToastViewport() : React.JSX.Element {
+  const { left, top, right } = useSafeAreaInsets()
+  return (
+    <ToastViewport flexDirection="column-reverse" top={top} left={left} right={right} />
+  )
+}
\ No newline at end of file
diff --git a/components/jellify.tsx b/components/jellify.tsx
index b98f2a47..eac461f7 100644
--- a/components/jellify.tsx
+++ b/components/jellify.tsx
@@ -11,12 +11,13 @@ import { useColorScheme } from "react-native";
 import { PortalProvider } from "@tamagui/portal";
 import { JellifyProvider, useJellifyContext } from "./provider";
 import { ToastProvider, ToastViewport } from "@tamagui/toast";
+import SafeToastViewport from "./Global/components/toast-area-view-port";
 
 export default function Jellify(): React.JSX.Element {
 
   return (
     <PortalProvider shouldAddRootHost>
-      <ToastProvider>
+      <ToastProvider burntOptions={{ from: 'top'}}>
         <JellifyProvider>
           <App />
         </JellifyProvider>
@@ -42,7 +43,7 @@ function App(): React.JSX.Element {
             <Login /> 
           </JellyfinAuthenticationProvider>
         )}
-        <ToastViewport />
+        <SafeToastViewport />
       </SafeAreaProvider>
     </NavigationContainer>
   )