How can i import the defaultNavigationOptions property on a screen? - react-native

Question

I'm trying to import the react-navigation property into my screens the problem is that I always import the same defaultNavigationOptions for the different Stacks then to optimize the code I want to create as a kind of function so I only import it once on each screen without having to write it many times as I did, then my code so they understand more.
const BloquesStack = createStackNavigator(
{
BLOQUES: {
screen: ScreenBloquesRedux,
navigationOptions: ({ navigation }) => {
return {
headerLeft: <ButtonMenu navigation={navigation} />,
headerRight: <ButtonHome navigation={navigation} />
};
}
},
DetalleBloques: {
screen: DetalleBloque
},
IntegrantesBloque: {
screen: IntegrantesBloque
}
},
{
defaultNavigationOptions: {
headerBackTitle: "Atras",
headerTitleStyle: {
fontFamily: "RobotoCondensed-Regular",
fontWeight: "100",
fontSize: 20,
textAlign: "center",
color: white,
flex: 1
},
headerStyle: { backgroundColor: blue, height: 60 },
headerTintColor: white
}
}
);
export { BloquesStack };
const ComisionesStack = createStackNavigator(
{
COMISIONES: {
screen: ComisionesRedux,
navigationOptions: ({ navigation }) => {
return {
headerLeft: <ButtonMenu navigation={navigation} />,
headerRight: <ButtonHome navigation={navigation} />
};
}
}
},
{
defaultNavigationOptions: {
headerBackTitle: "Atras",
headerTitleStyle: {
fontFamily: "RobotoCondensed-Regular",
fontWeight: "100",
fontSize: 20,
textAlign: "center",
color: white,
flex: 1
},
headerStyle: { backgroundColor: blue, height: 60 },
headerTintColor: white
}
}
export { ComisionesStack };
const DrawerNavigator = createDrawerNavigator(
{
Diputados: { screen: DiputadosStack },
Bloques: { screen: BloquesStack },
Interbloques: { screen: InterBloquesStack },
Comisiones: { screen: ComisionesStack },
Autoridades: { screen: AutoridadesStack },
"Sesion En Vivo": { screen: SesionEnVivoStack },
"Diputados TV": { screen: DiputadosTVStack },
"Reglamentos HCDN": { screen: PDFReglamentosStack }
},
{
contentComponent: CustomDrawerContentComponent,
drawerWidth: width / 2,
contentOptions: {
activeTintColor: white,
activeBackgroundColor: Gris_Drawer,
inactiveTintColor: "rgb(105,105,104)",
itemsContainerStyle: {
textAlign: "center"
},
labelStyle: {
fontFamily: "RobotoCondensed-Regular",
fontWeight: "100",
fontSize: 17,
marginTop: 8,
marginLeft: 10
}
},
iconContainerStyle: {
opacity: 1
}
}
);
I just want to import default Navigation Options I do not intend to modify my navigation, I just want to know if it can be done. Thank you very much already

Answer 1

Create a separate object with the defaultNavigationOptions
const defaultNavigationOptions = {
headerBackTitle: "Atras",
headerTitleStyle: {
fontFamily: "RobotoCondensed-Regular",
fontWeight: "100",
fontSize: 20,
textAlign: "center",
color: white,
flex: 1
},
headerStyle: { backgroundColor: blue, height: 60 },
headerTintColor: white
}
const BloquesStack = createStackNavigator(
{ /* routes */ },
{ defaultNavigationOptions }
)
const ComisionesStack = createStackNavigator(
{ /* routes */ },
{ defaultNavigationOptions }
)