For most of the cases, I follow a simple pattern to type any screen under react-navigation v5:
// Params definitiontype RouteParamsList = { Screen1: { paramA: number } Screen2: undefined}// Screen1type Props = StackScreenProps<RouteParamsList, 'Screen1'>export const Screen1: React.FC<Props> = ...That works perfectly.
I can't figure out the proper types for a case when I'd want to reuse the Screen1 for different navigators though:
// Params definitiontype RouteParamsListShop = { Screen1: { paramA: number } Screen2: undefined Screen3: undefined}type RouteParamsListFeatures = { Screen1: { paramA: number } Screen4: undefined}// Screen1type Props = StackScreenProps<RouteParamsListShop, 'Screen1'> | StackScreenProps<RouteParamsListFeatures, 'Screen1'> // Tried thisexport const Screen1: React.FC<Props> = ...As I commented, I tried to have a union type covering both cases. It allows to get the parameters from the route properly, but navigate method breaks:
This expression is not callable. Each member of the union type '/* Route info here */' has signatures, but none of those signatures are compatible with each other.ts(2349)
Is there a way to properly type it, or I rather have to change the structure of my navigation to make the screen only part of one route? (alternatively, create 2 wrappers for different navigation).