1 files changed, 10 insertions, 11 deletions
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
index fdf6520d..8e7755c2 100644
--- a/apps/mobile/components/ui/CustomSafeAreaView.tsx
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -1,5 +1,5 @@
-import { Platform, SafeAreaView } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function CustomSafeAreaView({
@@ -9,20 +9,19 @@ export default function CustomSafeAreaView({
   children: React.ReactNode;
   edges?: ("top" | "bottom")[];
 }) {
-  const insets = useSafeAreaInsets();
   const headerHeight = useHeaderHeight();
+  const { colors } = useColorScheme();
 
   return (
     <SafeAreaView
       style={{
-        paddingTop:
-          // Some ugly hacks to make the app look the same on both android and ios
-          Platform.OS == "android" && edges.includes("top")
-            ? headerHeight > 0
-              ? headerHeight
-              : insets.top
-            : undefined,
-        paddingBottom: edges.includes("bottom") ? insets.bottom : undefined,
+        flex: 1,
+        backgroundColor: colors.background,
+        paddingTop: edges.includes("top")
+          ? headerHeight > 0
+            ? headerHeight
+            : undefined
+          : undefined,
       }}
     >
       {children}