how to use navigation.replace in TypeScript?

The replace method is only available to screens within StackNavigators. We need a way to explicitly type that the screen is such.

When you instantiate your StackNavigator, you have the ability to pass in a type that defines your Routes with the parameters they expect to receive:

export type StackParams = {
   MyRoute: undefined;
   AnotherRoute: {
      id: number
   }
}

createStackNavigator<StackParams>();

Then in the screen you pass that param list to StackNavigationProp

import { StackNavigationProp } from '@react-navigation/stack/';
import { StackParams} form 'your/routes';

const navigation =  useNavigation<StackNavigationProp<StackParams>>()
navigation.replace('route');

Doing this affirms that this is a Stack screen and provides a list of routes that you can navigate to:

replace('AnotherRoute') //success!
replace('FakeRoute') //error, this was not defined in our RouteParams

const navigation =  useNavigation<StackNavigationProp<{route: {} }>>()
navigation.replace('route');

As stated here : https://github.com/react-navigation/react-navigation/issues/7820#issuecomment-689646876

The simplest way is this one :

const navigation = useNavigation<StackNavigationProp<ParamListBase>>();