Get home screen's swipable pager working with the drawer

src/App.native.tsx

@@ -4,8 +4,10 @@ import {Linking} from 'react-native'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import SplashScreen from 'react-native-splash-screen'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {observer} from 'mobx-react-lite'
 import {ThemeProvider} from 'lib/ThemeContext'
+import {s} from 'lib/styles'
 import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell'
@@ -51,9 +53,11 @@ const App = observer(() => {
       <RootSiblingParent>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
-            <SafeAreaProvider>
-              <Shell />
-            </SafeAreaProvider>
+            <GestureHandlerRootView style={s.h100pct}>
+              <SafeAreaProvider>
+                <Shell />
+              </SafeAreaProvider>
+            </GestureHandlerRootView>
           </RootStoreProvider>
         </analytics.Provider>
       </RootSiblingParent>

src/lib/api/feed-manip.ts

@@ -140,7 +140,8 @@ export class FeedTuner {
       for (const item of slice.items) {
         this.seenUris.add(item.post.uri)
       }
-      slice.logSelf()
+      // DEBUG uncomment to get a quick view of the data
+      // slice.logSelf()
     }
 
     return slices

src/state/models/ui/shell.ts

@@ -122,6 +122,7 @@ export class ShellUiModel {
   darkMode = false
   minimalShellMode = false
   isDrawerOpen = false
+  isDrawerSwipeDisabled = false
   isModalActive = false
   activeModals: Modal[] = []
   isLightboxActive = false
@@ -168,6 +169,10 @@ export class ShellUiModel {
     this.isDrawerOpen = false
   }
 
+  setIsDrawerSwipeDisabled(v: boolean) {
+    this.isDrawerSwipeDisabled = v
+  }
+
   openModal(modal: Modal) {
     this.rootStore.emitNavigation()
     this.isModalActive = true

src/view/screens/Home.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, View} from 'react-native'
+import {FlatList, StyleSheet, View, useWindowDimensions} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
@@ -9,15 +9,73 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/posts/Feed'
 import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
 import {WelcomeBanner} from '../com/util/WelcomeBanner'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 import {FAB} from '../com/util/FAB'
 import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
 
+import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
+import {Text} from 'view/com/util/text/Text'
+
 const HEADER_HEIGHT = 42
 
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
+export const HomeScreen = withAuthRequired((_opts: Props) => {
+  const store = useStores()
+  const onPageSelected = React.useCallback(
+    (e: PagerViewOnPageSelectedEvent) => {
+      store.shell.setIsDrawerSwipeDisabled(e.nativeEvent.position > 0)
+    },
+    [store],
+  )
+
+  useFocusEffect(
+    React.useCallback(() => {
+      return () => {
+        store.shell.setIsDrawerSwipeDisabled(false)
+      }
+    }, [store]),
+  )
+
+  return (
+    <PagerView
+      style={{height: '100%'}}
+      initialPage={0}
+      onPageSelected={onPageSelected}>
+      <View key="1">
+        <MyPage>First page</MyPage>
+      </View>
+      <View key="2">
+        <MyPage>Second page</MyPage>
+      </View>
+    </PagerView>
+  )
+})
+function MyPage({children}) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        backgroundColor: 'white',
+      }}>
+      <Text>{children}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flexDirection: 'row',
+  },
+})
+/*
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export const HomeScreen = withAuthRequired(
   observer(function Home(_opts: Props) {
@@ -113,3 +171,4 @@ export const HomeScreen = withAuthRequired(
     )
   }),
 )
+*/

src/view/shell/index.tsx

@@ -46,7 +46,11 @@ const ShellInner = observer(() => {
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
             swipeEdgeWidth={winDim.width}
-            swipeEnabled={!canGoBack && store.session.hasSession}>
+            swipeEnabled={
+              !canGoBack &&
+              store.session.hasSession &&
+              !store.shell.isDrawerSwipeDisabled
+            }>
             <TabsNavigator />
           </Drawer>
         </ErrorBoundary>