react native typescript ‘string’ is not assignable to parameter of type ‘never.’ in useNavigation

Question

This is a weird issue that happens in RN > 0.65.
My solution:

1.- Import:

{/* Depends of your Package (Stack or NativeStack...) */}
import { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';

2.- Define types

export type RootStackParamList = {
  YourScreen: { id: number } | undefined;
};

3.- Assign useNavigation hook with type StackNavigationProp.

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

4.- Use it! (Eye: with this type you can access to navigation object)

<TouchableOpacity
   // Use this when you pass a parameter (is optional)
   onPress={() => navigation.navigate('YourScreen', {id: 5})}>
</TouchableOpacity>

5.- Remember this notes:

Specifying undefined means that the route doesn’t have params. A union type with undefined => AnyType | undefined means that params are optional.
The useNavigation const have special type and this final type takes 3 generics:
The param list object => RootStackParamList
The name of the screen route => RouteName
The ID of the navigator (optional) => NavigatorID

Obtained from: https://reactnavigation.org/docs/typescript/#annotating-usenavigation

Leave a Comment Cancel reply