safe toast viewport?

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} />
+  )
+}

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>
   )