Move feeds screen into common navigator, handle usages

src/Navigation.tsx

@@ -22,7 +22,6 @@ import {buildStateObject} from 'lib/routes/helpers'
 import {
   AllNavigatorParams,
   BottomTabNavigatorParams,
-  FeedsTabNavigatorParams,
   FlatNavigatorParams,
   HomeTabNavigatorParams,
   MessagesTabNavigatorParams,
@@ -91,7 +90,6 @@ const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
 const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>()
 const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>()
-const FeedsTab = createNativeStackNavigatorWithAuth<FeedsTabNavigatorParams>()
 const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
@@ -306,6 +304,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => MessagesSettingsScreen}
         options={{title: title(msg`Chat settings`), requireAuth: true}}
       />
+      <Stack.Screen name="Feeds" getComponent={() => FeedsScreen} />
     </>
   )
 }
@@ -330,7 +329,6 @@ function TabsNavigator() {
       tabBar={tabBar}>
       <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
       <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
-      <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} />
       <Tab.Screen
         name="NotificationsTab"
         getComponent={() => NotificationsTabNavigator}
@@ -384,24 +382,6 @@ function SearchTabNavigator() {
   )
 }
 
-function FeedsTabNavigator() {
-  const pal = usePalette('default')
-  return (
-    <FeedsTab.Navigator
-      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
-        animationDuration: 285,
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-        contentStyle: pal.view,
-      }}>
-      <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} />
-      {commonScreens(FeedsTab as typeof HomeTab)}
-    </FeedsTab.Navigator>
-  )
-}
-
 function NotificationsTabNavigator() {
   const pal = usePalette('default')
   return (
@@ -505,11 +485,6 @@ const FlatNavigator = () => {
         getComponent={() => SearchScreen}
         options={{title: title(msg`Search`)}}
       />
-      <Flat.Screen
-        name="Feeds"
-        getComponent={() => FeedsScreen}
-        options={{title: title(msg`Feeds`)}}
-      />
       <Flat.Screen
         name="Notifications"
         getComponent={() => NotificationsScreen}

src/lib/routes/types.ts

@@ -40,12 +40,12 @@ export type CommonNavigatorParams = {
   Hashtag: {tag: string; author?: string}
   MessagesConversation: {conversation: string; embed?: string}
   MessagesSettings: undefined
+  Feeds: undefined
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {
   HomeTab: undefined
   SearchTab: undefined
-  FeedsTab: undefined
   NotificationsTab: undefined
   MyProfileTab: undefined
   MessagesTab: undefined
@@ -59,10 +59,6 @@ export type SearchTabNavigatorParams = CommonNavigatorParams & {
   Search: {q?: string}
 }
 
-export type FeedsTabNavigatorParams = CommonNavigatorParams & {
-  Feeds: undefined
-}
-
 export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
   Notifications: undefined
 }
@@ -89,7 +85,6 @@ export type AllNavigatorParams = CommonNavigatorParams & {
   Home: undefined
   SearchTab: undefined
   Search: {q?: string}
-  FeedsTab: undefined
   Feeds: undefined
   NotificationsTab: undefined
   Notifications: undefined

src/screens/Home/NoFeedsPinned.tsx

@@ -3,13 +3,10 @@ import {View} from 'react-native'
 import {TID} from '@atproto/common-web'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
 import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
-import {isNative} from '#/platform/detection'
 import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
 import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
-import {NavigationProp} from 'lib/routes/types'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -26,7 +23,6 @@ export function NoFeedsPinned({
 }) {
   const {_} = useLingui()
   const headerOffset = useHeaderOffset()
-  const navigation = useNavigation<NavigationProp>()
   const {isPending, mutateAsync: overwriteSavedFeeds} =
     useOverwriteSavedFeedsMutation()
 
@@ -66,15 +62,6 @@ export function NoFeedsPinned({
     await overwriteSavedFeeds(toSave)
   }, [overwriteSavedFeeds, preferences.savedFeeds])
 
-  const onPressFeedsLink = React.useCallback(() => {
-    if (isNative) {
-      // Hack that's necessary due to how our navigators are set up.
-      navigation.navigate('FeedsTab')
-      navigation.popToTop()
-      return false
-    }
-  }, [navigation])
-
   return (
     <CenteredView sideBorders style={[a.h_full_vh]}>
       <View
@@ -115,7 +102,6 @@ export function NoFeedsPinned({
           <Link
             label={_(msg`Browse other feeds`)}
             to="/feeds"
-            onPress={onPressFeedsLink}
             size="medium"
             variant="solid"
             color="secondary">

src/view/com/home/HomeHeader.tsx

@@ -5,7 +5,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {FeedSourceInfo} from '#/state/queries/feed'
 import {useSession} from '#/state/session'
 import {NavigationProp} from 'lib/routes/types'
-import {isWeb} from 'platform/detection'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {TabBar} from '../pager/TabBar'
 import {HomeHeaderLayout} from './HomeHeaderLayout'
@@ -39,12 +38,7 @@ export function HomeHeader(
   }, [hasPinnedCustom, feeds])
 
   const onPressFeedsLink = React.useCallback(() => {
-    if (isWeb) {
+    navigation.navigate('Feeds')
-      navigation.navigate('Feeds')
-    } else {
-      navigation.navigate('FeedsTab')
-      navigation.popToTop()
-    }
   }, [navigation])
 
   const onSelect = React.useCallback(

src/view/com/posts/FollowingEmptyState.tsx

@@ -1,18 +1,19 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {Text} from '../util/text/Text'
+import {Trans} from '@lingui/macro'
-import {Button} from '../util/forms/Button'
+import {useNavigation} from '@react-navigation/native'
+
+import {usePalette} from 'lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from 'lib/icons'
 import {NavigationProp} from 'lib/routes/types'
-import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
-import {Trans} from '@lingui/macro'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
 
 export function FollowingEmptyState() {
   const pal = usePalette('default')
@@ -29,12 +30,7 @@ export function FollowingEmptyState() {
   }, [navigation])
 
   const onPressDiscoverFeeds = React.useCallback(() => {
-    if (isWeb) {
+    navigation.navigate('Feeds')
-      navigation.navigate('Feeds')
-    } else {
-      navigation.navigate('FeedsTab')
-      navigation.popToTop()
-    }
   }, [navigation])
 
   return (

src/view/com/posts/FollowingEndOfFeed.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
-import {StyleSheet, View, Dimensions} from 'react-native'
+import {Dimensions, StyleSheet, View} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {Text} from '../util/text/Text'
+import {Trans} from '@lingui/macro'
-import {Button} from '../util/forms/Button'
+import {useNavigation} from '@react-navigation/native'
-import {NavigationProp} from 'lib/routes/types'
+
 import {usePalette} from 'lib/hooks/usePalette'
+import {NavigationProp} from 'lib/routes/types'
 import {s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
-import {Trans} from '@lingui/macro'
+import {Button} from '../util/forms/Button'
+import {Text} from '../util/text/Text'
 
 export function FollowingEndOfFeed() {
   const pal = usePalette('default')
@@ -28,12 +29,7 @@ export function FollowingEndOfFeed() {
   }, [navigation])
 
   const onPressDiscoverFeeds = React.useCallback(() => {
-    if (isWeb) {
+    navigation.navigate('Feeds')
-      navigation.navigate('Feeds')
-    } else {
-      navigation.navigate('FeedsTab')
-      navigation.popToTop()
-    }
   }, [navigation])
 
   return (

src/view/com/testing/TestCtrls.e2e.tsx

@@ -90,7 +90,7 @@ export function TestCtrls() {
       />
       <Pressable
         testID="e2eGotoFeeds"
-        onPress={() => navigate('FeedsTab')}
+        onPress={() => navigate('Feeds')}
         accessibilityRole="button"
         style={BTN}
       />

src/view/screens/Feeds.tsx

@@ -29,7 +29,7 @@ import {HITSLOP_10} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons'
-import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
+import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {cleanError} from 'lib/strings/errors'
 import {s} from 'lib/styles'
 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
@@ -54,7 +54,7 @@ import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/Li
 import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
 import hairlineWidth = StyleSheet.hairlineWidth
 
-type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'>
 
 type FlatlistSlice =
   | {
@@ -594,7 +594,6 @@ export function FeedsScreen(_props: Props) {
       {isMobile && (
         <ViewHeader
           title={_(msg`Feeds`)}
-          canGoBack={false}
           renderButton={renderHeaderBtn}
           showBorder
         />

src/view/shell/Drawer.tsx

@@ -186,10 +186,11 @@ let DrawerContent = ({}: {}): React.ReactNode => {
     onPressTab('MyProfile')
   }, [onPressTab])
 
-  const onPressMyFeeds = React.useCallback(
+  const onPressMyFeeds = React.useCallback(() => {
-    () => onPressTab('Feeds'),
+    track('Menu:ItemClicked', {url: 'Feeds'})
-    [onPressTab],
+    navigation.navigate('Feeds')
-  )
+    setDrawerOpen(false)
+  }, [navigation, setDrawerOpen, track])
 
   const onPressLists = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Lists'})