move safearea provider

js/app/components/provider/provider.tsx

···
 import { LinkingOptions } from "@react-navigation/native";
 import { ThemeProvider } from "@streamplace/components";
 import React, { useEffect } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import SharedProvider from "./provider.shared";
 
 export default function Provider({
···
     }
   }, []);
   return (
-    <ThemeProvider forcedTheme="dark">
-      <SharedProvider linking={linking}>{children}</SharedProvider>
-    </ThemeProvider>
+    <SafeAreaProvider>
+      <ThemeProvider forcedTheme="dark">
+        <SharedProvider linking={linking}>{children}</SharedProvider>
+      </ThemeProvider>
+    </SafeAreaProvider>
   );
 }

js/components/src/lib/theme/theme.tsx

···
 } from "./tokens";
 
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import { ToastProvider } from "../../components/ui";
 
 // Import pairify function for generating theme tokens
···
 }
 
 // Theme provider component
+// Should be surrounded by SafeAreaProvider at the root
 export function ThemeProvider({
   children,
   defaultTheme = "system",
···
 
   return (
     <ThemeContext.Provider value={value}>
-      <SafeAreaProvider>
-        <GestureHandlerRootView>
-          {children}
-          <PortalHost />
-          <ToastProvider />
-        </GestureHandlerRootView>
-      </SafeAreaProvider>
+      <GestureHandlerRootView>
+        {children}
+        <PortalHost />
+        <ToastProvider />
+      </GestureHandlerRootView>
     </ThemeContext.Provider>
   );
 }