From 2d88463453abfad1e9e45bbd6cdbcd5824a7e770 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 14 Oct 2024 22:09:47 +0300
Subject: Remove top padding from shell, move down into individual screens
 (#5548)

---
 src/components/Layout.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/Layout.tsx

(limited to 'src/components/Layout.tsx')

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 000000000..57e373164
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {View, ViewStyle} from 'react-native'
+import {StyleProp} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {atoms as a} from '#/alf'
+
+// Every screen should have a Layout component wrapping it.
+// This component provides a default padding for the top of the screen.
+// This allows certain screens to avoid the top padding if they want to.
+//
+// In a future PR I will add a unified header component to this file and
+// things like a preconfigured scrollview.
+
+/**
+ * Every screen should have a Layout.Screen component wrapping it.
+ * This component provides a default padding for the top of the screen
+ * and height/minHeight
+ */
+let Screen = ({
+  disableTopPadding,
+  style,
+  ...props
+}: React.ComponentProps<typeof View> & {
+  disableTopPadding?: boolean
+  style?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const {top} = useSafeAreaInsets()
+  return (
+    <View
+      style={[
+        {paddingTop: disableTopPadding ? 0 : top},
+        a.util_screen_outer,
+        style,
+      ]}
+      {...props}
+    />
+  )
+}
+Screen = React.memo(Screen)
+export {Screen}
-- 
cgit 1.4.1