This question resembles this how to use navigation.replace in TypeScript? which is for react-navigation 5.

I also read the docs https://reactnavigation.org/docs/typescript/#annotating-usenavigation

Tried a couple of different ways, but got more confused 🙃.

import { BottomTabScreenProps } from '@react-navigation/bottom-tabs'
import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'
import { NativeStackScreenProps } from '@react-navigation/native-stack'
import { AxiosError } from 'axios'

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  SignIn: undefined
  ResetPassword: { email?: string } | undefined
  Root: NavigatorScreenParams<RootTabParamList> | undefined
  Modal: undefined
  Error: { error?: AxiosError | null } | undefined
  DevToolsSignIn: undefined
}

export type RootTabParamList = {
  Overview: undefined
  Returns: undefined
  Portfolio: undefined
  More: undefined
}

export type RouteName = keyof RootStackParamList | keyof RootTabParamList

export const routeTypeGuard = (route: RouteName) => route as keyof RootStackParamList

export type RootStackScreenProps<Screen extends keyof RootStackParamList> = NativeStackScreenProps<
  RootStackParamList,
  Screen
>

export type RootTabScreenProps<Screen extends keyof RootTabParamList> = CompositeScreenProps<
  BottomTabScreenProps<RootTabParamList, Screen>,
  NativeStackScreenProps<RootStackParamList>
>

then in a component I wish to tell typescript that I should be able to destruct replace from the useNavigation()

export default ({ route }: RootStackScreenProps<'ResetPassword'>) => {
  const { replace } = useNavigation<?🙃?>()
  const email = route.params?.email

  if (!email) replace('Error')

  return (
    <ScreenContainer>
      <Text style={{ color: 'hotpink' }}>{email}</Text>
    </ScreenContainer>
  )
}