If I have two navigators structured 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>
);
};
To navigate to the Profile screen from the Bootstrap screen, you would typically write: (assuming proper annotation of navigation prop)
navigation.navigate('MainApp', {screen: 'Profile'})
However, TypeScript may give an error in this scenario, stating that
Type '{ screen: string; }' is not assignable to type 'undefined'MainApp has child screens. To address this, you need to somehow compose the ParamLists so TypeScript understands the child screens. Is there a way to achieve this with react-navigation v5?