I recently upgraded my Expo project from React Navigation v5 to React Navigation v6. In the previous version, I did not use any types, and so I decided to add type safety. However, during the process of adding type safety, I faced an issue.

Before I open this issue I have referred to these issues
[1]
[2]

also, I referred to navigating-to-a-screen-in-a-nested-navigator
as well

In a Scenario like below type suggestion still does not work

export type RootStackParamList = {
  Root: NavigatorScreenParams<UsersParamList>;
};

type UsersParamList = {
  Home: NavigatorScreenParams<HomeStackParamList>;
  Profile: NavigatorScreenParams<ProfileStackParamList>;
};

type HomeStackParamList = {
  Home: undefined;
  Subjects: { id: string };
};

type ProfileStackParamList = {
  Profile: { id: string };
  Marks: undefined;
};

let’s say we want to navigate to the subject screen by doing this

navigation.navigate('Root', {
  screen: ' // it suppose to display the Home and Profile Stacks ',
  params: {
    screen: 'Subjects',
    params: {
      screen: 'GHM2345',
    },
  },
});

Even though I added this to the global type as mentioned in the official docs, it’s still not showing up.

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

expected behavior

After types are added globally it should provide the types of screens in all levels.

const navigation = useNavigation();
navigation.navigate('Root', {
  screen: ' // it suppose to display the Home and Profile Stacks ',
  params: {
    screen: 'Subjects',
    params: {
      screen: 'GHM2345',
    },
  },
});