I have a tablayout of which each tab is a stack navigator. each stacknavigator needs to have the same defaultStackNavigationOptions.
Is there a way to set the default options to a group of navigators (I.E. (HomeStack, SubjectStack, ...).defaultNavigationOptions
)?
EDIT: Quick edit for clarrification. My current code is this:
const homeStack = createStackNavigator({
Home: HomeScreen,
Details: DetailsPage,
},
{
defaultNavigationOptions: {
headerStyle: { backgroundColor: constants.color.primary },
headerTitleStyle: { color: "white" },
}
});
const subjectStack = createStackNavigator({
Subject: SubjectScreen,
News: NewsPage,
},
{
defaultNavigationOptions: {
headerStyle: { backgroundColor: constants.color.primary },
headerTitleStyle: { color: "white" },
}
});
//...
These are loaded into a tablayout:
export const HomeTabNavigator = createBottomTabNavigator(
{
Home: {
screen: homeStack,
},
Subject: {
screen: subjectStack,
},
//...
}
);
I would love to set defaultStackNavigation on every StackNavigator at once, instead of having to copy-paste either this or call a function every time.
If I navigate on the HomeStack on the tablayout, I don't want it to affect the current stack of the Subjectstack on the subject tab.
I sort of found a solution for now. I simply created an object
const defaultNavigationOptions = {
headerStyle: { backgroundColor: constants.color.primary },
headerTitleStyle: { color: "white" },
}
and loading it in instead of the regular navigation options, where I can expand on the default nav options with
{
defaultNavigationOptions: {
...defaultNavigationOptions,
headerStyle: { backgroundColor: constants.color.secondary },
}