Extract shell state into separate context (#1824)

* WIP

* Add shell state

* Integrate new shell state for drawer and minimal shell mode

* Replace isDrawerSwipeDisabled

* Split shell state into separate contexts to avoid needless re-renders

* Fix typo

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/App.native.tsx

@@ -19,6 +19,7 @@ import * as analytics from 'lib/analytics/analytics'
 import * as Toast from 'view/com/util/Toast'
 import {queryClient} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
+import {Provider as ShellStateProvider} from 'state/shell'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -44,6 +45,7 @@ const App = observer(function AppImpl() {
     return null
   }
   return (
+    <ShellStateProvider>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={rootStore.shell.colorMode}>
           <RootSiblingParent>
@@ -58,6 +60,7 @@ const App = observer(function AppImpl() {
           </RootSiblingParent>
         </ThemeProvider>
       </QueryClientProvider>
+    </ShellStateProvider>
   )
 })
 

src/App.web.tsx

@@ -14,6 +14,7 @@ import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {queryClient} from 'lib/react-query'
+import {Provider as ShellStateProvider} from 'state/shell'
 
 const App = observer(function AppImpl() {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
@@ -34,6 +35,7 @@ const App = observer(function AppImpl() {
   }
 
   return (
+    <ShellStateProvider>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={rootStore.shell.colorMode}>
           <RootSiblingParent>
@@ -48,6 +50,7 @@ const App = observer(function AppImpl() {
           </RootSiblingParent>
         </ThemeProvider>
       </QueryClientProvider>
+    </ShellStateProvider>
   )
 })
 

src/lib/hooks/useAccountSwitcher.ts

@@ -6,6 +6,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {AccountData} from 'state/models/session'
 import {reset as resetNavigation} from '../../Navigation'
 import * as Toast from 'view/com/util/Toast'
+import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 
 export function useAccountSwitcher(): [
   boolean,
@@ -13,8 +14,8 @@ export function useAccountSwitcher(): [
   (acct: AccountData) => Promise<void>,
 ] {
   const {track} = useAnalytics()
-
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const [isSwitching, setIsSwitching] = useState(false)
   const navigation = useNavigation<NavigationProp>()
 
@@ -23,6 +24,7 @@ export function useAccountSwitcher(): [
       track('Settings:SwitchAccountButtonClicked')
       setIsSwitching(true)
       const success = await store.session.resumeSession(acct)
+      setDrawerOpen(false)
       store.shell.closeAllActiveElements()
       if (success) {
         resetNavigation()
@@ -34,7 +36,7 @@ export function useAccountSwitcher(): [
         store.session.clear()
       }
     },
-    [track, setIsSwitching, navigation, store],
+    [track, setIsSwitching, navigation, store, setDrawerOpen],
   )
 
   return [isSwitching, setIsSwitching, onPressSwitchAccount]

src/lib/hooks/useMinimalShellMode.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {autorun} from 'mobx'
-import {useStores} from 'state/index'
 import {
   Easing,
   interpolate,
@@ -9,8 +8,10 @@ import {
   withTiming,
 } from 'react-native-reanimated'
 
+import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode'
+
 export function useMinimalShellMode() {
-  const store = useStores()
+  const minimalShellMode = useMinimalShellModeState()
   const minimalShellInterp = useSharedValue(0)
   const footerMinimalShellTransform = useAnimatedStyle(() => {
     return {
@@ -38,7 +39,7 @@ export function useMinimalShellMode() {
 
   React.useEffect(() => {
     return autorun(() => {
-      if (store.shell.minimalShellMode) {
+      if (minimalShellMode) {
         minimalShellInterp.value = withTiming(1, {
           duration: 125,
           easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -50,9 +51,10 @@ export function useMinimalShellMode() {
         })
       }
     })
-  }, [minimalShellInterp, store.shell.minimalShellMode])
+  }, [minimalShellInterp, minimalShellMode])
 
   return {
+    minimalShellMode,
     footerMinimalShellTransform,
     headerMinimalShellTransform,
     fabMinimalShellTransform,

src/lib/hooks/useOnMainScroll.ts

@@ -1,8 +1,8 @@
 import {useState, useCallback, useRef} from 'react'
 import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
-import {RootStoreModel} from 'state/index'
 import {s} from 'lib/styles'
 import {useWebMediaQueries} from './useWebMediaQueries'
+import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell'
 
 const Y_LIMIT = 10
 
@@ -19,12 +19,12 @@ export type OnScrollCb = (
 ) => void
 export type ResetCb = () => void
 
-export function useOnMainScroll(
+export function useOnMainScroll(): [OnScrollCb, boolean, ResetCb] {
-  store: RootStoreModel,
-): [OnScrollCb, boolean, ResetCb] {
   let lastY = useRef(0)
   let [isScrolledDown, setIsScrolledDown] = useState(false)
   const {dyLimitUp, dyLimitDown} = useDeviceLimits()
+  const minimalShellMode = useMinimalShellMode()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   return [
     useCallback(
@@ -33,13 +33,10 @@ export function useOnMainScroll(
         const dy = y - (lastY.current || 0)
         lastY.current = y
 
-        if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
+        if (!minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
-          store.shell.setMinimalShellMode(true)
+          setMinimalShellMode(true)
-        } else if (
+        } else if (minimalShellMode && (dy < dyLimitUp * -1 || y <= Y_LIMIT)) {
-          store.shell.minimalShellMode &&
+          setMinimalShellMode(false)
-          (dy < dyLimitUp * -1 || y <= Y_LIMIT)
-        ) {
-          store.shell.setMinimalShellMode(false)
         }
 
         if (
@@ -54,13 +51,19 @@ export function useOnMainScroll(
           setIsScrolledDown(false)
         }
       },
-      [store.shell, dyLimitDown, dyLimitUp, isScrolledDown],
+      [
+        dyLimitDown,
+        dyLimitUp,
+        isScrolledDown,
+        minimalShellMode,
+        setMinimalShellMode,
+      ],
     ),
     isScrolledDown,
     useCallback(() => {
       setIsScrolledDown(false)
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
       lastY.current = 1e8 // NOTE we set this very high so that the onScroll logic works right -prf
-    }, [store, setIsScrolledDown]),
+    }, [setIsScrolledDown, setMinimalShellMode]),
   ]
 }

src/lib/routes/back-handler.ts

@@ -1,19 +0,0 @@
-import {isAndroid} from 'platform/detection'
-import {BackHandler} from 'react-native'
-import {RootStoreModel} from 'state/index'
-
-export function init(store: RootStoreModel) {
-  // only register back handler on android, otherwise it throws an error
-  if (isAndroid) {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        return store.shell.closeAnyActiveElement()
-      },
-    )
-    return () => {
-      backHandler.remove()
-    }
-  }
-  return () => {}
-}

src/state/models/ui/shell.ts

@@ -266,9 +266,6 @@ export interface ComposerOpts {
 
 export class ShellUiModel {
   colorMode: ColorMode = 'system'
-  minimalShellMode = false
-  isDrawerOpen = false
-  isDrawerSwipeDisabled = false
   isModalActive = false
   activeModals: Modal[] = []
   isLightboxActive = false
@@ -313,10 +310,6 @@ export class ShellUiModel {
     }
   }
 
-  setMinimalShellMode(v: boolean) {
-    this.minimalShellMode = v
-  }
-
   /**
    * returns true if something was closed
    * (used by the android hardware back btn)
@@ -334,10 +327,6 @@ export class ShellUiModel {
       this.closeComposer()
       return true
     }
-    if (this.isDrawerOpen) {
-      this.closeDrawer()
-      return true
-    }
     return false
   }
 
@@ -354,21 +343,6 @@ export class ShellUiModel {
     if (this.isComposerActive) {
       this.closeComposer()
     }
-    if (this.isDrawerOpen) {
-      this.closeDrawer()
-    }
-  }
-
-  openDrawer() {
-    this.isDrawerOpen = true
-  }
-
-  closeDrawer() {
-    this.isDrawerOpen = false
-  }
-
-  setIsDrawerSwipeDisabled(v: boolean) {
-    this.isDrawerSwipeDisabled = v
   }
 
   openModal(modal: Modal) {

src/state/shell/drawer-open.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useIsDrawerOpen() {
+  return React.useContext(stateContext)
+}
+
+export function useSetDrawerOpen() {
+  return React.useContext(setContext)
+}

src/state/shell/drawer-swipe-disabled.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useIsDrawerSwipeDisabled() {
+  return React.useContext(stateContext)
+}
+
+export function useSetDrawerSwipeDisabled() {
+  return React.useContext(setContext)
+}

src/state/shell/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {Provider as DrawerOpenProvider} from './drawer-open'
+import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'
+import {Provider as MinimalModeProvider} from './minimal-mode'
+
+export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open'
+export {
+  useIsDrawerSwipeDisabled,
+  useSetDrawerSwipeDisabled,
+} from './drawer-swipe-disabled'
+export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode'
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  return (
+    <DrawerOpenProvider>
+      <DrawerSwipableProvider>
+        <MinimalModeProvider>{children}</MinimalModeProvider>
+      </DrawerSwipableProvider>
+    </DrawerOpenProvider>
+  )
+}

src/state/shell/minimal-mode.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(false)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(false)
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useMinimalShellMode() {
+  return React.useContext(stateContext)
+}
+
+export function useSetMinimalShellMode() {
+  return React.useContext(setContext)
+}

src/view/com/auth/LoggedOut.tsx

@@ -9,6 +9,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {SplashScreen} from './SplashScreen'
+import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
 
 enum ScreenState {
   S_LoginOrCreateAccount,
@@ -19,6 +20,7 @@ enum ScreenState {
 export const LoggedOut = observer(function LoggedOutImpl() {
   const pal = usePalette('default')
   const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const {screen} = useAnalytics()
   const [screenState, setScreenState] = React.useState<ScreenState>(
     ScreenState.S_LoginOrCreateAccount,
@@ -26,8 +28,8 @@ export const LoggedOut = observer(function LoggedOutImpl() {
 
   React.useEffect(() => {
     screen('Login')
-    store.shell.setMinimalShellMode(true)
+    setMinimalShellMode(true)
-  }, [store, screen])
+  }, [screen, setMinimalShellMode])
 
   if (
     store.session.isResumingSession ||

src/view/com/auth/Onboarding.tsx

@@ -8,14 +8,16 @@ import {useStores} from 'state/index'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
 import {RecommendedFollows} from './onboarding/RecommendedFollows'
+import {useSetMinimalShellMode} from '#/state/shell/minimal-mode'
 
 export const Onboarding = observer(function OnboardingImpl() {
   const pal = usePalette('default')
   const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   React.useEffect(() => {
-    store.shell.setMinimalShellMode(true)
+    setMinimalShellMode(true)
-  }, [store])
+  }, [setMinimalShellMode])
 
   const next = () => store.onboarding.next()
   const skip = () => store.onboarding.skip()

src/view/com/feeds/FeedPage.tsx

@@ -38,7 +38,7 @@ export const FeedPage = observer(function FeedPageImpl({
   const store = useStores()
   const pal = usePalette('default')
   const {isDesktop} = useWebMediaQueries()
-  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
+  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
   const {screen, track} = useAnalytics()
   const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<FlatList>(null)

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -13,21 +13,23 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {s} from 'lib/styles'
 import {HITSLOP_10} from 'lib/constants'
-import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const pal = usePalette('default')
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const items = useHomeTabs(store.preferences.pinnedFeeds)
   const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
-  const {headerMinimalShellTransform} = useMinimalShellMode()
+  const {minimalShellMode, headerMinimalShellTransform} = useMinimalShellMode()
 
   const onPressAvi = React.useCallback(() => {
-    store.shell.openDrawer()
+    setDrawerOpen(true)
-  }, [store])
+  }, [setDrawerOpen])
 
   return (
     <Animated.View
@@ -36,7 +38,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
         pal.border,
         styles.tabBar,
         headerMinimalShellTransform,
-        store.shell.minimalShellMode && styles.disabled,
+        minimalShellMode && styles.disabled,
       ]}>
       <View style={[pal.view, styles.topBar]}>
         <View style={[pal.view]}>

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -17,6 +17,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {BACK_HITSLOP} from 'lib/constants'
 import {isNative} from 'platform/detection'
 import {ImagesLightbox} from 'state/models/ui/shell'
+import {useSetDrawerOpen} from '#/state/shell'
 
 export const ProfileSubpageHeader = observer(function HeaderImpl({
   isLoading,
@@ -42,6 +43,7 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
   avatarType: UserAvatarType
 }>) {
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
   const pal = usePalette('default')
@@ -56,8 +58,8 @@ export const ProfileSubpageHeader = observer(function HeaderImpl({
   }, [navigation])
 
   const onPressMenu = React.useCallback(() => {
-    store.shell.openDrawer()
+    setDrawerOpen(true)
-  }, [store])
+  }, [setDrawerOpen])
 
   const onPressAvi = React.useCallback(() => {
     if (

src/view/com/search/HeaderWithInput.tsx

@@ -8,10 +8,10 @@ import {Text} from 'view/com/util/text/Text'
 import {MagnifyingGlassIcon} from 'lib/icons'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {HITSLOP_10} from 'lib/constants'
+import {useSetDrawerOpen} from '#/state/shell'
 
 interface Props {
   isInputFocused: boolean
@@ -33,7 +33,7 @@ export function HeaderWithInput({
   onSubmitQuery,
   showMenu = true,
 }: Props) {
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const theme = useTheme()
   const pal = usePalette('default')
   const {track} = useAnalytics()
@@ -42,8 +42,8 @@ export function HeaderWithInput({
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
+    setDrawerOpen(true)
-  }, [track, store])
+  }, [track, setDrawerOpen])
 
   const onPressCancelSearchInner = React.useCallback(() => {
     onPressCancelSearch()

src/view/com/util/SimpleViewHeader.tsx

@@ -10,11 +10,11 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {CenteredView} from './Views'
-import {useStores} from 'state/index'
 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'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -27,7 +27,7 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
   style?: StyleProp<ViewStyle>
 }>) {
   const pal = usePalette('default')
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isMobile} = useWebMediaQueries()
@@ -43,8 +43,8 @@ export const SimpleViewHeader = observer(function SimpleViewHeaderImpl({
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
+    setDrawerOpen(true)
-  }, [track, store])
+  }, [track, setDrawerOpen])
 
   const Container = isMobile ? View : CenteredView
   return (

src/view/com/util/ViewHeader.tsx

@@ -5,13 +5,13 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {CenteredView} from './Views'
 import {Text} from './text/Text'
-import {useStores} from 'state/index'
 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 {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
+import {useSetDrawerOpen} from '#/state/shell'
 
 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
 
@@ -33,7 +33,7 @@ export const ViewHeader = observer(function ViewHeaderImpl({
   renderButton?: () => JSX.Element
 }) {
   const pal = usePalette('default')
-  const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isDesktop, isTablet} = useWebMediaQueries()
@@ -48,8 +48,8 @@ export const ViewHeader = observer(function ViewHeaderImpl({
 
   const onPressMenu = React.useCallback(() => {
     track('ViewHeader:MenuButtonClicked')
-    store.shell.openDrawer()
+    setDrawerOpen(true)
-  }, [track, store])
+  }, [track, setDrawerOpen])
 
   if (isDesktop) {
     if (showOnDesktop) {

src/view/screens/AppPasswords.tsx

@@ -16,20 +16,22 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
 export const AppPasswords = withAuthRequired(
   observer(function AppPasswordsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen} = useAnalytics()
     const {isTabletOrDesktop} = useWebMediaQueries()
 
     useFocusEffect(
       React.useCallback(() => {
         screen('AppPasswords')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
-      }, [screen, store]),
+      }, [screen, setMinimalShellMode]),
     )
 
     const onAdd = React.useCallback(async () => {

src/view/screens/CommunityGuidelines.tsx

@@ -5,10 +5,10 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -16,12 +16,12 @@ type Props = NativeStackScreenProps<
 >
 export const CommunityGuidelinesScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/CopyrightPolicy.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CopyrightPolicy'>
 export const CopyrightPolicyScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/Feeds.tsx

@@ -27,12 +27,14 @@ import {FeedSourceModel} from 'state/models/content/feed-source'
 import {FlatList} from 'view/com/util/Views'
 import {useFocusEffect} from '@react-navigation/native'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 export const FeedsScreen = withAuthRequired(
   observer<Props>(function FeedsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
     const myFeeds = store.me.myFeeds
     const [query, setQuery] = React.useState<string>('')
@@ -43,14 +45,14 @@ export const FeedsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         myFeeds.setup()
 
         const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh())
         return () => {
           softResetSub.remove()
         }
-      }, [store, myFeeds]),
+      }, [store, myFeeds, setMinimalShellMode]),
     )
     React.useEffect(() => {
       // watch for changes to saved/pinned feeds

src/view/screens/Home.tsx

@@ -14,6 +14,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {useStores} from 'state/index'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedPage} from 'view/com/feeds/FeedPage'
+import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 
 export const POLL_FREQ = 30e3 // 30sec
 
@@ -21,6 +22,8 @@ type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
   observer(function HomeScreenImpl({}: Props) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
     const pagerRef = React.useRef<PagerRef>(null)
     const [selectedPage, setSelectedPage] = React.useState(0)
     const [customFeeds, setCustomFeeds] = React.useState<PostsFeedModel[]>([])
@@ -61,21 +64,21 @@ export const HomeScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
-        store.shell.setIsDrawerSwipeDisabled(selectedPage > 0)
+        setDrawerSwipeDisabled(selectedPage > 0)
         return () => {
-          store.shell.setIsDrawerSwipeDisabled(false)
+          setDrawerSwipeDisabled(false)
         }
-      }, [store, selectedPage]),
+      }, [setDrawerSwipeDisabled, selectedPage, setMinimalShellMode]),
     )
 
     const onPageSelected = React.useCallback(
       (index: number) => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         setSelectedPage(index)
-        store.shell.setIsDrawerSwipeDisabled(index > 0)
+        setDrawerSwipeDisabled(index > 0)
       },
-      [store, setSelectedPage],
+      [setDrawerSwipeDisabled, setSelectedPage, setMinimalShellMode],
     )
 
     const onPressSelected = React.useCallback(() => {

src/view/screens/LanguageSettings.tsx

@@ -18,6 +18,7 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {useFocusEffect} from '@react-navigation/native'
 import {LANGUAGES} from 'lib/../locale/languages'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
@@ -28,12 +29,13 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
   const store = useStores()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen, track} = useAnalytics()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
       screen('Settings')
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [screen, store]),
+    }, [screen, setMinimalShellMode]),
   )
 
   const onPressContentLanguages = React.useCallback(() => {

src/view/screens/Lists.tsx

@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Lists'>
 export const ListsScreen = withAuthRequired(
   observer(function ListsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile} = useWebMediaQueries()
     const navigation = useNavigation<NavigationProp>()
 
@@ -32,9 +34,9 @@ export const ListsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         listsLists.refresh()
-      }, [store, listsLists]),
+      }, [listsLists, setMinimalShellMode]),
     )
 
     const onPressNewList = React.useCallback(() => {

src/view/screens/Log.tsx

@@ -5,26 +5,26 @@ import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ScrollView} from '../com/util/Views'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {getEntries} from '#/logger/logDump'
 import {ago} from 'lib/strings/time'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 export const LogScreen = observer(function Log({}: NativeStackScreenProps<
   CommonNavigatorParams,
   'Log'
 >) {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const [expanded, setExpanded] = React.useState<string[]>([])
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   const toggler = (id: string) => () => {

src/view/screens/Moderation.tsx

@@ -17,20 +17,22 @@ import {Text} from '../com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
 export const ModerationScreen = withAuthRequired(
   observer(function Moderation({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen, track} = useAnalytics()
     const {isTabletOrDesktop} = useWebMediaQueries()
 
     useFocusEffect(
       React.useCallback(() => {
         screen('Moderation')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
-      }, [screen, store]),
+      }, [screen, setMinimalShellMode]),
     )
 
     const onPressContentFiltering = React.useCallback(() => {

src/view/screens/ModerationBlockedAccounts.tsx

@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationBlockedAccounts = withAuthRequired(
   observer(function ModerationBlockedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
     const blockedAccounts = useMemo(
@@ -41,9 +43,9 @@ export const ModerationBlockedAccounts = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('BlockedAccounts')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         blockedAccounts.refresh()
-      }, [screen, store, blockedAccounts]),
+      }, [screen, setMinimalShellMode, blockedAccounts]),
     )
 
     const onRefresh = React.useCallback(() => {

src/view/screens/ModerationModlists.tsx

@@ -16,12 +16,14 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'>
 export const ModerationModlistsScreen = withAuthRequired(
   observer(function ModerationModlistsScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile} = useWebMediaQueries()
     const navigation = useNavigation<NavigationProp>()
 
@@ -32,9 +34,9 @@ export const ModerationModlistsScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         mutelists.refresh()
-      }, [store, mutelists]),
+      }, [mutelists, setMinimalShellMode]),
     )
 
     const onPressNewList = React.useCallback(() => {

src/view/screens/ModerationMutedAccounts.tsx

@@ -22,6 +22,7 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -31,6 +32,7 @@ export const ModerationMutedAccounts = withAuthRequired(
   observer(function ModerationMutedAccountsImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
     const mutedAccounts = useMemo(() => new MutedAccountsModel(store), [store])
@@ -38,9 +40,9 @@ export const ModerationMutedAccounts = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('MutedAccounts')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         mutedAccounts.refresh()
-      }, [screen, store, mutedAccounts]),
+      }, [screen, setMinimalShellMode, mutedAccounts]),
     )
 
     const onRefresh = React.useCallback(() => {

src/view/screens/NotFound.tsx

@@ -10,18 +10,18 @@ import {Text} from '../com/util/text/Text'
 import {Button} from 'view/com/util/forms/Button'
 import {NavigationProp} from 'lib/routes/types'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 export const NotFoundScreen = () => {
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   const canGoBack = navigation.canGoBack()

src/view/screens/Notifications.tsx

@@ -21,6 +21,7 @@ import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {isWeb} from 'platform/detection'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
@@ -29,8 +30,8 @@ type Props = NativeStackScreenProps<
 export const NotificationsScreen = withAuthRequired(
   observer(function NotificationsScreenImpl({}: Props) {
     const store = useStores()
-    const [onMainScroll, isScrolledDown, resetMainScroll] =
+    const setMinimalShellMode = useSetMinimalShellMode()
-      useOnMainScroll(store)
+    const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
     const scrollElRef = React.useRef<FlatList>(null)
     const {screen} = useAnalytics()
     const pal = usePalette('default')
@@ -60,7 +61,7 @@ export const NotificationsScreen = withAuthRequired(
     // =
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         logger.debug('NotificationsScreen: Updating feed')
         const softResetSub = store.onScreenSoftReset(onPressLoadLatest)
         store.me.notifications.update()
@@ -70,7 +71,7 @@ export const NotificationsScreen = withAuthRequired(
           softResetSub.remove()
           store.me.notifications.markAllRead()
         }
-      }, [store, screen, onPressLoadLatest]),
+      }, [store, screen, onPressLoadLatest, setMinimalShellMode]),
     )
 
     useTabFocusEffect(

src/view/screens/PostLikedBy.tsx

@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
 export const PostLikedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/PostRepostedBy.tsx

@@ -5,19 +5,19 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
 export const PostRepostedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/PostThread.tsx

@@ -15,6 +15,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {clamp} from 'lodash'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {logger} from '#/logger'
+import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell'
 
 const SHELL_FOOTER_HEIGHT = 44
 
@@ -22,6 +23,8 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
 export const PostThreadScreen = withAuthRequired(
   observer(function PostThreadScreenImpl({route}: Props) {
     const store = useStores()
+    const minimalShellMode = useMinimalShellMode()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const safeAreaInsets = useSafeAreaInsets()
     const {name, rkey} = route.params
     const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -33,7 +36,7 @@ export const PostThreadScreen = withAuthRequired(
 
     useFocusEffect(
       React.useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         const threadCleanup = view.registerListeners()
 
         InteractionManager.runAfterInteractions(() => {
@@ -47,7 +50,7 @@ export const PostThreadScreen = withAuthRequired(
         return () => {
           threadCleanup()
         }
-      }, [store, view]),
+      }, [view, setMinimalShellMode]),
     )
 
     const onPressReply = React.useCallback(() => {
@@ -80,7 +83,7 @@ export const PostThreadScreen = withAuthRequired(
             treeView={!!store.preferences.thread.lab_treeViewEnabled}
           />
         </View>
-        {isMobile && !store.shell.minimalShellMode && (
+        {isMobile && !minimalShellMode && (
           <View
             style={[
               styles.prompt,

src/view/screens/PrivacyPolicy.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'>
 export const PrivacyPolicyScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/Profile.tsx

@@ -30,11 +30,13 @@ import {FeedSourceModel} from 'state/models/content/feed-source'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {combinedDisplayName} from 'lib/strings/display-names'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(
   observer(function ProfileScreenImpl({route}: Props) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {screen, track} = useAnalytics()
     const viewSelectorRef = React.useRef<ViewSelectorHandle>(null)
     const name = route.params.name === 'me' ? store.me.did : route.params.name
@@ -69,7 +71,7 @@ export const ProfileScreen = withAuthRequired(
       React.useCallback(() => {
         const softResetSub = store.onScreenSoftReset(onSoftReset)
         let aborted = false
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         const feedCleanup = uiState.feed.registerListeners()
         if (!hasSetup) {
           uiState.setup().then(() => {
@@ -84,7 +86,7 @@ export const ProfileScreen = withAuthRequired(
           feedCleanup()
           softResetSub.remove()
         }
-      }, [store, onSoftReset, uiState, hasSetup]),
+      }, [store, onSoftReset, uiState, hasSetup, setMinimalShellMode]),
     )
 
     // events

src/view/screens/ProfileFeedLikedBy.tsx

@@ -5,19 +5,19 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy'
-import {useStores} from 'state/index'
 import {makeRecordUri} from 'lib/strings/url-helpers'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeedLikedBy'>
 export const ProfileFeedLikedByScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileFollowers.tsx

@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
-import {useStores} from 'state/index'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
 export const ProfileFollowersScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileFollows.tsx

@@ -5,17 +5,17 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
-import {useStores} from 'state/index'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
 export const ProfileFollowsScreen = withAuthRequired(({route}: Props) => {
-  const store = useStores()
   const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/ProfileList.tsx

@@ -45,6 +45,7 @@ import {makeProfileLink, makeListLink} from 'lib/routes/links'
 import {ComposeIcon2} from 'lib/icons'
 import {ListItems} from 'view/com/lists/ListItems'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@@ -105,6 +106,7 @@ export const ProfileListScreenInner = observer(
     listOwnerDid,
   }: Props & {listOwnerDid: string}) {
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const {rkey} = route.params
     const feedSectionRef = React.useRef<SectionRef>(null)
     const aboutSectionRef = React.useRef<SectionRef>(null)
@@ -124,13 +126,13 @@ export const ProfileListScreenInner = observer(
 
     useFocusEffect(
       useCallback(() => {
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         list.loadMore(true).then(() => {
           if (list.isCuratelist) {
             feed.setup()
           }
         })
-      }, [store, list, feed]),
+      }, [setMinimalShellMode, list, feed]),
     )
 
     const onPressAddUser = useCallback(() => {

src/view/screens/SavedFeeds.tsx

@@ -27,6 +27,7 @@ import * as Toast from 'view/com/util/Toast'
 import {Haptics} from 'lib/haptics'
 import {TextLink} from 'view/com/util/Link'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 const HITSLOP_TOP = {
   top: 20,
@@ -48,6 +49,7 @@ export const SavedFeeds = withAuthRequired(
     const store = useStores()
     const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
     const {screen} = useAnalytics()
+    const setMinimalShellMode = useSetMinimalShellMode()
 
     const savedFeeds = useMemo(() => {
       const model = new SavedFeedsModel(store)
@@ -57,9 +59,9 @@ export const SavedFeeds = withAuthRequired(
     useFocusEffect(
       useCallback(() => {
         screen('SavedFeeds')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         savedFeeds.refresh()
-      }, [screen, store, savedFeeds]),
+      }, [screen, setMinimalShellMode, savedFeeds]),
     )
 
     return (

src/view/screens/SearchMobile.tsx

@@ -27,15 +27,18 @@ import {ProfileCard} from 'view/com/profile/ProfileCard'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {isAndroid, isIOS} from 'platform/detection'
+import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 
 type Props = NativeStackScreenProps<SearchTabNavigatorParams, 'Search'>
 export const SearchScreen = withAuthRequired(
   observer<Props>(function SearchScreenImpl({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
+    const setIsDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
     const scrollViewRef = React.useRef<ScrollView>(null)
     const flatListRef = React.useRef<FlatList>(null)
-    const [onMainScroll] = useOnMainScroll(store)
+    const [onMainScroll] = useOnMainScroll()
     const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
     const [query, setQuery] = React.useState<string>('')
     const autocompleteView = React.useMemo<UserAutocompleteModel>(
@@ -75,8 +78,8 @@ export const SearchScreen = withAuthRequired(
       setQuery('')
       autocompleteView.setActive(false)
       setSearchUIModel(undefined)
-      store.shell.setIsDrawerSwipeDisabled(false)
+      setIsDrawerSwipeDisabled(false)
-    }, [setQuery, autocompleteView, store])
+    }, [setQuery, autocompleteView, setIsDrawerSwipeDisabled])
 
     const onSubmitQuery = React.useCallback(() => {
       if (query.length === 0) {
@@ -86,8 +89,8 @@ export const SearchScreen = withAuthRequired(
       const model = new SearchUIModel(store)
       model.fetch(query)
       setSearchUIModel(model)
-      store.shell.setIsDrawerSwipeDisabled(true)
+      setIsDrawerSwipeDisabled(true)
-    }, [query, setSearchUIModel, store])
+    }, [query, setSearchUIModel, store, setIsDrawerSwipeDisabled])
 
     const onSoftReset = React.useCallback(() => {
       scrollViewRef.current?.scrollTo({x: 0, y: 0})
@@ -102,7 +105,7 @@ export const SearchScreen = withAuthRequired(
           softResetSub.remove()
         }
 
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
         autocompleteView.setup()
         if (!foafs.hasData) {
           foafs.fetch()
@@ -112,7 +115,14 @@ export const SearchScreen = withAuthRequired(
         }
 
         return cleanup
-      }, [store, autocompleteView, foafs, suggestedActors, onSoftReset]),
+      }, [
+        store,
+        autocompleteView,
+        foafs,
+        suggestedActors,
+        onSoftReset,
+        setMinimalShellMode,
+      ]),
     )
 
     const onPress = useCallback(() => {

src/view/screens/Settings.tsx

@@ -46,6 +46,7 @@ import Clipboard from '@react-native-clipboard/clipboard'
 import {makeProfileLink} from 'lib/routes/links'
 import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn'
 import {logger} from '#/logger'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 // TEMPORARY (APP-700)
 // remove after backend testing finishes
@@ -58,6 +59,7 @@ export const SettingsScreen = withAuthRequired(
   observer(function Settings({}: Props) {
     const pal = usePalette('default')
     const store = useStores()
+    const setMinimalShellMode = useSetMinimalShellMode()
     const navigation = useNavigation<NavigationProp>()
     const {isMobile} = useWebMediaQueries()
     const {screen, track} = useAnalytics()
@@ -88,8 +90,8 @@ export const SettingsScreen = withAuthRequired(
     useFocusEffect(
       React.useCallback(() => {
         screen('Settings')
-        store.shell.setMinimalShellMode(false)
+        setMinimalShellMode(false)
-      }, [screen, store]),
+      }, [screen, setMinimalShellMode]),
     )
 
     const onPressAddAccount = React.useCallback(() => {

src/view/screens/Support.tsx

@@ -3,23 +3,23 @@ import {View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {CenteredView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {HELP_DESK_URL} from 'lib/constants'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'>
 export const SupportScreen = (_props: Props) => {
-  const store = useStores()
   const pal = usePalette('default')
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/screens/TermsOfService.tsx

@@ -5,20 +5,20 @@ import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {ViewHeader} from '../com/util/ViewHeader'
-import {useStores} from 'state/index'
 import {ScrollView} from 'view/com/util/Views'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {useSetMinimalShellMode} from '#/state/shell'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'TermsOfService'>
 export const TermsOfServiceScreen = (_props: Props) => {
   const pal = usePalette('default')
-  const store = useStores()
+  const setMinimalShellMode = useSetMinimalShellMode()
 
   useFocusEffect(
     React.useCallback(() => {
-      store.shell.setMinimalShellMode(false)
+      setMinimalShellMode(false)
-    }, [store]),
+    }, [setMinimalShellMode]),
   )
 
   return (

src/view/shell/Drawer.tsx

@@ -43,11 +43,13 @@ import {NavigationProp} from 'lib/routes/types'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
 import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'
+import {useSetDrawerOpen} from '#/state/shell'
 
 export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
   const pal = usePalette('default')
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
@@ -62,7 +64,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
     (tab: string) => {
       track('Menu:ItemClicked', {url: tab})
       const state = navigation.getState()
-      store.shell.closeDrawer()
+      setDrawerOpen(false)
       if (isWeb) {
         // hack because we have flat navigator for web and MyProfile does not exist on the web navigator -ansh
         if (tab === 'MyProfile') {
@@ -83,7 +85,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
         }
       }
     },
-    [store, track, navigation],
+    [store, track, navigation, setDrawerOpen],
   )
 
   const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
@@ -110,20 +112,20 @@ export const DrawerContent = observer(function DrawerContentImpl() {
   const onPressLists = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Lists'})
     navigation.navigate('Lists')
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
-  }, [navigation, track, store.shell])
+  }, [navigation, track, setDrawerOpen])
 
   const onPressModeration = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Moderation'})
     navigation.navigate('Moderation')
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
-  }, [navigation, track, store.shell])
+  }, [navigation, track, setDrawerOpen])
 
   const onPressSettings = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Settings'})
     navigation.navigate('Settings')
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
-  }, [navigation, track, store.shell])
+  }, [navigation, track, setDrawerOpen])
 
   const onPressFeedback = React.useCallback(() => {
     track('Menu:FeedbackClicked')
@@ -437,13 +439,14 @@ const InviteCodes = observer(function InviteCodesImpl({
 }) {
   const {track} = useAnalytics()
   const store = useStores()
+  const setDrawerOpen = useSetDrawerOpen()
   const pal = usePalette('default')
   const {invitesAvailable} = store.me
   const onPress = React.useCallback(() => {
     track('Menu:ItemClicked', {url: '#invite-codes'})
-    store.shell.closeDrawer()
+    setDrawerOpen(false)
     store.shell.openModal({name: 'invite-codes'})
-  }, [store, track])
+  }, [store, track, setDrawerOpen])
   return (
     <TouchableOpacity
       testID="menuItemInviteCodes"

src/view/shell/bottom-bar/BottomBar.tsx

@@ -37,7 +37,7 @@ export const BottomBar = observer(function BottomBarImpl({
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
     useNavigationTabState()
 
-  const {footerMinimalShellTransform} = useMinimalShellMode()
+  const {minimalShellMode, footerMinimalShellTransform} = useMinimalShellMode()
   const {notifications} = store.me
 
   const onPressTab = React.useCallback(
@@ -83,7 +83,7 @@ export const BottomBar = observer(function BottomBarImpl({
         pal.border,
         {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
         footerMinimalShellTransform,
-        store.shell.minimalShellMode && styles.disabled,
+        minimalShellMode && styles.disabled,
       ]}>
       <Btn
         testID="bottomBarHomeBtn"

src/view/shell/index.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   useWindowDimensions,
   View,
+  BackHandler,
 } from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Drawer} from 'react-native-drawer-layout'
@@ -18,7 +19,6 @@ import {DrawerContent} from './Drawer'
 import {Composer} from './Composer'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
-import * as backHandler from 'lib/routes/back-handler'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
 import {
@@ -26,9 +26,18 @@ import {
   initialWindowMetrics,
 } from 'react-native-safe-area-context'
 import {useOTAUpdate} from 'lib/hooks/useOTAUpdate'
+import {
+  useIsDrawerOpen,
+  useSetDrawerOpen,
+  useIsDrawerSwipeDisabled,
+} from '#/state/shell'
+import {isAndroid} from 'platform/detection'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
+  const isDrawerOpen = useIsDrawerOpen()
+  const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
+  const setIsDrawerOpen = useSetDrawerOpen()
   useOTAUpdate() // this hook polls for OTA updates every few seconds
   const winDim = useWindowDimensions()
   const safeAreaInsets = useSafeAreaInsets()
@@ -38,20 +47,26 @@ const ShellInner = observer(function ShellInnerImpl() {
   )
   const renderDrawerContent = React.useCallback(() => <DrawerContent />, [])
   const onOpenDrawer = React.useCallback(
-    () => store.shell.openDrawer(),
+    () => setIsDrawerOpen(true),
-    [store],
+    [setIsDrawerOpen],
   )
   const onCloseDrawer = React.useCallback(
-    () => store.shell.closeDrawer(),
+    () => setIsDrawerOpen(false),
-    [store],
+    [setIsDrawerOpen],
   )
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   React.useEffect(() => {
-    const listener = backHandler.init(store)
+    let listener = {remove() {}}
-    return () => {
+    if (isAndroid) {
-      listener()
+      listener = BackHandler.addEventListener('hardwareBackPress', () => {
+        setIsDrawerOpen(false)
+        return store.shell.closeAnyActiveElement()
+      })
     }
-  }, [store])
+    return () => {
+      listener.remove()
+    }
+  }, [store, setIsDrawerOpen])
 
   return (
     <>
@@ -59,14 +74,12 @@ const ShellInner = observer(function ShellInnerImpl() {
         <ErrorBoundary>
           <Drawer
             renderDrawerContent={renderDrawerContent}
-            open={store.shell.isDrawerOpen}
+            open={isDrawerOpen}
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
             swipeEdgeWidth={winDim.width / 2}
             swipeEnabled={
-              !canGoBack &&
+              !canGoBack && store.session.hasSession && !isDrawerSwipeDisabled
-              store.session.hasSession &&
-              !store.shell.isDrawerSwipeDisabled
             }>
             <TabsNavigator />
           </Drawer>

src/view/shell/index.web.tsx

@@ -17,18 +17,22 @@ import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useAuxClick} from 'lib/hooks/useAuxClick'
+import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
+  const isDrawerOpen = useIsDrawerOpen()
+  const setDrawerOpen = useSetDrawerOpen()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
   useAuxClick()
 
   useEffect(() => {
     navigator.addListener('state', () => {
+      setDrawerOpen(false)
       store.shell.closeAnyActiveElement()
     })
-  }, [navigator, store.shell])
+  }, [navigator, store.shell, setDrawerOpen])
 
   const showBottomBar = isMobile && !store.onboarding.isActive
   const showSideNavs =
@@ -57,9 +61,9 @@ const ShellInner = observer(function ShellInnerImpl() {
       {showBottomBar && <BottomBarWeb />}
       <ModalsContainer />
       <Lightbox />
-      {!isDesktop && store.shell.isDrawerOpen && (
+      {!isDesktop && isDrawerOpen && (
         <TouchableOpacity
-          onPress={() => store.shell.closeDrawer()}
+          onPress={() => setDrawerOpen(false)}
           style={styles.drawerMask}
           accessibilityLabel="Close navigation footer"
           accessibilityHint="Closes bottom navigation bar">