WIP

Author: chrisnojima-zoom

shared/constants/types/router.tsx

@@ -16,7 +16,7 @@ export type ScreenProps<RouteName extends string = string> = {
 
 export type ScreenComponentProps = {
   route: {params: any}
-  navigation: NativeStackNavigationProp<ParamListBase, string>
+  navigation: NativeStackNavigationProp<ParamListBase>
 }
 // Properties consumed by our layout functions (not React Navigation)
 export type LayoutOptions = {

shared/router-v2/screen-layout.desktop.tsx

@@ -36,7 +36,7 @@ const ModalHeader = (props: ModalHeaderProps) => (
 const mouseResetValue = -9999
 const mouseDistanceThreshold = 5
 
-const useMouseClick = (navigation: NativeStackNavigationProp<KBRootParamList>, noClose?: boolean) => {
+const useMouseClick = (navigation: NativeStackNavigationProp<ParamListBase>, noClose?: boolean) => {
   const backgroundRef = React.useRef<HTMLDivElement>(null)
   // we keep track of mouse down/up to determine if we should call it a 'click'. We don't want dragging the
   // window around to count
@@ -71,7 +71,7 @@ const useMouseClick = (navigation: NativeStackNavigationProp<KBRootParamList>, n
 type ModalWrapperProps = {
   children: React.ReactNode
   navigationOptions?: GetOptionsRet
-  navigation: NativeStackNavigationProp<ParamListBase, string>
+  navigation: NativeStackNavigationProp<ParamListBase>
 }
 
 const ModalWrapper = (p: ModalWrapperProps) => {

shared/teams/container.tsx

@@ -2,11 +2,13 @@ import * as C from '@/constants'
 import * as Teams from '@/stores/teams'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
-import type {RouteProps2} from '@/router-v2/route-params'
+import type {RootParamList} from '@/router-v2/route-params'
 import Main from './main'
 import {useTeamsSubscribe} from './subscriber'
 import {useActivityLevels} from './common'
 import {useSafeNavigation} from '@/util/safe-navigation'
+import {useNavigation} from '@react-navigation/native'
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 
 const orderTeams = (
   teams: ReadonlyMap<string, T.Teams.TeamMeta>,
@@ -43,11 +45,12 @@ const orderTeams = (
   })
 }
 
-type Props = RouteProps2<'teamsRoot'>
+type Props = {
+  filter?: string
+  sort?: T.Teams.TeamListSort
+}
 
-const Connected = ({navigation, route}: Props) => {
-  const filter = route.params?.filter ?? ''
-  const sort = route.params?.sort ?? 'role'
+const Connected = ({filter = '', sort = 'role'}: Props) => {
   const data = Teams.useTeamsState(
     C.useShallow(s => {
       const {deletedTeams, activityLevels, teamMeta, dispatch} = s
@@ -77,6 +80,7 @@ const Connected = ({navigation, route}: Props) => {
   useActivityLevels(true)
 
   const nav = useSafeNavigation()
+  const navigation = useNavigation<NativeStackNavigationProp<RootParamList, 'teamsRoot'>>()
   const onCreateTeam = () => launchNewTeamWizardOrModal()
   const onJoinTeam = () => nav.safeNavigateAppend('teamJoinTeamDialog')
 
@@ -86,7 +90,7 @@ const Connected = ({navigation, route}: Props) => {
         onCreateTeam={onCreateTeam}
         onJoinTeam={onJoinTeam}
         deletedTeams={deletedTeams}
-        onChangeSort={sortOrder => navigation.setParams({...(route.params ?? {}), filter, sort: sortOrder})}
+        onChangeSort={sortOrder => navigation.setParams({filter, sort: sortOrder})}
         sortOrder={sort}
         teams={teams}
       />

shared/teams/routes.tsx

@@ -209,10 +209,9 @@ export const newRoutes = {
     React.lazy(async () => import('./team/member/index.new')),
     {getOptions: {headerShadowVisible: false, headerTitle: ''}}
   ),
-  teamsRoot: {
+  teamsRoot: C.makeScreen(React.lazy(async () => import('./container')), {
     getOptions: teamsRootGetOptions,
-    screen: React.lazy(async () => import('./container')),
-  },
+  }),
 }
 
 export const newModalRoutes = {