How to overwrite global RootParamList in react-navigation v6

Question

In the upgrade guide to react-navigation v6:

https://reactnavigation.org/docs/upgrading-from-5.x/#ability-to-specify-a-type-for-root-navigator-when-using-typescript

it states that you can use

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

somewhere in your code to set the RootParamList globally for all hooks etc.

However, when I try to include the snippet and set my param list all I get is

Duplicate identifier 'RootParamList'.ts(2300)
types.d.ts(5, 19): 'RootParamList' was also declared here

Obviously, the type is already declared and I am trying to overwrite it but this does not seem to be possible.

Any ideas how to overwrite without resulting in a type error?

Enchantress

Did you ever figure this out? – Joh

Answer 1

I had this problem and it was caused because I was not using the exact same snippet as suggested. I use eslint and it would state that "an interface declaring no members is equivalent to its supertype", and in my case, vim would automatically turn this:

declare global {
 namespace ReactNavigation {
   interface RootParamList extends RootStackParamList {}
 }
}

Into this:

declare global {
 namespace ReactNavigation {
   type RootParamList = RootStackParamList;
 }
}

The problem is that react-navigation declares RootParamList using an interface. In this case, my RootParamList was really a declaration.

To solve the problem, I just ensure to use an interface and disabled the @typescript-eslint/no-empty-interface rule:

declare global {
  namespace ReactNavigation {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface RootParamList extends RootStackParamList {}
  }
}

I hope this helps!

Unclasp