apps/mobile/components/ui/CustomSafeAreaView.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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,
  edges = ["top", "bottom"],
}: {
  children: React.ReactNode;
  edges?: ("top" | "bottom")[];
}) {
  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" && edges.includes("top")
            ? headerHeight > 0
              ? headerHeight
              : insets.top
            : undefined,
        paddingBottom: edges.includes("bottom") ? insets.bottom : undefined,
      }}
    >
      {children}
    </SafeAreaView>
  );
}