My question relates to migrating / upgrading some code from React Navigation v4 to v6.
I have an existing application using React Navigation v4. It utilizes a bottom tab navigator (createBottomTabNavigator) with code that broadly does this:
const TabNavigator = createBottomTabNavigator(
{
MapStack: createStack(
),
NotificationsStack:createStack(
),
SettingsStack: createStack(
)
},
{
tabBarComponent: TabBar
}
);
In this example, I have three options from the bottom tab navigator for a map, notifications and settings. Different screens can be accessed in each case. This essentially means there is a stack navigator embedded within the tab navigator. The createStack is defined as follows:
const createStack = (label, Icon, ...rest) => {
}
This returns the (1) screens to access from each option in the bottom tab navigator, (2) the path and (3) navigation labels and icons for the tab bar.
I can see there are some examples, e.g. this question which give some ideas on how to do this in React Navigation v6. However, I'm after a better example which indicates how to include a stack navigator inside a tab navigator with multiple screens in each case. The example above has a single screen.