WIP

Author: chrisnojima-zoom

shared/chat/inbox-and-conversation-header.tsx

@@ -5,13 +5,16 @@ import type {StyleOverride} from '@/common-adapters/markdown'
 import SearchRow from './inbox/search-row'
 import NewChatButton from './inbox/new-chat-button'
 import {useRoute} from '@react-navigation/native'
-import type {RootRouteProps} from '@/router-v2/route-params'
+import type {RouteProp} from '@react-navigation/native'
+import {getRouteParamsFromRoute} from '@/router-v2/route-params'
+import type {RootParamList} from '@/router-v2/route-params'
 import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import * as Teams from '@/stores/teams'
 
 const Header = () => {
-  const {params} = useRoute<RootRouteProps<'chatRoot'>>()
+  const route = useRoute<RouteProp<RootParamList, 'chatRoot'>>()
+  const params = getRouteParamsFromRoute<'chatRoot'>(route)
   return (
     <Chat.ChatProvider
       canBeNull={true}
@@ -26,7 +29,8 @@ const Header = () => {
 }
 
 const Header2 = () => {
-  const {params} = useRoute<RootRouteProps<'chatRoot'>>()
+  const route = useRoute<RouteProp<RootParamList, 'chatRoot'>>()
+  const params = getRouteParamsFromRoute<'chatRoot'>(route)
   const username = useCurrentUserState(s => s.username)
   const infoPanelShowing = !!params?.infoPanel
   const data = Chat.useChatContext(

shared/constants/init/index.native.tsx

@@ -275,7 +275,7 @@ export const initPlatformListener = () => {
           routeName = cur
         }
         const ap = getVisiblePath()
-        ap.some(r => {
+        ap.some((r: ReturnType<typeof getVisiblePath>[number]) => {
           if (r.name === 'chatConversation') {
             const rParams = r.params as undefined | {conversationIDKey?: T.Chat.ConversationIDKey}
             param = {selectedConversationIDKey: rParams?.conversationIDKey}

shared/constants/router.tsx

@@ -124,7 +124,7 @@ export const getModalStack = (navState?: T.Immutable<NavState>) => {
   if (!_isLoggedIn(rs)) {
     return []
   }
-  return (rs.routes?.slice(1) ?? []).filter(r => !rootNonModalRouteNames.has(r.name))
+  return (rs.routes?.slice(1) ?? []).filter((r: Route) => !rootNonModalRouteNames.has(r.name))
 }
 
 export const getVisibleScreen = (navState?: T.Immutable<NavState>, _inludeModals?: boolean) => {
@@ -184,7 +184,7 @@ export const clearModals = () => {
   }
   const rootRoutes = ns?.routes ?? []
   const keepRoutes = rootRoutes.filter(
-    (route, index) => index === 0 || rootNonModalRouteNames.has(route.name)
+    (route: Route, index: number) => index === 0 || rootNonModalRouteNames.has(route.name)
   )
   if (keepRoutes.length !== rootRoutes.length) {
     n.dispatch({

shared/constants/types/router.tsx

@@ -1,23 +1,22 @@
 import type * as Styles from '@/styles'
-import type {RootParamList as KBRootParamList} from '@/router-v2/route-params'
 import type {NativeStackNavigationProp, NativeStackNavigationOptions} from '@react-navigation/native-stack'
-import type {RouteProp} from '@react-navigation/native'
+import type {ParamListBase, RouteProp} from '@react-navigation/native'
 import type {HeaderBackButtonProps} from '@react-navigation/elements'
 
-export type GetOptionsParams<RouteName extends keyof KBRootParamList = keyof KBRootParamList> = {
-  navigation: NativeStackNavigationProp<KBRootParamList, RouteName>
-  route: RouteProp<KBRootParamList, RouteName>
+export type GetOptionsParams<RouteName extends string = string> = {
+  navigation: NativeStackNavigationProp<ParamListBase, RouteName>
+  route: RouteProp<ParamListBase, RouteName>
 }
 
 // Type for screen components that receive navigation props
-export type ScreenProps<RouteName extends keyof KBRootParamList = keyof KBRootParamList> = {
-  navigation: NativeStackNavigationProp<KBRootParamList, RouteName>
-  route: RouteProp<KBRootParamList, RouteName>
+export type ScreenProps<RouteName extends string = string> = {
+  navigation: NativeStackNavigationProp<ParamListBase, RouteName>
+  route: RouteProp<ParamListBase, RouteName>
 }
 
 export type ScreenComponentProps = {
   route: {params: any}
-  navigation: NativeStackNavigationProp<KBRootParamList>
+  navigation: NativeStackNavigationProp<ParamListBase, string>
 }
 // Properties consumed by our layout functions (not React Navigation)
 export type LayoutOptions = {

shared/router-v2/common.native.tsx

@@ -87,7 +87,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
 
 export const useSubnavTabAction = (navigation: NavigationContainerRef<object>, state: NavState) => {
   const onSelectTab = (tab: string) => {
-    const route = state?.routes?.find(r => r.name === tab)
+    const route = state?.routes?.find((r: NonNullable<NavState['routes']>[number]) => r.name === tab)
     const event = route
       ? navigation.emit({
           canPreventDefault: true,

shared/router-v2/routes.tsx

@@ -14,7 +14,6 @@ import {newModalRoutes as incomingShareNewModalRoutes} from '../incoming-share/r
 import type * as React from 'react'
 import * as Tabs from '@/constants/tabs'
 import type {GetOptions, GetOptionsParams, GetOptionsRet, RouteDef, RouteMap} from '@/constants/types/router'
-import type {RootParamList as KBRootParamList} from '@/router-v2/route-params'
 import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
 
 // We have normal routes, modal routes, and logged out routes.
@@ -165,12 +164,12 @@ export function routeMapToScreenElements(
   isLoggedOut: boolean,
   isTabScreen: boolean
 ) {
-  return (Object.keys(rs) as Array<keyof KBRootParamList>).flatMap(name => {
-    const rd = rs[name as string]
+  return Object.keys(rs).flatMap(name => {
+    const rd = rs[name]
     if (!rd) return []
     return [
       <Screen
-        key={String(name)}
+        key={name}
         name={name}
         component={rd.screen}
         layout={makeLayoutFn(isModal, isLoggedOut, isTabScreen, rd.getOptions)}

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

@@ -2,7 +2,7 @@ import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as C from '@/constants'
 import type {GetOptions, GetOptionsParams, GetOptionsRet} from '@/constants/types/router'
-import type {RootParamList as KBRootParamList} from '@/router-v2/route-params'
+import type {ParamListBase} from '@react-navigation/native'
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 
 type ModalHeaderProps = {
@@ -71,7 +71,7 @@ const useMouseClick = (navigation: NativeStackNavigationProp<KBRootParamList>, n
 type ModalWrapperProps = {
   children: React.ReactNode
   navigationOptions?: GetOptionsRet
-  navigation: NativeStackNavigationProp<KBRootParamList>
+  navigation: NativeStackNavigationProp<ParamListBase, string>
 }
 
 const ModalWrapper = (p: ModalWrapperProps) => {

shared/teams/get-options.tsx

@@ -3,7 +3,9 @@ import {HeaderRightActions} from './main/header'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {useTeamsState} from '@/stores/teams'
 import {useNavigation, useRoute} from '@react-navigation/native'
-import type {RootParamList, RootRouteProps} from '@/router-v2/route-params'
+import type {RouteProp} from '@react-navigation/native'
+import type {RootParamList} from '@/router-v2/route-params'
+import {getRouteParamsFromRoute} from '@/router-v2/route-params'
 import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 
 const useHeaderActions = () => {
@@ -16,7 +18,8 @@ const useHeaderActions = () => {
 }
 
 const TeamsFilter = () => {
-  const params = useRoute<RootRouteProps<'teamsRoot'>>().params ?? {}
+  const route = useRoute<RouteProp<RootParamList, 'teamsRoot'>>()
+  const params = getRouteParamsFromRoute<'teamsRoot'>(route) ?? {}
   const navigation = useNavigation<NativeStackNavigationProp<RootParamList, 'teamsRoot'>>()
   const filterValue = params.filter ?? ''
   const numTeams = useTeamsState(s => s.teamMeta.size)