'React Navigation how to type TabNavigator with nested StackNavigators
I'm trying to properly type the following navigator. I have one successfully setup when it had a root StackNavigator, but I'm running into troubles when it has a BottomTabNavigator for the root. The intellisense for the types is not correct.
When I use navigator.navigate('...') // The only suggestion is 'Home', but they should be 'HomeTab' and 'MapTab'.
Any suggestions where I went wrong?
// Navigator
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '@/scenes/Home/HomeScreen';
import MappingScreen from '@/scenes/Mapping/MappingScreen';
import type {
TabParamList,
HomeStackParamList,
MapStackParamList,
} from './types';
const Tab = createBottomTabNavigator<TabParamList>();
const HomeStackNavigator = createNativeStackNavigator<HomeStackParamList>();
const MapStackNavigator = createNativeStackNavigator<MapStackParamList>();
const HomeStack = () => (
<HomeStackNavigator.Navigator>
<HomeStackNavigator.Screen name="Home" component={HomeScreen} />
</HomeStackNavigator.Navigator>
);
const MapStack = () => (
<MapStackNavigator.Navigator>
<MapStackNavigator.Screen name="Map" component={MappingScreen} />
</MapStackNavigator.Navigator>
);
export default () => {
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="HomeTab" component={HomeStack} />
<Tab.Screen name="MapTab" component={MapStack} />
</Tab.Navigator>
</NavigationContainer>
);
};
// Types
import type {
NavigatorScreenParams,
} from '@react-navigation/native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
export type RootTabParamList = {
Home: NavigatorScreenParams<TabParamList>;
};
export type RootTabScreenProps<T extends keyof TabParamList> =
BottomTabScreenProps<TabParamList, T>;
export type TabParamList = {
HomeTab: NativeStackScreenProps<HomeStackParamList>;
MapTab: NativeStackScreenProps<MapStackParamList>;
};
export type HomeStackParamList = {
Home: undefined;
};
export type MapStackParamList = {
Map: undefined;
};
declare global {
namespace ReactNavigation {
interface RootParamList extends RootTabParamList {}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
