React Navigation is a popular library for building navigational UI in React Native applications. It provides a hook called useNavigation, which is used to access the navigation prop of the nearest navigator. This hook is used in React Navigation projects when you need to trigger navigation from a child component, not a page. However, with TypeScript, you must add a type declaration to it, which can be challenging. Without it, TypeScript will show an error that “argument of type string is not assignable to parameter of type never.” The navigation will still work, but it needs a type to stop the warning.
No overload matches this call.
Overload 1 of 2, '(...args: never): void', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'never'.
Overload 2 of 2, '(options: never): void', gave the following error.
Argument of type 'string' is not assignable to parameter of type 'never'
Adding type declarations to useNavigation is crucial because it helps catch errors at compile time and provides better IDE support. Here, we will discuss how to add type declarations to useNavigation in a React Navigation project to resolve this error.
Step 1: Install Dependencies
The first step is to make sure you have installed the necessary dependencies. We need to install @react-navigation/native, @react-navigation/stack, and @types/react-navigation as dev dependencies. The following command installs these dependencies:
npm install --save-dev @react-navigation/native @react-navigation/stack @types/react-navigation
Step 2: Add Type Declarations
The second step is to add type declarations to useNavigation. We can do this by creating a new file react-navigation.d.ts in the types directory at the root of our project. This file should contain the following code:
import { NavigationProp, ParamListBase } from '@react-navigation/native';
declare global {
namespace ReactNavigation {
interface RootParamList extends ParamListBase {}
}
}
export function useNavigation<
T extends NavigationProp
>(): T;
In this code, we first import NavigationProp and ParamListBase from @react-navigation/native. We then declare a namespace ReactNavigation with an interface RootParamList that extends ParamListBase.
Then, we export a function useNavigation that returns a type T that extends NavigationProp. This function is the same as the original useNavigation hook provided by React Navigation but with added type declarations.
Step 3: Use the Typed useNavigation
The final step is to use the typed useNavigation hook in our React Navigation project. We can use it like the original useNavigation hook but with the added benefit of type declarations.
For example, if we have a screen component HomeScreen that uses useNavigation to navigate to another screen, we can use the typed useNavigation like this:
import { useNavigation } from '../types/react-navigation';
function HomeScreen() {
const navigation = useNavigation();
const handlePress = () => {
navigation.navigate('Details', { id: 123 });
};
return (
);
}
In this code, we import useNavigation from our typed react-navigation module. We then use it to get the navigation prop and call the navigate method to navigate to the Details screen with an ID parameter.
Resolving Error: Not Assignable to Parameter of Type Never
Here we’ve discussed how to add type declarations to the useNavigation hook in a React Navigation project. By following the steps outlined above, we can catch errors at compile time and get better IDE support for ensuring the right pages are given to the navigator.
TKS !!!!