Share Navigation Options for Multiple Stack Navigator - react-native

Question

Using react native with react navigation I use a DrawNavigator and several StackNavigators. Now I want to define the header style (header comes with StackNavigator) of the StackNavigator just once and for all StackNavigators.
This is what i have:
// View1.js
export default StackNav1 = createStackNavigator(
{
View1: View1Screen,
View2: View2Screen
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: '#9eb9b3',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerLeft: (
<Icon style={{ paddingLeft: 10 }} name="bars" size={30}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
),
}
}
}
)
// View2.js
export default StackNav2 = createStackNavigator(
{
View3: View3Screen,
View4: View4Screen
},
// here I need to define the style from View1.js again ?!
)
Is there a smarter solution to share the appearance than writing it over and over again.
When the app is scaling I probably will have a lot StackNavigators and want them to have the same header/appearance.
I appreciate your thoughts!

Answer 1

Create stackNavigatorConfig which is the second parameter of react navigation methods.
stackNavigatorConfig = {
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: '#9eb9b3'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="bars"
size={30}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
)
};
}
};
Then you can use it like
export default StackNav1 = createStackNavigator({
View1: View1Screen,
View2: View2Screen
},
stackNavigatorConfig);
export default StackNav2 = createStackNavigator({
View3: View3Screen,
View4: View4Screen
},
stackNavigatorConfig);