1 files changed, 28 insertions, 0 deletions
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
new file mode 100644
index 00000000..c97dfe72
--- /dev/null
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -0,0 +1,28 @@
+import { Platform, SafeAreaView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHeaderHeight } from "@react-navigation/elements";
+
+export default function CustomSafeAreaView({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const insets = useSafeAreaInsets();
+  const headerHeight = useHeaderHeight();
+
+  return (
+    <SafeAreaView
+      style={{
+        paddingTop:
+          // Some ugly hacks to make the app look the same on both android and ios
+          Platform.OS == "android"
+            ? headerHeight > 0
+              ? headerHeight
+              : insets.top
+            : undefined,
+      }}
+    >
+      {children}
+    </SafeAreaView>
+  );
+}