problem to give screenOptions to the DrawerNavigator - react-native

Question

I was facing trouble using createDrawerNavigator. I was following there Docs and try to implement something like this:
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
const MenuNavigator = createStackNavigator();
const HeaderOptions = {
headerStyle: {
backgroundColor: '#512DA8',
},
headerTintColor: '#fff',
headerTitleStyle: {
color: '#fff',
},
};
function MenuNavigatorScreen() {
return (
<MenuNavigator.Navigator
//initialRouteName
screenOptions={HeaderOptions}
>
//Screens
</MenuNavigator.Navigator>
);
}
const HomeNavigator = createStackNavigator();
function HomeNavigatorScreen() {
return (
<HomeNavigator.Navigator
//initialRouteName
screenOptions={HeaderOptions}
>
//Screen
</HomeNavigator.Navigator>
);
}
const MainNavigator = createDrawerNavigator();
function MainNavigatorDrawer() {
return (
<MainNavigator.Navigator
initialRouteName="Home"
drawerStyle={{
backgroundColor: '#D1C4E9',
}}
screenOptions={HeaderOptions} //Isn't it should be applied to all screen
>
<MainNavigator.Screen name="Home" component={HomeNavigatorScreen} />
<MainNavigator.Screen name="Menu" component={MenuNavigatorScreen} />
<MainNavigator.Screen name="About" component={component1} />
<MainNavigator.Screen name="Contact" component={component2} />
</MainNavigator.Navigator>
);
}
I got the header in the Home and Menu but in the About and Contact screen there is no header. I think screenOptions isn't working in the DrawerNavigator, then how to give them this options?
And one more thing, I realize that I repeat my code many times. Is there any better approach?
I heartily thank if anyone helps me to figure out this.
Ok, I solve the header issue by turning my component1 and component2 into a stackNavigator like:
const stack = createStackNavigator();
function AboutNavigatorScreen() {
return (
<stack.Navigator screenOptions={HeaderOptions}>
<stack.Screen name="About" component={component1} />
</stack.Navigator>
);
}
function ContactNavigatorScreen() {
return (
<stack.Navigator screenOptions={HeaderOptions}>
<stack.Screen name="Contact" component={component2} />
</stack.Navigator>
);
}
What I understand is "If I need to add any screenOptions in my component the turn it into a stacknagivator" which seem odd. Am I right or over-engineering my problem?

Answer 1

Good day, to implement the header on the site, you need to specify the screenOptions={{headerShown: true}}> in Driver.Navigator.
And then prescribe options
import React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {Home} from '../screens/Home'
import LeftBurgerMenu from "../components/LeftBurgerMenu";
const Drawer = createDrawerNavigator();
export const AppNavigation = () => {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: {marginVertical: 30}
}}
screenOptions={{
headerShown: true,
}}>
<Drawer.Screen name="Home" component={() => <Home/>}
options={{
headerTintColor: '#fffffd',
headerTitle: () => <Text>Title</Text>,
headerLeft: () => <BackArrow/>,
}}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}