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';

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 onPress={() => navigation.toggleDrawer()} />
          ),
        })}
      />
    </Drawer.Navigator>
  );
};

export default LandingPageNavigator;