replace unsafe useNavigation casts with typed hook

shared/devices/index.tsx

@@ -8,10 +8,7 @@ import {intersect} from '@/util/set'
 import {useLocalBadging} from '@/util/use-local-badging'
 import {useModalHeaderState} from '@/stores/modal-header'
 import {HeaderTitle} from './nav-header'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
-
-type DevicesRootParamList = {devicesRoot: undefined}
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 const sortDevices = (a: T.Devices.Device, b: T.Devices.Device) => {
   if (a.currentDevice) return -1
@@ -45,7 +42,7 @@ const splitAndSortDevices = (devices: ReadonlyArray<T.Devices.Device>) =>
 const itemHeight = {height: 48, type: 'fixed'} as const
 
 function ReloadableDevices() {
-  const navigation = useNavigation() as unknown as NativeStackNavigationProp<DevicesRootParamList, 'devicesRoot'>
+  const navigation = useTypedNavigation('devicesRoot')
   const [devices, setDevices] = React.useState<Array<T.Devices.Device>>([])
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyDevices)
   const loadDevicesRPC = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise)

shared/settings/account/index.tsx

@@ -6,12 +6,12 @@ import EmailPhoneRow from './email-phone-row'
 import logger from '@/logger'
 import {openURL} from '@/util/misc'
 import {loadSettings} from '../load-settings'
-import {useNavigation, type NavigationProp} from '@react-navigation/native'
+import {useTypedNavigation} from '@/util/typed-navigation'
 import {useIsFocused} from '@react-navigation/core'
 import {useConfigState} from '@/stores/config'
 import {makePhoneError, useSettingsPhoneState} from '@/stores/settings-phone'
 import {useSettingsEmailState} from '@/stores/settings-email'
-import {type settingsAccountTab, settingsPasswordTab} from '@/constants/settings'
+import {settingsPasswordTab} from '@/constants/settings'
 import type {SettingsAccountRouteParams} from '../routes'
 import {useRandomPWState} from '../use-random-pw'
 
@@ -183,10 +183,7 @@ type AddedBannerState = {
 const AccountSettings = ({route}: Props) => {
   const addedEmailFromRoute = route.params?.addedEmailBannerEmail
   const addedPhoneFromRoute = !!route.params?.addedPhoneBanner
-  const navigation = useNavigation() as NavigationProp<
-    Record<typeof settingsAccountTab, SettingsAccountRouteParams | undefined>,
-    typeof settingsAccountTab
-  >
+  const navigation = useTypedNavigation('settingsTabs.accountTab')
   const isFocused = useIsFocused()
   const emails = useSettingsEmailState(s => s.emails)
   const phones = useSettingsPhoneState(s => s.phones)

shared/teams/add-members-wizard/confirm.tsx

@@ -15,8 +15,7 @@ import {useSafeNavigation} from '@/util/safe-navigation'
 import {createNewTeamFromWizard} from '../new-team/wizard/state'
 import {onTeamCreated} from '../create-team-effects'
 import {RPCError} from '@/util/errors'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 import {useLoadedTeam} from '../team/use-loaded-team'
 import {
   removeWizardMember,
@@ -37,13 +36,8 @@ const disabledRolesSubteam = {
   owner: 'Subteams cannot have owners.',
 }
 
-type TeamAddToTeamConfirmParamList = {
-  teamAddToTeamConfirm: {wizard: AddMembersWizard}
-}
-
 const AddMembersConfirm = ({wizard: initialWizard}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamAddToTeamConfirmParamList, 'teamAddToTeamConfirm'>
+  const navigation = useTypedNavigation('teamAddToTeamConfirm')
   const [wizardState, setWizardState] = React.useState(() => ({
     initialWizard,
     wizard: initialWizard,

shared/teams/container.tsx

@@ -8,15 +8,7 @@ import {ActivityLevelsProvider, useActivityLevels} from './common'
 import {useTeamsList} from './use-teams-list'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {makeNewTeamWizard} from './new-team/wizard/state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
-
-type TeamsRootParamList = {
-  teamsRoot: {
-    filter?: string
-    sort?: T.Teams.TeamListSort
-  }
-}
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 const orderTeams = (
   teams: ReadonlyArray<T.Teams.TeamMeta>,
@@ -82,7 +74,7 @@ const Connected = ({filter = '', sort = 'role'}: Props) => {
   }))
 
   const nav = useSafeNavigation()
-  const navigation = useNavigation() as NativeStackNavigationProp<TeamsRootParamList, 'teamsRoot'>
+  const navigation = useTypedNavigation('teamsRoot')
   const onCreateTeam = () =>
     nav.safeNavigateAppend({name: 'teamWizard1TeamPurpose', params: {wizard: makeNewTeamWizard()}})
   const onJoinTeam = () => nav.safeNavigateAppend({name: 'teamJoinTeamDialog', params: {}})

shared/teams/get-options.tsx

@@ -1,18 +1,10 @@
 import * as Kb from '@/common-adapters'
-import type * as T from '@/constants/types'
 import {HeaderRightActions} from './main/header'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {makeNewTeamWizard} from './new-team/wizard/state'
 import {useTeamsList} from './use-teams-list'
-import {useNavigation, useRoute} from '@react-navigation/native'
-import type {RouteProp} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
-
-type TeamsRootParams = {
-  filter?: string
-  sort?: T.Teams.TeamListSort
-}
-type TeamsRootParamList = {teamsRoot: TeamsRootParams}
+import {useRoute} from '@react-navigation/native'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 const useHeaderActions = () => {
   const nav = useSafeNavigation()
@@ -24,9 +16,9 @@ const useHeaderActions = () => {
 }
 
 const TeamsFilter = () => {
-  const route = useRoute() as RouteProp<TeamsRootParamList, 'teamsRoot'>
+  const route = useRoute('teamsRoot')
   const params = route.params
-  const navigation = useNavigation() as NativeStackNavigationProp<TeamsRootParamList, 'teamsRoot'>
+  const navigation = useTypedNavigation('teamsRoot')
   const filterValue = params.filter ?? ''
   const {teams} = useTeamsList()
   const numTeams = teams.length

shared/teams/join-team/container.tsx

@@ -2,16 +2,11 @@ import * as C from '@/constants'
 import * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import {RPCError} from '@/util/errors'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 import upperFirst from 'lodash/upperFirst'
 import * as React from 'react'
-import {useNavigation} from '@react-navigation/native'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 type OwnProps = {initialTeamname?: string; success?: boolean}
-type TeamJoinTeamDialogParamList = {
-  teamJoinTeamDialog: OwnProps
-}
-
 const getJoinTeamError = (error: unknown) => {
   if (error instanceof RPCError) {
     return (
@@ -33,8 +28,7 @@ const ContainerInner = ({initialTeamname, success: successParam}: OwnProps) => {
   const [successTeamName, setSuccessTeamName] = React.useState('')
   const [name, _setName] = React.useState(initialTeamname ?? '')
   const joinTeam = C.useRPC(T.RPCGen.teamsTeamAcceptInviteOrRequestAccessRpcListener)
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamJoinTeamDialogParamList, 'teamJoinTeamDialog'>
+  const navigation = useTypedNavigation('teamJoinTeamDialog')
   const navigateUp = C.Router2.navigateUp
   const success = !!successParam
   const handoffToInviteRef = React.useRef(false)

shared/teams/new-team/wizard/add-subteam-members.tsx

@@ -7,21 +7,15 @@ import {useCurrentUserState} from '@/stores/current-user'
 import {useModalHeaderState} from '@/stores/modal-header'
 import * as C from '@/constants'
 import {newTeamWizardToAddMembersWizard, type NewTeamWizard} from './state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 import {useLoadedTeam} from '@/teams/team/use-loaded-team'
 
 type Props = {
   wizard: NewTeamWizard
 }
 
-type TeamWizardSubteamMembersParamList = {
-  teamWizardSubteamMembers: {wizard: NewTeamWizard}
-}
-
 const AddSubteamMembers = ({wizard: wizardState}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizardSubteamMembersParamList, 'teamWizardSubteamMembers'>
+  const navigation = useTypedNavigation('teamWizardSubteamMembers')
   const [selectedMembers, setSelectedMembers] = React.useState(new Set<string>())
   const [filter, setFilter] = React.useState('')
   const filterL = filter.toLowerCase()

shared/teams/new-team/wizard/create-channels.tsx

@@ -4,8 +4,7 @@ import type * as T from '@/constants/types'
 import {pluralize} from '@/util/string'
 import * as C from '@/constants'
 import {type NewTeamWizard} from './state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 type Props = {
   initialChannels?: ReadonlyArray<string>
@@ -93,13 +92,8 @@ type WizardProps = {
   wizard: NewTeamWizard
 }
 
-type TeamWizard5ChannelsParamList = {
-  teamWizard5Channels: {wizard: NewTeamWizard}
-}
-
 const WizardCreateChannels = ({wizard: initialWizard}: WizardProps) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizard5ChannelsParamList, 'teamWizard5Channels'>
+  const navigation = useTypedNavigation('teamWizard5Channels')
   const navigateAppend = C.Router2.navigateAppend
   return (
     <CreateChannelsModal

shared/teams/new-team/wizard/create-subteams.tsx

@@ -3,22 +3,16 @@ import * as Kb from '@/common-adapters'
 import {pluralize} from '@/util/string'
 import * as C from '@/constants'
 import {newTeamWizardToAddMembersWizard, type NewTeamWizard} from './state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 const cleanSubteamName = (name: string) => name.replace(/[^0-9a-zA-Z_]/, '')
 
 type Props = {
   wizard: NewTeamWizard
 }
 
-type TeamWizard6SubteamsParamList = {
-  teamWizard6Subteams: {wizard: NewTeamWizard}
-}
-
 const CreateSubteams = ({wizard: wizardState}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizard6SubteamsParamList, 'teamWizard6Subteams'>
+  const navigation = useTypedNavigation('teamWizard6Subteams')
   const navigateAppend = C.Router2.navigateAppend
   const teamname = wizardState.name
   const initialSubteams = wizardState.subteams ?? ['', '', '']

shared/teams/new-team/wizard/make-big-team.tsx

@@ -1,20 +1,14 @@
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import {newTeamWizardToAddMembersWizard, type NewTeamWizard} from './state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 type Props = {
   wizard: NewTeamWizard
 }
 
-type TeamWizard4TeamSizeParamList = {
-  teamWizard4TeamSize: {wizard: NewTeamWizard}
-}
-
 const MakeBigTeam = ({wizard: initialWizard}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizard4TeamSizeParamList, 'teamWizard4TeamSize'>
+  const navigation = useTypedNavigation('teamWizard4TeamSize')
   const navigateAppend = C.Router2.navigateAppend
   const onSubmit = (isBig: boolean) => {
     const wizard = {...initialWizard, isBig}

shared/teams/new-team/wizard/new-team-info.tsx

@@ -6,8 +6,7 @@ import {pluralize} from '@/util/string'
 import {InlineDropdown} from '@/common-adapters/dropdown'
 import {FloatingRolePicker} from '../../role-picker'
 import {type NewTeamWizard} from './state'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 import {useLoadedTeam} from '../../team/use-loaded-team'
 
 const getTeamTakenMessage = (status: T.RPCGen.StatusCode): string => {
@@ -31,13 +30,8 @@ type Props = {
   wizard: NewTeamWizard
 }
 
-type TeamWizard2TeamInfoParamList = {
-  teamWizard2TeamInfo: {wizard: NewTeamWizard}
-}
-
 const NewTeamInfo = ({wizard: teamWizardState}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizard2TeamInfoParamList, 'teamWizard2TeamInfo'>
+  const navigation = useTypedNavigation('teamWizard2TeamInfo')
   const parentTeamID = teamWizardState.parentTeamID ?? T.Teams.noTeamID
   const {
     teamMeta: {teamname: loadedParentName},

shared/teams/new-team/wizard/team-purpose.tsx

@@ -2,20 +2,14 @@ import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {makeNewTeamWizard, type NewTeamWizard} from './state'
 import * as C from '@/constants'
-import {useNavigation} from '@react-navigation/native'
-import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+import {useTypedNavigation} from '@/util/typed-navigation'
 
 type Props = {
   wizard?: NewTeamWizard
 }
 
-type TeamWizard1TeamPurposeParamList = {
-  teamWizard1TeamPurpose: {wizard?: NewTeamWizard}
-}
-
 const TeamPurpose = ({wizard: wizardParam}: Props) => {
-  const navigation =
-    useNavigation() as NativeStackNavigationProp<TeamWizard1TeamPurposeParamList, 'teamWizard1TeamPurpose'>
+  const navigation = useTypedNavigation('teamWizard1TeamPurpose')
   const navigateAppend = C.Router2.navigateAppend
   const wizard = wizardParam ?? makeNewTeamWizard()
   const onSubmit = (teamType: T.Teams.TeamWizardTeamType) => {

shared/util/typed-navigation.tsx

@@ -0,0 +1,12 @@
+import {useNavigation} from '@react-navigation/native'
+import type {RootParamList} from '@/router-v2/route-params'
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
+
+// useNavigation() returns GenericNavigation which has setParams/setOptions typed as `unknown`.
+// This wrapper infers the route name from the argument and returns a properly typed navigation
+// prop, so setParams and setOptions are typed against the actual route params in RootParamList.
+export function useTypedNavigation<RouteName extends keyof RootParamList>(
+  _routeName: RouteName
+): NativeStackNavigationProp<RootParamList, RouteName> {
+  return useNavigation() as unknown as NativeStackNavigationProp<RootParamList, RouteName>
+}