Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

Type-safe navigationHandler with React-Navigation

$
0
0

I have an issue with Typescript and React Navigation for my React Native app.I've got the follow setup in my project, which gives me awesome help and autocompletion when using e.g. navigation.push().

Types

import { StackNavigationProp } from '@react-navigation/stack';export type RootStackParamList = {    Home: undefined;    Content: undefined;    List: undefined;};export type StackNavigationProps = StackNavigationProp<RootStackParamList>;

Usage

const navigation = useNavigation<StackNavigationProps>();

However, I've created a navigation handler function that takes a parameter which get's fed to navigation.push. It works fine as long as the type of the parameter is of type any.

const navigationHandler = useCallback((targetScreen) => {    navigation.push(targetScreen);}, [navigation]);

But I am not satisfied with the any type and would prefer that targetScreen could in fact just be one of the screens that was declared in my RootStackParamList type. I have tried in countless of ways to satisfy the push method of the navigation object but I'm stuck.

The following attempt have been the most successful, but is yet not working exactly as it should. It does give me autocompletion on available screens, but the push is still unhappy.

Type:

export type NavigationScreen<T extends RootStackParamList> = {    [K in keyof T]: K;}[keyof T];

Usage:

const navigationHandler = useCallback(<T extends RootStackParamList>(targetScreen: NavigationScreen<T>) => {        navigation.push(targetScreen);},[navigation]);

Hovering the error I get prompted with the following:

(parameter) targetScreen: { [K in keyof T]: K; }[keyof T] Argument of type '[{ [K in keyof T]: K; }[keyof T]]' is not assignable to parameter of type '["Home" | "Content" | "List"] | ["Home" | "Content" | "List", undefined]'. Type '[{ [K in keyof T]: K; }[keyof T]]' is not assignable to type '["Home" | "Content" | "List"]'. Type 'keyof T' is not assignable to type '"Home" | "Content" | "List"'. Type 'string | number | symbol' is not assignable to type '"Home" | "Content" | "List"'. Type 'string' is not assignable to type '"Home" | "Content" | "List"'. Type 'keyof T' is not assignable to type '"List"'. Type 'string | number | symbol' is not assignable to type '"List"'. Type 'string' is not assignable to type '"List"'.

How to get this working?Thanks in advance!


Viewing all articles
Browse latest Browse all 6212

Trending Articles