I'm looking to create a hook that can go back in a react navigation stack. I want the hook to be able to take a param fallback which is a route that the hook will navigate to if navigation.canGoBack() is false. I'm having trouble getting the type right. Here is my code (with some of the hook stripped for succinctness.)
const useNavigateBack = < S extends keyof RootStackParamList, T extends RootStackScreenProps<S>['navigation']>( fallback: Route<S, RootStackParamList[S]>) => { const navigation = useNavigation<T>() navigation.navigate(fallback)}export { useNavigateBack }fallback is being highlighted by TS with the following error:
No overload matches this call. Argument of type '[Readonly<{ key: string; name: S; path?: string | undefined; }> & (Readonly<{ params?: Readonly<RootStackParamList[S]> | undefined; }> | Readonly<...>)]' is not assignable to parameter of type '[screen: "HomeTabs"] | [screen: "HomeTabs", params: { screen: keyof TabsParamList; } | undefined] | [screen: "Welcome"] | [screen: "Welcome", params: undefined] | [screen: "Login"] | [screen: "Login", params: { params: { returnToOnFinish: keyof RootStackParamList; returnToOnFinishParams?: Record<...> | undefined; };...'. Type '[Readonly<{ key: string; name: S; path?: string | undefined; }> & (Readonly<{ params?: Readonly<RootStackParamList[S]> | undefined; }> | Readonly<...>)]' is not assignable to type '[screen: "Review Order Start", params: { orderId: string; }]'. Source has 1 element(s) but target requires 2. ... MoreI've been messing around with this for a while and can't quite figure it out. Any help is appreciated.