React Navigation annotating useNavigator with BottomTabs-CodePudding

Can anybody help with typing / annotating useNavigator with RootStack -> Tabs -> Each tab has a stack setup.

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import type {
  CompositeScreenProps,
  NavigatorScreenParams,
} from '@react-navigation/native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';

export type RootStackParamList = {
  Home: NavigatorScreenParams<HomeTabParamList>;
};

export type RootStackScreenProps<T extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, T>;

export type HomeTabParamList = {
  Dashboard: undefined;
  Map: undefined;
};

export type HomeTabScreenProps<T extends keyof HomeTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<HomeTabParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;

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

export default () =>
  useNavigation<NativeStackNavigationProp<RootStackParamList>>();

const navigation = useNavigator()
navigation.navigate('Dashboard') // Throws type error, only 'Home' is a suggestion.

CodePudding user response：

You need to use it like this:

navigation.navigate('Home', { screen: 'Dashboard' })

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

You also don't need the export default () => useNavigation<NativeStackNavigationProp<RootStackParamList>>();. If you import useNavigation from @react-navigation/native, it will have the correct type.