React-Nav-Melon/navigation/LandingPageNavigator.js

import { View, Text, UIManager, Platform } from 'react-native';
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import LandingPage from '../screens/LandingPage';
import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader';
import metrics from '../theme/metrics';
import SidebarPage from '../screens/SidebarPage';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons";
import colors from '../theme/colors';
import NewsDetailPage from '../screens/NewsDetailPage';
import NotificationsPage from '../screens/NotificationsPage';
import CategoryPage from '../screens/CategoryPage';


const Drawer = createDrawerNavigator();

const LandingPageNavigator = () => {
    const isLargeScreen = metrics.screenWidth >= 768;

    if (
        Platform.OS === 'android' &&
        UIManager.setLayoutAnimationEnabledExperimental
    ) {
        UIManager.setLayoutAnimationEnabledExperimental(true);
    }
    return (
        <Drawer.Navigator
            initialRouteName="LandingPage"
            screenOptions={{
                drawerType: 'front',
                drawerStyle: isLargeScreen ? null : { width: '100%' },
            }}
            drawerContent={({ navigation }) => <SidebarPage navigation={navigation} />}>
            <Drawer.Screen
                name="LandingPage"
                component={LandingPage}
                options={({ navigation }) => ({
                    headerShown: true,
                    header: () => (
                        <NewscoutHomeHeader>
                            <View style={{alignItems:'center',flexDirection: 'row',gap: 16}}>
                                <TouchableWithoutFeedback onPress={() => navigation.navigate('Notifications')}>
                                    <MaterialIcon name='notifications-none' color={colors.tertiaryColor} size={30} />
                                </TouchableWithoutFeedback>
                                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
                                    <MaterialIcon name='list' color={colors.topColor} size={30} />
                                </TouchableWithoutFeedback>
                            </View>
                        </NewscoutHomeHeader>
                    ),
                })}
            />
            <Drawer.Screen
                name="NewsDetailPage"
                component={NewsDetailPage}
                options={() =>({
                    headerShown: false
                })}
            />
            <Drawer.Screen
                name="Notifications"
                component={NotificationsPage}
                options={() =>({
                    headerShown: false
                })}
            />
            <Drawer.Screen
                name="CategoryPage"
                component={CategoryPage}
                options={() => ({
                    headerShown: false
                })}
            />
        </Drawer.Navigator>
    );
};

export default LandingPageNavigator;