[iPad support] Custom tab navigator for native tablet, with side nav (#3385)

* fix fab position

* show left nav

* custom tab navigator for tablets

* re-disable right nav on tablet

* fix unread count not being rounded

* use mobile subpage header on native tablet

* fix feed being hidden under header

* rename misleading variable name

* remove drawer on native tablet, as on web tablet

* fix prompt styles on tablet

* import isWeb (ts-ignore 😡)

* disable emoji picker on tablet

* prettier format

src/Navigation.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {JSX} from 'react/jsx-runtime'
+import {View} from 'react-native'
 import {i18n, MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {
@@ -15,11 +16,12 @@ import {
   StackActions,
 } from '@react-navigation/native'
 
-import {timeout} from 'lib/async/timeout'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {usePalette} from 'lib/hooks/usePalette'
-import {buildStateObject} from 'lib/routes/helpers'
-import {
+import {init as initAnalytics} from '#/lib/analytics/analytics'
+import {timeout} from '#/lib/async/timeout'
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
+import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
+import {buildStateObject} from '#/lib/routes/helpers'
+import type {
   AllNavigatorParams,
   BottomTabNavigatorParams,
   FeedsTabNavigatorParams,
@@ -28,59 +30,60 @@ import {
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
-} from 'lib/routes/types'
-import {RouteParams, State} from 'lib/routes/types'
-import {bskyTitle} from 'lib/strings/headings'
-import {isAndroid, isNative} from 'platform/detection'
-import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
-import {AppPasswords} from 'view/screens/AppPasswords'
-import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
-import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts'
-import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed'
-import {PreferencesThreads} from 'view/screens/PreferencesThreads'
-import {SavedFeeds} from 'view/screens/SavedFeeds'
-import HashtagScreen from '#/screens/Hashtag'
-import {ModerationScreen} from '#/screens/Moderation'
-import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
-import {init as initAnalytics} from './lib/analytics/analytics'
-import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
-import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
-import {router} from './routes'
-import {useModalControls} from './state/modals'
-import {useUnreadNotifications} from './state/queries/notifications/unread'
-import {useSession} from './state/session'
+  SideTabNavigatorParams,
+} from '#/lib/routes/types'
+import {RouteParams, State} from '#/lib/routes/types'
+import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
+import {bskyTitle} from '#/lib/strings/headings'
+import {isAndroid, isNative, isNativeTablet} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useSession} from '#/state/session'
 import {
   setEmailConfirmationRequested,
   shouldRequestEmailConfirmation,
-} from './state/shell/reminders'
-import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
-import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
-import {DebugModScreen} from './view/screens/DebugMod'
-import {FeedsScreen} from './view/screens/Feeds'
-import {HomeScreen} from './view/screens/Home'
-import {LanguageSettingsScreen} from './view/screens/LanguageSettings'
-import {ListsScreen} from './view/screens/Lists'
-import {LogScreen} from './view/screens/Log'
-import {ModerationModlistsScreen} from './view/screens/ModerationModlists'
-import {NotFoundScreen} from './view/screens/NotFound'
-import {NotificationsScreen} from './view/screens/Notifications'
-import {PostLikedByScreen} from './view/screens/PostLikedBy'
-import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {PostThreadScreen} from './view/screens/PostThread'
-import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
-import {ProfileScreen} from './view/screens/Profile'
-import {ProfileFeedScreen} from './view/screens/ProfileFeed'
-import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy'
-import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
-import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
-import {ProfileListScreen} from './view/screens/ProfileList'
-import {SearchScreen} from './view/screens/Search'
-import {SettingsScreen} from './view/screens/Settings'
-import {Storybook} from './view/screens/Storybook'
-import {SupportScreen} from './view/screens/Support'
-import {TermsOfServiceScreen} from './view/screens/TermsOfService'
-import {BottomBar} from './view/shell/bottom-bar/BottomBar'
-import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth'
+} from '#/state/shell/reminders'
+import {AppPasswords} from '#/view/screens/AppPasswords'
+import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
+import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
+import {DebugModScreen} from '#/view/screens/DebugMod'
+import {FeedsScreen} from '#/view/screens/Feeds'
+import {HomeScreen} from '#/view/screens/Home'
+import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
+import {ListsScreen} from '#/view/screens/Lists'
+import {LogScreen} from '#/view/screens/Log'
+import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
+import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
+import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
+import {NotFoundScreen} from '#/view/screens/NotFound'
+import {NotificationsScreen} from '#/view/screens/Notifications'
+import {PostLikedByScreen} from '#/view/screens/PostLikedBy'
+import {PostRepostedByScreen} from '#/view/screens/PostRepostedBy'
+import {PostThreadScreen} from '#/view/screens/PostThread'
+import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
+import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
+import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
+import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
+import {ProfileScreen} from '#/view/screens/Profile'
+import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
+import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
+import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
+import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
+import {ProfileListScreen} from '#/view/screens/ProfileList'
+import {SavedFeeds} from '#/view/screens/SavedFeeds'
+import {SearchScreen} from '#/view/screens/Search'
+import {SettingsScreen} from '#/view/screens/Settings'
+import {Storybook} from '#/view/screens/Storybook'
+import {SupportScreen} from '#/view/screens/Support'
+import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
+import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
+import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
+import {LeftNav} from '#/view/shell/desktop/LeftNav'
+import HashtagScreen from '#/screens/Hashtag'
+import {ModerationScreen} from '#/screens/Moderation'
+import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
+import {atoms as a, useTheme} from '#/alf'
+import {router} from '#/routes'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -91,15 +94,23 @@ const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
   createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
+const ListsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
+const ModerationTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
+const SettingsTab = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
 const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
-const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
+
+const MobileTab = createBottomTabNavigator<BottomTabNavigatorParams>()
+const TabletTab = createBottomTabNavigator<SideTabNavigatorParams>()
 
 /**
  * These "common screens" are reused across stacks.
  */
-function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
+function commonScreens(
+  Stack: typeof HomeTab,
+  opts?: {unreadCountLabel?: string},
+) {
   const title = (page: MessageDescriptor) =>
-    bskyTitle(i18n._(page), unreadCountLabel)
+    bskyTitle(i18n._(page), opts?.unreadCountLabel)
 
   return (
     <>
@@ -108,16 +119,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => NotFoundScreen}
         options={{title: title(msg`Not Found`)}}
       />
-      <Stack.Screen
-        name="Lists"
-        component={ListsScreen}
-        options={{title: title(msg`Lists`), requireAuth: true}}
-      />
-      <Stack.Screen
-        name="Moderation"
-        getComponent={() => ModerationScreen}
-        options={{title: title(msg`Moderation`), requireAuth: true}}
-      />
       <Stack.Screen
         name="ModerationModlists"
         getComponent={() => ModerationModlistsScreen}
@@ -133,11 +134,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => ModerationBlockedAccounts}
         options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
       />
-      <Stack.Screen
-        name="Settings"
-        getComponent={() => SettingsScreen}
-        options={{title: title(msg`Settings`), requireAuth: true}}
-      />
       <Stack.Screen
         name="LanguageSettings"
         getComponent={() => LanguageSettingsScreen}
@@ -147,7 +143,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         name="Profile"
         getComponent={() => ProfileScreen}
         options={({route}) => ({
-          title: bskyTitle(`@${route.params.name}`, unreadCountLabel),
+          title: bskyTitle(`@${route.params.name}`, opts?.unreadCountLabel),
         })}
       />
       <Stack.Screen
@@ -281,15 +277,38 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => HashtagScreen}
         options={{title: title(msg`Hashtag`)}}
       />
+      {!isNativeTablet && (
+        <>
+          <Stack.Screen
+            name="Moderation"
+            getComponent={() => ModerationScreen}
+            options={{title: title(msg`Moderation`), requireAuth: true}}
+          />
+          <Stack.Screen
+            name="Lists"
+            component={ListsScreen}
+            options={{title: title(msg`Lists`), requireAuth: true}}
+          />
+          <Stack.Screen
+            name="Settings"
+            getComponent={() => SettingsScreen}
+            options={{title: title(msg`Settings`), requireAuth: true}}
+          />
+        </>
+      )}
     </>
   )
 }
 
 /**
  * The TabsNavigator is used by native mobile to represent the routes
- * in 3 distinct tab-stacks with a different root screen on each.
+ * in the distinct tab-stacks with a different root screen on each.
  */
 function TabsNavigator() {
+  return isNativeTablet ? <TabNavigatorTablet /> : <TabsNavigatorMobile />
+}
+
+function TabsNavigatorMobile() {
   const tabBar = React.useCallback(
     (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
       <BottomBar {...props} />
@@ -298,28 +317,88 @@ function TabsNavigator() {
   )
 
   return (
-    <Tab.Navigator
+    <MobileTab.Navigator
       initialRouteName="HomeTab"
       backBehavior="initialRoute"
       screenOptions={{headerShown: false, lazy: true}}
       tabBar={tabBar}>
-      <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
-      <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
-      <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} />
-      <Tab.Screen
+      <MobileTab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
+      <MobileTab.Screen
+        name="SearchTab"
+        getComponent={() => SearchTabNavigator}
+      />
+      <MobileTab.Screen
+        name="FeedsTab"
+        getComponent={() => FeedsTabNavigator}
+      />
+      <MobileTab.Screen
         name="NotificationsTab"
         getComponent={() => NotificationsTabNavigator}
       />
-      <Tab.Screen
+      <MobileTab.Screen
         name="MyProfileTab"
         getComponent={() => MyProfileTabNavigator}
       />
-    </Tab.Navigator>
+    </MobileTab.Navigator>
+  )
+}
+
+/**
+ * The TabNavigatorTablet is used by native tablet to represent the routes
+ * in all the extra tabs shown in the tablet left nav.
+ */
+function TabNavigatorTablet() {
+  // we can't style the wrapper component of the tab navigator
+  // to set it to flex_row, so put the left nav outside of the tab navigator
+  const tabBar = React.useCallback(() => null, [])
+
+  return (
+    <View style={[a.flex_row, a.flex_1]}>
+      <LeftNav />
+      <TabletTab.Navigator
+        initialRouteName="HomeTab"
+        backBehavior="initialRoute"
+        screenOptions={{headerShown: false, lazy: true}}
+        tabBar={tabBar}>
+        <TabletTab.Screen
+          name="HomeTab"
+          getComponent={() => HomeTabNavigator}
+        />
+        <TabletTab.Screen
+          name="SearchTab"
+          getComponent={() => SearchTabNavigator}
+        />
+        <TabletTab.Screen
+          name="FeedsTab"
+          getComponent={() => FeedsTabNavigator}
+        />
+        <TabletTab.Screen
+          name="NotificationsTab"
+          getComponent={() => NotificationsTabNavigator}
+        />
+        <TabletTab.Screen
+          name="ListsTab"
+          getComponent={() => ListsTabNavigator}
+        />
+        <TabletTab.Screen
+          name="ModerationTab"
+          getComponent={() => ModerationTabNavigator}
+        />
+        <TabletTab.Screen
+          name="MyProfileTab"
+          getComponent={() => MyProfileTabNavigator}
+        />
+        <TabletTab.Screen
+          name="SettingsTab"
+          getComponent={() => SettingsTabNavigator}
+        />
+      </TabletTab.Navigator>
+    </View>
   )
 }
 
 function HomeTabNavigator() {
-  const pal = usePalette('default')
+  const t = useTheme()
 
   return (
     <HomeTab.Navigator
@@ -329,7 +408,7 @@ function HomeTabNavigator() {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <HomeTab.Screen
         name="Home"
@@ -342,7 +421,7 @@ function HomeTabNavigator() {
 }
 
 function SearchTabNavigator() {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <SearchTab.Navigator
       screenOptions={{
@@ -351,7 +430,7 @@ function SearchTabNavigator() {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <SearchTab.Screen name="Search" getComponent={() => SearchScreen} />
       {commonScreens(SearchTab as typeof HomeTab)}
@@ -360,7 +439,7 @@ function SearchTabNavigator() {
 }
 
 function FeedsTabNavigator() {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <FeedsTab.Navigator
       screenOptions={{
@@ -369,7 +448,7 @@ function FeedsTabNavigator() {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <FeedsTab.Screen
         name="Feeds"
@@ -382,7 +461,7 @@ function FeedsTabNavigator() {
 }
 
 function NotificationsTabNavigator() {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <NotificationsTab.Navigator
       screenOptions={{
@@ -391,7 +470,7 @@ function NotificationsTabNavigator() {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <NotificationsTab.Screen
         name="Notifications"
@@ -404,7 +483,7 @@ function NotificationsTabNavigator() {
 }
 
 function MyProfileTabNavigator() {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
     <MyProfileTab.Navigator
       screenOptions={{
@@ -413,7 +492,7 @@ function MyProfileTabNavigator() {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <MyProfileTab.Screen
         // @ts-ignore // TODO: fix this broken type in ProfileScreen
@@ -428,12 +507,78 @@ function MyProfileTabNavigator() {
   )
 }
 
+function ListsTabNavigator() {
+  const t = useTheme()
+  return (
+    <ListsTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: t.atoms.bg,
+      }}>
+      <ListsTab.Screen
+        name="Lists"
+        getComponent={() => ListsScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(ListsTab as typeof HomeTab)}
+    </ListsTab.Navigator>
+  )
+}
+
+function ModerationTabNavigator() {
+  const t = useTheme()
+  return (
+    <ModerationTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: t.atoms.bg,
+      }}>
+      <ModerationTab.Screen
+        name="Moderation"
+        getComponent={() => ModerationScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(ModerationTab as typeof HomeTab)}
+    </ModerationTab.Navigator>
+  )
+}
+
+function SettingsTabNavigator() {
+  const t = useTheme()
+  return (
+    <SettingsTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: t.atoms.bg,
+      }}>
+      <SettingsTab.Screen
+        name="Settings"
+        getComponent={() => SettingsScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(SettingsTab as typeof HomeTab)}
+    </SettingsTab.Navigator>
+  )
+}
+
 /**
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
  */
 const FlatNavigator = () => {
-  const pal = usePalette('default')
+  const t = useTheme()
   const numUnread = useUnreadNotifications()
   const screenListeners = useWebScrollRestoration()
   const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread)
@@ -446,7 +591,7 @@ const FlatNavigator = () => {
         fullScreenGestureEnabled: true,
         headerShown: false,
         animationDuration: 250,
-        contentStyle: pal.view,
+        contentStyle: t.atoms.bg,
       }}>
       <Flat.Screen
         name="Home"
@@ -468,7 +613,7 @@ const FlatNavigator = () => {
         getComponent={() => NotificationsScreen}
         options={{title: title(msg`Notifications`), requireAuth: true}}
       />
-      {commonScreens(Flat as typeof HomeTab, numUnread)}
+      {commonScreens(Flat as typeof HomeTab, {unreadCountLabel: numUnread})}
     </Flat.Navigator>
   )
 }
@@ -515,12 +660,26 @@ const LINKING = {
       if (name === 'Search') {
         return buildStateObject('SearchTab', 'Search', params)
       }
+      if (name === 'Feeds') {
+        return buildStateObject('FeedsTab', 'Feeds', params)
+      }
       if (name === 'Notifications') {
         return buildStateObject('NotificationsTab', 'Notifications', params)
       }
       if (name === 'Home') {
         return buildStateObject('HomeTab', 'Home', params)
       }
+      if (isNativeTablet) {
+        if (name === 'Lists') {
+          return buildStateObject('ListsTab', 'Lists', params)
+        }
+        if (name === 'Moderation') {
+          return buildStateObject('ModerationTab', 'Moderation', params)
+        }
+        if (name === 'Settings') {
+          return buildStateObject('SettingsTab', 'Settings', params)
+        }
+      }
       // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
       return buildStateObject('HomeTab', name, params, [
         {
@@ -703,5 +862,6 @@ export {
   reset,
   resetToTab,
   RoutesContainer,
+  TabNavigatorTablet,
   TabsNavigator,
 }

src/components/Prompt.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {isNativeTablet} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -43,7 +44,11 @@ export function Outer({
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
-          style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
+          style={[
+            gtMobile && !isNativeTablet
+              ? {width: 'auto', maxWidth: 400}
+              : a.w_full,
+          ]}>
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
@@ -81,7 +86,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
         a.w_full,
         a.gap_md,
         a.justify_end,
-        gtMobile
+        gtMobile && !isNativeTablet
           ? [a.flex_row, a.flex_row_reverse, a.justify_start]
           : [a.flex_col],
       ]}>

src/lib/routes/types.ts

@@ -47,6 +47,17 @@ export type BottomTabNavigatorParams = CommonNavigatorParams & {
   MyProfileTab: undefined
 }
 
+export type SideTabNavigatorParams = CommonNavigatorParams & {
+  HomeTab: undefined
+  SearchTab: undefined
+  FeedsTab: undefined
+  NotificationsTab: undefined
+  MyProfileTab: undefined
+  ListsTab: undefined
+  ModerationTab: undefined
+  SettingsTab: undefined
+}
+
 export type HomeTabNavigatorParams = CommonNavigatorParams & {
   Home: undefined
 }
@@ -72,7 +83,6 @@ export type FlatNavigatorParams = CommonNavigatorParams & {
   Search: {q?: string}
   Feeds: undefined
   Notifications: undefined
-  Hashtag: {tag: string; author?: string}
 }
 
 export type AllNavigatorParams = CommonNavigatorParams & {

src/view/com/composer/Composer.tsx

@@ -44,13 +44,7 @@ import {insertMentionAt} from 'lib/strings/mention-manip'
 import {shortenLinks} from 'lib/strings/rich-text-manip'
 import {toShortUrl} from 'lib/strings/url-helpers'
 import {colors, gradients, s} from 'lib/styles'
-import {
-  isAndroid,
-  isIOS,
-  isNative,
-  isNativeTablet,
-  isWeb,
-} from 'platform/detection'
+import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection'
 import {useDialogStateControlContext} from 'state/dialogs'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ComposerOpts} from 'state/shell/composer'
@@ -490,7 +484,7 @@ export const ComposePost = observer(function ComposePost({
               <OpenCameraBtn gallery={gallery} />
             </>
           ) : null}
-          {!(isMobile || isNativeTablet) ? (
+          {!isMobile && !isNative ? (
             <Pressable
               onPress={onEmojiButtonPress}
               accessibilityRole="button"

src/view/com/home/HomeHeaderLayoutMobile.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Link} from '../util/Link'
+import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
-import {HITSLOP_10} from 'lib/constants'
-import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {isWeb} from 'platform/detection'
+import {HITSLOP_10} from 'lib/constants'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isNativeTablet, isWeb} from 'platform/detection'
 import {Logo} from '#/view/icons/Logo'
-
-import {IS_DEV} from '#/env'
 import {atoms} from '#/alf'
-import {Link as Link2} from '#/components/Link'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
+import {Link as Link2} from '#/components/Link'
+import {IS_DEV} from '#/env'
+import {Link} from '../util/Link'
 
 export function HomeHeaderLayoutMobile({
   children,
@@ -42,23 +42,28 @@ export function HomeHeaderLayoutMobile({
         headerHeight.value = e.nativeEvent.layout.height
       }}>
       <View style={[pal.view, styles.topBar]}>
-        <View style={[pal.view, {width: 100}]}>
-          <TouchableOpacity
-            testID="viewHeaderDrawerBtn"
-            onPress={onPressAvi}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Open navigation`)}
-            accessibilityHint={_(
-              msg`Access profile and other navigation links`,
-            )}
-            hitSlop={HITSLOP_10}>
-            <FontAwesomeIcon
-              icon="bars"
-              size={18}
-              color={pal.colors.textLight}
-            />
-          </TouchableOpacity>
-        </View>
+        {!isNativeTablet ? (
+          <View style={[pal.view, {width: 100}]}>
+            <TouchableOpacity
+              testID="viewHeaderDrawerBtn"
+              onPress={onPressAvi}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Open navigation`)}
+              accessibilityHint={_(
+                msg`Access profile and other navigation links`,
+              )}
+              hitSlop={HITSLOP_10}>
+              <FontAwesomeIcon
+                icon="bars"
+                size={18}
+                color={pal.colors.textLight}
+              />
+            </TouchableOpacity>
+          </View>
+        ) : (
+          // subtract width of LeftNav
+          <View style={{width: 100 - 77}} />
+        )}
         <View>
           <Logo width={30} />
         </View>

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -1,24 +1,25 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
+
+import {emitSoftReset} from '#/state/events'
+import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
+import {useSetDrawerOpen} from '#/state/shell'
+import {BACK_HITSLOP} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {Text} from '../util/text/Text'
-import {TextLink} from '../util/Link'
-import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
-import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {CenteredView} from '../util/Views'
-import {sanitizeHandle} from 'lib/strings/handles'
 import {makeProfileLink} from 'lib/routes/links'
 import {NavigationProp} from 'lib/routes/types'
-import {BACK_HITSLOP} from 'lib/constants'
-import {isNative} from 'platform/detection'
-import {useLightboxControls, ImagesLightbox} from '#/state/lightbox'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
-import {useSetDrawerOpen} from '#/state/shell'
-import {emitSoftReset} from '#/state/events'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {isNative, isNativeTablet} from 'platform/detection'
+import {TextLink} from '../util/Link'
+import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {Text} from '../util/text/Text'
+import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
+import {CenteredView} from '../util/Views'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -71,9 +72,11 @@ export function ProfileSubpageHeader({
     }
   }, [openLightbox, avatar])
 
+  const isMobileLayout = isMobile || isNativeTablet
+
   return (
     <CenteredView style={pal.view}>
-      {isMobile && (
+      {isMobileLayout && (
         <View
           style={[
             {
@@ -82,7 +85,7 @@ export function ProfileSubpageHeader({
               borderBottomWidth: 1,
               paddingTop: isNative ? 0 : 8,
               paddingBottom: 8,
-              paddingHorizontal: isMobile ? 12 : 14,
+              paddingHorizontal: isMobileLayout ? 12 : 14,
             },
             pal.border,
           ]}>
@@ -119,7 +122,7 @@ export function ProfileSubpageHeader({
           gap: 10,
           paddingTop: 14,
           paddingBottom: 6,
-          paddingHorizontal: isMobile ? 12 : 14,
+          paddingHorizontal: isMobileLayout ? 12 : 14,
         }}>
         <Pressable
           testID="headerAviButton"
@@ -170,7 +173,7 @@ export function ProfileSubpageHeader({
             </Text>
           )}
         </View>
-        {!isMobile && (
+        {!isMobileLayout && (
           <View
             style={{
               flexDirection: 'row',

src/view/com/util/SimpleViewHeader.tsx

@@ -8,13 +8,14 @@ import {
 } from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
-import {CenteredView} from './Views'
+
+import {isNativeTablet, isWeb} from '#/platform/detection'
+import {useSetDrawerOpen} from '#/state/shell'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
-import {useSetDrawerOpen} from '#/state/shell'
-import {isWeb} from '#/platform/detection'
+import {CenteredView} from './Views'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -71,13 +72,13 @@ export function SimpleViewHeader({
               icon="angle-left"
               style={[styles.backIcon, pal.text]}
             />
-          ) : (
+          ) : !isNativeTablet ? (
             <FontAwesomeIcon
               size={18}
               icon="bars"
               style={[styles.backIcon, pal.textLight]}
             />
-          )}
+          ) : null}
         </TouchableOpacity>
       ) : null}
       {children}

src/view/com/util/fab/FABInner.tsx

@@ -4,7 +4,7 @@ import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {isNativeTablet, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {clamp} from 'lib/numbers'
@@ -40,7 +40,7 @@ export function FABInner({testID, icon, ...props}: FABProps) {
           styles.outer,
           size,
           tabletSpacing,
-          (isMobile || isNativeTablet) && fabMinimalShellTransform,
+          isMobile && fabMinimalShellTransform,
         ]}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -4,15 +4,16 @@ import Animated from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useMediaQuery} from 'react-responsive'
 
-import {HITSLOP_20} from 'lib/constants'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {colors} from 'lib/styles'
+import {HITSLOP_20} from '#/lib/constants'
+import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {colors} from '#/lib/styles'
+import {isNativeTablet, isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
+import {useTheme} from '#/alf'
+
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
-import {isNativeTablet, isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
 
 export function LoadLatestBtn({
   onPress,
@@ -23,7 +24,7 @@ export function LoadLatestBtn({
   label: string
   showIndicator: boolean
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {hasSession} = useSession()
   const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
   const {fabMinimalShellTransform} = useMinimalShellMode()
@@ -33,9 +34,7 @@ export function LoadLatestBtn({
 
   // Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
   // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
-  const showBottomBar = hasSession
-    ? isMobile || isNativeTablet
-    : isTabletOrMobile
+  const showBottomBar = hasSession ? isMobile : isTabletOrMobile
 
   return (
     <AnimatedTouchableOpacity
@@ -46,8 +45,8 @@ export function LoadLatestBtn({
             ? styles.loadLatestOutOfLine
             : styles.loadLatestInline),
         isTablet && !isNativeTablet && styles.loadLatestInline,
-        pal.borderDark,
-        pal.view,
+        t.atoms.border_contrast_high,
+        t.atoms.bg,
         showBottomBar && fabMinimalShellTransform,
       ]}
       onPress={onPress}
@@ -55,8 +54,10 @@ export function LoadLatestBtn({
       accessibilityRole="button"
       accessibilityLabel={label}
       accessibilityHint="">
-      <FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
-      {showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
+      <FontAwesomeIcon icon="angle-up" color={t.atoms.text.color} size={19} />
+      {showIndicator && (
+        <View style={[styles.indicator, t.atoms.border_contrast_high]} />
+      )}
     </AnimatedTouchableOpacity>
   )
 }

src/view/screens/Search/Search.tsx

@@ -461,7 +461,7 @@ export function SearchScreen(
   const moderationOpts = useModerationOpts()
   const search = useActorAutocompleteFn()
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
+  const {isTabletOrDesktop, isMobile} = useWebMediaQueries()
 
   const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
     undefined,
@@ -637,8 +637,8 @@ export function SearchScreen(
           pal.view,
           isTabletOrDesktop && {paddingTop: 10},
         ]}
-        sideBorders={isTabletOrDesktop}>
-        {isTabletOrMobile && (
+        sideBorders={isMobile}>
+        {isMobile && (
           <Pressable
             testID="viewHeaderBackOrMenuBtn"
             onPress={onPressMenu}

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -1,11 +1,8 @@
 import * as React from 'react'
 import {View} from 'react-native'
-import {PWI_ENABLED, NEW_ONBOARDING_ENABLED} from '#/lib/build-flags'
-
 // Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts
 // MIT License
 // Copyright (c) 2017 React Navigation Contributors
-
 import {
   createNavigatorFactory,
   EventArg,
@@ -21,24 +18,25 @@ import type {
   NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
-import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types'
 import {NativeStackView} from '@react-navigation/native-stack'
+import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types'
 
-import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
-import {DesktopLeftNav} from './desktop/LeftNav'
-import {DesktopRightNav} from './desktop/RightNav'
+import {NEW_ONBOARDING_ENABLED, PWI_ENABLED} from '#/lib/build-flags'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
 } from '#/state/shell/logged-out'
-import {useSession} from '#/state/session'
 import {isWeb} from 'platform/detection'
 import {Deactivated} from '#/screens/Deactivated'
+import {Onboarding as NewOnboarding} from '#/screens/Onboarding'
 import {LoggedOut} from '../com/auth/LoggedOut'
 import {Onboarding} from '../com/auth/Onboarding'
-import {Onboarding as NewOnboarding} from '#/screens/Onboarding'
+import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
+import {LeftNav} from './desktop/LeftNav'
+import {DesktopRightNav} from './desktop/RightNav'
 
 type NativeStackNavigationOptionsWithAuth = NativeStackNavigationOptions & {
   requireAuth?: boolean
@@ -149,7 +147,7 @@ function NativeStackNavigator({
       {isWeb && showBottomBar && <BottomBarWeb />}
       {isWeb && !showBottomBar && (
         <>
-          <DesktopLeftNav />
+          <LeftNav />
           <DesktopRightNav routeName={activeRoute.name} />
         </>
       )}

src/view/shell/desktop/LeftNav.tsx

@@ -1,52 +1,54 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {PressableWithHover} from 'view/com/util/PressableWithHover'
+import {
+  FontAwesomeIcon,
+  FontAwesomeIconStyle,
+} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {
   useLinkProps,
   useNavigation,
   useNavigationState,
 } from '@react-navigation/native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
-import {Link} from 'view/com/util/Link'
-import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
+
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {isWeb} from '#/platform/detection'
+import {emitSoftReset} from '#/state/events'
+import {useFetchHandle} from '#/state/queries/handle'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {useComposerControls} from '#/state/shell/composer'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {s, colors} from 'lib/styles'
 import {
-  HomeIcon,
-  HomeIconSolid,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
   BellIcon,
   BellIconSolid,
-  UserIcon,
-  UserIconSolid,
   CogIcon,
   CogIconSolid,
   ComposeIcon2,
-  ListIcon,
-  HashtagIcon,
   HandIcon,
+  HashtagIcon,
+  HomeIcon,
+  HomeIconSolid,
+  ListIcon,
+  MagnifyingGlassIcon2,
+  MagnifyingGlassIcon2Solid,
+  UserIcon,
+  UserIconSolid,
 } from 'lib/icons'
-import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
-import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
-import {router} from '../../../routes'
+import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers'
 import {makeProfileLink} from 'lib/routes/links'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import {useUnreadNotifications} from '#/state/queries/notifications/unread'
-import {useComposerControls} from '#/state/shell/composer'
-import {useFetchHandle} from '#/state/queries/handle'
-import {emitSoftReset} from '#/state/events'
+import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
+import {colors, s} from 'lib/styles'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {isInvalidHandle} from '#/lib/strings/handles'
+import {Link} from 'view/com/util/Link'
+import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
+import {PressableWithHover} from 'view/com/util/PressableWithHover'
+import {Text} from 'view/com/util/text/Text'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {router} from '../../../routes'
 
 function ProfileCard() {
   const {currentAccount} = useSession()
@@ -266,7 +268,7 @@ function ComposeBtn() {
   )
 }
 
-export function DesktopLeftNav() {
+export function LeftNav() {
   const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -445,17 +447,19 @@ export function DesktopLeftNav() {
 }
 
 const styles = StyleSheet.create({
-  leftNav: {
-    // @ts-ignore web only
-    position: 'fixed',
-    top: 10,
-    // @ts-ignore web only
-    left: 'calc(50vw - 300px - 220px - 20px)',
-    width: 220,
-    // @ts-ignore web only
-    maxHeight: 'calc(100vh - 10px)',
-    overflowY: 'auto',
-  },
+  // @ts-ignore web only
+  leftNav: isWeb
+    ? {
+        position: 'fixed',
+        top: 10,
+        left: 'calc(50vw - 300px - 220px - 20px)',
+        width: 220,
+        maxHeight: 'calc(100vh - 10px)',
+        overflowY: 'auto',
+      }
+    : {
+        paddingTop: 12,
+      },
   leftNavTablet: {
     top: 0,
     left: 0,
@@ -513,6 +517,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     paddingHorizontal: 4,
     borderRadius: 6,
+    overflow: 'hidden',
   },
   navItemCountTablet: {
     left: 18,

src/view/shell/desktop/RightNav.tsx

@@ -1,16 +1,17 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {usePalette} from 'lib/hooks/usePalette'
-import {DesktopSearch} from './Search'
-import {DesktopFeeds} from './Feeds'
-import {Text} from 'view/com/util/text/Text'
-import {TextLink} from 'view/com/util/Link'
-import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
-import {s} from 'lib/styles'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useSession} from '#/state/session'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import {TextLink} from 'view/com/util/Link'
+import {Text} from 'view/com/util/text/Text'
+import {DesktopFeeds} from './Feeds'
+import {DesktopSearch} from './Search'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const pal = usePalette('default')
@@ -97,15 +98,18 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
 }
 
 const styles = StyleSheet.create({
-  rightNav: {
-    // @ts-ignore web only
-    position: 'fixed',
-    // @ts-ignore web only
-    left: 'calc(50vw + 300px + 20px)',
-    width: 300,
-    maxHeight: '100%',
-    overflowY: 'auto',
-  },
+  // @ts-ignore web only
+  rightNav: isWeb
+    ? {
+        position: 'fixed',
+        left: 'calc(50vw + 300px + 20px)',
+        width: 300,
+        maxHeight: '100%',
+        overflowY: 'auto',
+      }
+    : {
+        width: 300,
+      },
 
   message: {
     paddingVertical: 18,

src/view/shell/index.tsx

@@ -1,37 +1,38 @@
 import React from 'react'
-import {StatusBar} from 'expo-status-bar'
 import {
+  BackHandler,
   DimensionValue,
   StyleSheet,
   useWindowDimensions,
   View,
-  BackHandler,
 } from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Drawer} from 'react-native-drawer-layout'
+import Animated from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {StatusBar} from 'expo-status-bar'
 import {useNavigationState} from '@react-navigation/native'
-import {ModalsContainer} from 'view/com/modals/Modal'
-import {Lightbox} from 'view/com/lightbox/Lightbox'
-import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
-import {DrawerContent} from './Drawer'
-import {Composer} from './Composer'
-import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RoutesContainer, TabsNavigator} from '../../Navigation'
-import {isStateAtTabRoot} from 'lib/routes/helpers'
+
+import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
-  useSetDrawerOpen,
   useIsDrawerSwipeDisabled,
+  useSetDrawerOpen,
 } from '#/state/shell'
-import {isAndroid} from 'platform/detection'
-import {useSession} from '#/state/session'
 import {useCloseAnyActiveElement} from '#/state/util'
+import {usePalette} from 'lib/hooks/usePalette'
 import * as notifications from 'lib/notifications/notifications'
-import {Outlet as PortalOutlet} from '#/components/Portal'
-import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
+import {isStateAtTabRoot} from 'lib/routes/helpers'
+import {useTheme} from 'lib/ThemeContext'
+import {isAndroid, isNativeTablet} from 'platform/detection'
 import {useDialogStateContext} from 'state/dialogs'
-import Animated from 'react-native-reanimated'
+import {Lightbox} from 'view/com/lightbox/Lightbox'
+import {ModalsContainer} from 'view/com/modals/Modal'
+import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
+import {Outlet as PortalOutlet} from '#/components/Portal'
+import {RoutesContainer, TabsNavigator} from '../../Navigation'
+import {Composer} from './Composer'
+import {DrawerContent} from './Drawer'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -87,15 +88,19 @@ function ShellInner() {
         style={containerPadding}
         importantForAccessibility={importantForAccessibility}>
         <ErrorBoundary>
-          <Drawer
-            renderDrawerContent={renderDrawerContent}
-            open={isDrawerOpen}
-            onOpen={onOpenDrawer}
-            onClose={onCloseDrawer}
-            swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
+          {!isNativeTablet ? (
+            <Drawer
+              renderDrawerContent={renderDrawerContent}
+              open={isDrawerOpen}
+              onOpen={onOpenDrawer}
+              onClose={onCloseDrawer}
+              swipeEdgeWidth={winDim.width / 2}
+              swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
+              <TabsNavigator />
+            </Drawer>
+          ) : (
             <TabsNavigator />
-          </Drawer>
+          )}
         </ErrorBoundary>
       </Animated.View>
       <Composer winHeight={winDim.height} />