How to Type “navigate” Parameters with TypeScript in React Navigation V6?

If you are using TypeScript with React Navigation V6, you might have encountered the need to type the parameters passed to the navigate function. In this blog post, we will explore different solutions to properly type the parameters when navigating between screens in React Navigation V6.

Solution 1: Inline Type Annotation

One way to type the parameters is by using inline type annotation. You can define the type of the parameters directly when calling the navigate function. Here’s an example:

{`import { useNavigation } from '@react-navigation/native';

type MyParams = {
  id: number;
  name: string;
};

const MyComponent = () => {
  const navigation = useNavigation();

  const handleNavigate = () => {
    navigation.navigate('Details', { id: 1, name: 'John' } as MyParams);
  };

  return (
    // Your component JSX
    Navigate
  );
};`}

In this example, we define the MyParams type which represents the shape of the parameters being passed to the Details screen. By using the as keyword, we can explicitly cast the parameters to the MyParams type.

Solution 2: Define a Screen Param List

Another approach is to define a screen param list where you can specify the types of the parameters for each screen. Here’s how you can do it:

{`import { useNavigation } from '@react-navigation/native';

type RootStackParamList = {
  Details: { id: number; name: string };
  // Add more screen parameters here if needed
};

const MyComponent = () => {
  const navigation = useNavigation();

  const handleNavigate = () => {
    navigation.navigate('Details', { id: 1, name: 'John' });
  };

  return (
    // Your component JSX
    Navigate
  );
};`}

In this example, we define the RootStackParamList type which represents the available screens and their corresponding parameter types. By specifying the Details screen with the { id: number; name: string } type, TypeScript will enforce the correct parameter types when using the navigate function.

Conclusion

By using either inline type annotation or defining a screen param list, you can properly type the parameters when using the navigate function in React Navigation V6 with TypeScript. Choose the solution that best fits your project’s needs and enjoy the benefits of type safety in your navigation code!

That’s it for this blog post. We hope you found it helpful in understanding how to type “navigate” parameters with TypeScript in React Navigation V6. If you have any questions or suggestions, feel free to leave a comment below.