fix: settings sheet eating into notch (but now there's some leftover ugly bar that didn't move)

apps/expo/app.config.ts

@@ -42,7 +42,7 @@ const defineConfig = (): ExpoConfig => ({
     [
       "expo-screen-orientation",
       {
-        initialOrientation: "PORTRAIT_UP",
+        initialOrientation: "ALL",
       },
     ],
     [

apps/expo/src/components/player/settings/Sheet.tsx

@@ -1,4 +1,5 @@
 import type { SheetProps, ViewProps } from "tamagui";
+import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
 import {
   ScrollView,
   Separator,
@@ -52,22 +53,26 @@ function SettingsSheetFrame({
   isLoading?: boolean;
 }) {
   return (
-    <Sheet.Frame
-      backgroundColor="$playerSettingsBackground"
-      padding="$5"
-      gap="$4"
-    >
-      {isLoading && (
-        <Spinner
-          size="large"
-          color="$loadingIndicator"
-          style={{
-            position: "absolute",
-          }}
-        />
-      )}
-      {!isLoading && children}
-    </Sheet.Frame>
+    <SafeAreaProvider>
+      <SafeAreaView style={{ flex: 1 }}>
+        <Sheet.Frame
+          backgroundColor="$playerSettingsBackground"
+          padding="$5"
+          gap="$4"
+        >
+          {isLoading && (
+            <Spinner
+              size="large"
+              color="$loadingIndicator"
+              style={{
+                position: "absolute",
+              }}
+            />
+          )}
+          {!isLoading && children}
+        </Sheet.Frame>
+      </SafeAreaView>
+    </SafeAreaProvider>
   );
 }