split drawer layout into own component

src/state/shell/drawer-open.tsx

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

src/view/shell/index.tsx

@@ -45,25 +45,10 @@ import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
-  const t = useTheme()
-  const isDrawerOpen = useIsDrawerOpen()
-  const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
-  const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
   const insets = useSafeAreaInsets()
   const {state: policyUpdateState} = usePolicyUpdateContext()
 
-  const renderDrawerContent = useCallback(() => <DrawerContent />, [])
-  const onOpenDrawer = useCallback(
-    () => setIsDrawerOpen(true),
-    [setIsDrawerOpen],
-  )
-  const onCloseDrawer = useCallback(
-    () => setIsDrawerOpen(false),
-    [setIsDrawerOpen],
-  )
-  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
-  const {hasSession} = useSession()
   const closeAnyActiveElement = useCloseAnyActiveElement()
 
   useNotificationsRegistration()
@@ -102,20 +87,69 @@ function ShellInner() {
     }
   }, [dedupe, navigation])
 
-  const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled
-  const [trendingScrollGesture] = useState(() => Gesture.Native())
   return (
     <>
       <View style={[a.h_full]}>
         <ErrorBoundary
           style={{paddingTop: insets.top, paddingBottom: insets.bottom}}>
+          <DrawerLayout>
+            <TabsNavigator />
+          </DrawerLayout>
+        </ErrorBoundary>
+      </View>
+
+      <Composer winHeight={winDim.height} />
+      <ModalsContainer />
+      <MutedWordsDialog />
+      <SigninDialog />
+      <EmailDialog />
+      <AgeAssuranceRedirectDialog />
+      <InAppBrowserConsentDialog />
+      <LinkWarningDialog />
+      <Lightbox />
+
+      {/* Until policy update has been completed by the user, don't render anything that is portaled */}
+      {policyUpdateState.completed && (
+        <>
+          <PortalOutlet />
+          <BottomSheetOutlet />
+        </>
+      )}
+
+      <PolicyUpdateOverlayPortalOutlet />
+    </>
+  )
+}
+
+function DrawerLayout({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const isDrawerOpen = useIsDrawerOpen()
+  const setIsDrawerOpen = useSetDrawerOpen()
+  const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
+  const winDim = useWindowDimensions()
+
+  const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
+  const {hasSession} = useSession()
+
+  const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled
+  const [trendingScrollGesture] = useState(() => Gesture.Native())
+
+  const renderDrawerContent = useCallback(() => <DrawerContent />, [])
+  const onOpenDrawer = useCallback(
+    () => setIsDrawerOpen(true),
+    [setIsDrawerOpen],
+  )
+  const onCloseDrawer = useCallback(
+    () => setIsDrawerOpen(false),
+    [setIsDrawerOpen],
+  )
+
+  return (
     <Drawer
       renderDrawerContent={renderDrawerContent}
       drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
       configureGestureHandler={handler => {
-              handler = handler.requireExternalGestureToFail(
+        handler = handler.requireExternalGestureToFail(trendingScrollGesture)
-                trendingScrollGesture,
-              )
 
         if (swipeEnabled) {
           if (isDrawerOpen) {
@@ -148,37 +182,12 @@ function ShellInner() {
       overlayStyle={{
         backgroundColor: select(t.name, {
           light: 'rgba(0, 57, 117, 0.1)',
-                dark: isAndroid
+          dark: isAndroid ? 'rgba(16, 133, 254, 0.1)' : 'rgba(1, 82, 168, 0.1)',
-                  ? 'rgba(16, 133, 254, 0.1)'
-                  : 'rgba(1, 82, 168, 0.1)',
           dim: 'rgba(10, 13, 16, 0.8)',
         }),
       }}>
-            <TabsNavigator />
+      {children}
     </Drawer>
-        </ErrorBoundary>
-      </View>
-
-      <Composer winHeight={winDim.height} />
-      <ModalsContainer />
-      <MutedWordsDialog />
-      <SigninDialog />
-      <EmailDialog />
-      <AgeAssuranceRedirectDialog />
-      <InAppBrowserConsentDialog />
-      <LinkWarningDialog />
-      <Lightbox />
-
-      {/* Until policy update has been completed by the user, don't render anything that is portaled */}
-      {policyUpdateState.completed && (
-        <>
-          <PortalOutlet />
-          <BottomSheetOutlet />
-        </>
-      )}
-
-      <PolicyUpdateOverlayPortalOutlet />
-    </>
   )
 }