Using typescript with useRoute on react navigation v5

Question

I am trying to extract the params as follows using useRoute as follows.

  const route = useRoute();
  const { params } = route;
  const {
   id, name,
  } = params;

Everything works fine but the linter is highlighting id and namewith the following error.

Property 'id' does not exist on type 'object | undefined

How do I overcome this issue.

score 7 · Answer 1 · answered Apr 16 '20 at 09:43

react-navigation exports a couple utility types to make your life easier when using hooks and defining props for your own components. They depend on you first defining types for your navigators.

Lets say you have a stack with two screens, A and B. First define what params each of those takes:

type StackParamsList = {
  A: undefined;
  B: {
    id: string;
    name: string;
  };
}

For typing useRoute in your screen B:

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

const route = useRoute<RouteProp<StackParamsList, 'B'>>();

route.params.id // OK
route.params.foo // error

Check the Type checking with Typescript article in react-navigation docs for more details and examples of typing other elements of your navigation stack.

Using typescript with useRoute on react navigation v5

1 Answers1