Say I have two navigators like this:
export type RootStackParamList = { Bootstrap: undefined; Login: undefined; MainApp: undefined;};export type MainTabsParamList = { Explore: undefined; Profile: undefined;};const MainTabs = createBottomTabNavigator<MainTabsParamList>();const MainApp = () => (<MainTabs.Navigator ><MainTabs.Screen name="Explore" component={Explore} /><MainTabs.Screen name="Profile" component={Profile} /></MainTabs.Navigator>);const RootStack = createStackNavigator<RootStackParamList>();const App = () => { return (<NavigationContainer><RootStack.Navigator initialRouteName="Bootstrap" headerMode="none"><RootStack.Screen name="Bootstrap" component={Bootstrap} /><RootStack.Screen name="Login" component={Login} /><RootStack.Screen name="MainApp" component={MainApp} /></RootStack.Navigator></NavigationContainer> );};
Now if I want to navigate to Profile
screen from Bootstrap
screen. I have to write: (navigation prop properly annotated)
navigation.navigate('MainApp', {screen: 'Profile'})
But typescript gives error here. Saying Type '{ screen: string; }' is not assignable to type 'undefined'
. This is because typescript doesn't know MainApp
has child screens. So I have to somehow compose the ParamLists
so typescript knows about the child screens. How do I do that? Does react-navigation
v5 support that?