React-Nav-Melon/navigation/LandingPageNavigator.js

import { View, Text } 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'

const Drawer = createDrawerNavigator()

const SidebarContent = (props) => {
    return (
        <View><Text>SidebarContent</Text></View>
    );
}

const LandingPageNavigator = () => {

    const isLargeScreen = metrics.screenWidth >= 768;

    return (
        <Drawer.Navigator
            initialRouteName='LandingPage'
            screenOptions={{
                drawerType: 'front',
                drawerStyle: isLargeScreen ? null : { width: '100%' },
                
            }}
            drawerContent={() => <SidebarContent/>}
        >
            <Drawer.Screen
                name="LandingPage"
                component={LandingPage}
                options={({ navigation }) => ({
                    headerShown: true,
                header: () => <NewscoutHomeHeader onPress={() => navigation.toggleDrawer()} />
                })} />
        </Drawer.Navigator>
    )
}

export default LandingPageNavigator