React Navigation multiple stack configs

Question

I have a DrawerNavigator with mutiple pages in it, each of these pages are their own StackNavigator, that means I have a stack config for each stack. e.g.

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
},
{
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
})

I have one of those for each page in my drawer.

All of those stack configs are the same. Is there a way to pass that stack config only once in my code?

Answer 1

Put your common config in a file and then import and use where needed.

Yes, as far as I know, for every stack you have to define your custom configuration.

// defaultStackConfig.js
export const defaultConfig = {
  headerLayoutPreset: "center",
  headerMode: "float",
  defaultNavigationOptions: {
    headerTintColor: "#fff",
    headerLayoutPreset: "center",
    headerStyle: {
      backgroundColor: "#333",
    },
    headerTitleStyle: {
      fontSize: 18
    },
  }
}


// Stack1.js

import {defaultConfig} from './defaultConfig'

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, defaultConfig)

// or with some custom mode

export const Stacker1 = createStackNavigator({
  Stacker1FirstPage: {
    screen: Stacker1FirstPage,
    navigationOptions: {
      headerTitle: "Stacker1FirstPage",
    }
  },
}, { ...defaultConfig, ...{ headerMode: "float" })