Search code examples
javascriptreact-nativenavigationreact-navigationreact-navigation-stack

react native set defaultNavigationOptions to multiple stacknavigations at once


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.


Solution

  • 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 },
    }