[Perf] Drawer gesture perf fix + related cleanup (#8953)

* split drawer layout into own component

* don't put props in dep array

* memoize pager view

src/view/com/home/HomeHeader.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
-import {FeedSourceInfo} from '#/state/queries/feed'
+import {type NavigationProp} from '#/lib/routes/types'
+import {type FeedSourceInfo} from '#/state/queries/feed'
 import {useSession} from '#/state/session'
-import {RenderTabBarFnProps} from '#/view/com/pager/Pager'
+import {type RenderTabBarFnProps} from '#/view/com/pager/Pager'
 import {TabBar} from '../pager/TabBar'
 import {HomeHeaderLayout} from './HomeHeaderLayout'
 
@@ -15,7 +15,7 @@ export function HomeHeader(
     feeds: FeedSourceInfo[]
   },
 ) {
-  const {feeds} = props
+  const {feeds, onSelect: onSelectProp} = props
   const {hasSession} = useSession()
   const navigation = useNavigation<NavigationProp>()
 
@@ -43,11 +43,11 @@ export function HomeHeader(
     (index: number) => {
       if (!hasPinnedCustom && index === items.length - 1) {
         onPressFeedsLink()
-      } else if (props.onSelect) {
-        props.onSelect(index)
+      } else if (onSelectProp) {
+        onSelectProp(index)
       }
     },
-    [items.length, onPressFeedsLink, props, hasPinnedCustom],
+    [items.length, onPressFeedsLink, onSelectProp, hasPinnedCustom],
   )
 
   return (

src/view/com/pager/Pager.tsx

@@ -1,7 +1,9 @@
 import {
+  memo,
   useCallback,
   useContext,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -56,6 +58,7 @@ interface Props {
 }
 
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
+const MemoizedAnimatedPagerView = memo(AnimatedPagerView)
 
 export function Pager({
   ref,
@@ -139,10 +142,6 @@ export function Pager({
     [parentOnPageScrollStateChanged],
   )
 
-  const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
-  const nativeGesture =
-    Gesture.Native().requireExternalGestureToFail(drawerGesture)
-
   return (
     <View testID={testID} style={[a.flex_1, native(a.overflow_hidden)]}>
       {renderTabBar({
@@ -151,19 +150,33 @@ export function Pager({
         dragProgress,
         dragState,
       })}
-      <GestureDetector gesture={nativeGesture}>
-        <AnimatedPagerView
+      <DrawerGestureRequireFail>
+        <MemoizedAnimatedPagerView
           ref={pagerView}
-          style={[a.flex_1]}
+          style={a.flex_1}
           initialPage={initialPage}
           onPageScroll={handlePageScroll}>
           {children}
-        </AnimatedPagerView>
-      </GestureDetector>
+        </MemoizedAnimatedPagerView>
+      </DrawerGestureRequireFail>
     </View>
   )
 }
 
+function DrawerGestureRequireFail({children}: {children: React.ReactNode}) {
+  const drawerGesture = useContext(DrawerGestureContext)
+
+  const nativeGesture = useMemo(() => {
+    const gesture = Gesture.Native()
+    if (drawerGesture) {
+      gesture.requireExternalGestureToFail(drawerGesture)
+    }
+    return gesture
+  }, [drawerGesture])
+
+  return <GestureDetector gesture={nativeGesture}>{children}</GestureDetector>
+}
+
 function usePagerHandlers(
   handlers: {
     onPageScroll: (e: PagerViewOnPageScrollEventData) => void