use util_screen_outer

src/components/Layout.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
-import {View} from 'react-native'
+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
@@ -9,16 +12,29 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 // 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 = ({
-  children,
   disableTopPadding,
-}: {
+  style,
-  children: React.ReactNode
+  ...props
+}: React.ComponentProps<typeof View> & {
   disableTopPadding?: boolean
+  style?: StyleProp<ViewStyle>
 }): React.ReactNode => {
   const {top} = useSafeAreaInsets()
   return (
-    <View style={{paddingTop: disableTopPadding ? 0 : top}}>{children}</View>
+    <View
+      style={[
+        {paddingTop: disableTopPadding ? 0 : top},
+        a.util_screen_outer,
+        style,
+      ]}
+      {...props}
+    />
   )
 }
 Screen = React.memo(Screen)