Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation how to type TabNavigator with nested StackNavigators

$
0
0

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?

// Navigatorimport 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>  );};
// Typesimport 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 {}  }}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>