Remove top padding from shell, move down into individual screens (#5548)

src/view/shell/index.tsx

@@ -1,14 +1,7 @@
 import React from 'react'
-import {
-  BackHandler,
-  DimensionValue,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native'
+import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native'
 import {Drawer} from 'react-native-drawer-layout'
 import Animated from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -32,6 +25,7 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {atoms as a} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -46,11 +40,7 @@ function ShellInner() {
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
-  const safeAreaInsets = useSafeAreaInsets()
-  const containerPadding = React.useMemo(
-    () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}),
-    [safeAreaInsets],
-  )
+
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
   const onOpenDrawer = React.useCallback(
     () => setIsDrawerOpen(true),
@@ -68,14 +58,14 @@ function ShellInner() {
   useNotificationsHandler()
 
   React.useEffect(() => {
-    let listener = {remove() {}}
     if (isAndroid) {
-      listener = BackHandler.addEventListener('hardwareBackPress', () => {
+      const listener = BackHandler.addEventListener('hardwareBackPress', () => {
         return closeAnyActiveElement()
       })
-    }
-    return () => {
-      listener.remove()
+
+      return () => {
+        listener.remove()
+      }
     }
   }, [closeAnyActiveElement])
 
@@ -102,7 +92,7 @@ function ShellInner() {
 
   return (
     <>
-      <Animated.View style={containerPadding}>
+      <Animated.View style={[a.h_full]}>
         <ErrorBoundary>
           <Drawer
             renderDrawerContent={renderDrawerContent}

src/view/shell/index.web.tsx

@@ -7,19 +7,20 @@ import {useNavigation} from '@react-navigation/native'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
-import {colors, s} from '#/lib/styles'
+import {colors} from '#/lib/styles'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {useCloseAllActiveElements} from '#/state/util'
+import {Lightbox} from '#/view/com/lightbox/Lightbox'
+import {ModalsContainer} from '#/view/com/modals/Modal'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {atoms as a} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
-import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
-import {FlatNavigator, RoutesContainer} from '../../Navigation'
-import {Lightbox} from '../com/lightbox/Lightbox'
-import {ModalsContainer} from '../com/modals/Modal'
-import {ErrorBoundary} from '../com/util/ErrorBoundary'
+import {FlatNavigator, RoutesContainer} from '#/Navigation'
 import {Composer} from './Composer.web'
 import {DrawerContent} from './Drawer'
 
@@ -78,7 +79,7 @@ function ShellInner() {
 export const Shell: React.FC = function ShellImpl() {
   const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
   return (
-    <View style={[s.hContentRegion, pageBg]}>
+    <View style={[a.util_screen_outer, pageBg]}>
       <RoutesContainer>
         <ShellInner />
       </RoutesContainer>