expo-custom-navigation/lib/templates/Drawer.js

custom navigation for your expo project

import React from 'react';
import { View, Pressable } from 'react-native';
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import { Home, About, Contact } from '../screens';
import { DrawerContentScrollView } from "@react-navigation/drawer";
import { MaterialIcons } from '@expo/vector-icons';
import { defaultHeaderProps } from '../utils/constants';
import { defaultHeaderStyle, defaultHeaderTitleStyle, defaultItemStyle } from '../utils/functions';
const DrawerNav = createDrawerNavigator();
const CustomDrawer = (prop) => {
    return (<View style={{ flex: 1 }}>
            <DrawerContentScrollView {...prop}>
                {prop === null || prop === void 0 ? void 0 : prop.children}
            </DrawerContentScrollView>
        </View>);
};
const Drawer = (props) => {
    const { navigationRef, children, style, items, isNested, headerStyle = defaultHeaderProps, type = 'front', position = 'left', header, itemStyle } = props;
    const showLHeader = position === 'left' ? true : false;
    const options = ({ navigation }) => ({
        headerStyle: defaultHeaderStyle(headerStyle),
        headerShown: headerStyle.showHeader,
        headerTintColor: headerStyle.color,
        headerTitleAlign: headerStyle.textAlign === 'left' ? 'left' : headerStyle.textAlign === 'center' ? 'center' : undefined,
        headerTitle: headerStyle.showText === false ? '' : undefined,
        headerTitleStyle: defaultHeaderTitleStyle(headerStyle),
        headerTitleContainerStyle: headerStyle.textAlign === 'right' ? { width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'flex-end' } : undefined,
        headerRight: () => showLHeader ? undefined : <Pressable style={{ marginRight: 15 }} onPress={() => navigation.openDrawer()}><MaterialIcons name="menu" size={24} color={headerStyle.color}/></Pressable>,
        headerLeft: () => showLHeader ? <Pressable style={{ marginLeft: 15 }} onPress={() => navigation.openDrawer()}><MaterialIcons name="menu" size={24} color={headerStyle.color}/></Pressable> : undefined,
        header: header,
        drawerType: type,
        drawerPosition: position,
        drawerStyle: style,
        drawerInactiveBackgroundColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.BgColor,
        drawerInactiveTintColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.color,
        drawerActiveBackgroundColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.activeBgColor,
        drawerActiveTintColor: itemStyle === null || itemStyle === void 0 ? void 0 : itemStyle.activeColor,
        drawerItemStyle: defaultItemStyle(itemStyle)
    });
    return (isNested ?
        <>
    {children && items ?
                <DrawerNav.Navigator initialRouteName={items[0].name} screenOptions={options} drawerContent={(prop) => <CustomDrawer {...prop} children={children} items={items}/>}>
        {items.map((item, index) => <DrawerNav.Screen name={item.name} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} component={item.screen} key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : index}/>)}
      </DrawerNav.Navigator> :
                <DrawerNav.Navigator initialRouteName={items[0].name} screenOptions={options}>
        {items ?
                        items.map((item, index) => (<DrawerNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : index} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} name={item.name} component={item.screen}/>))
                        :
                            <>
          <DrawerNav.Screen name="Home" component={Home}/>
          <DrawerNav.Screen name="About" component={About}/>
          <DrawerNav.Screen name="Contact" component={Contact}/>
        </>}
      </DrawerNav.Navigator>}
    </>
        : <NavigationContainer ref={navigationRef}>
      {children && items ?
                <DrawerNav.Navigator initialRouteName={items[0].name} screenOptions={options} drawerContent={(prop) => <CustomDrawer {...prop} children={children} items={items}/>}>
        {items.map((item, index) => <DrawerNav.Screen name={item.name} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} component={item.screen} key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : index}/>)}
      </DrawerNav.Navigator> :
                <DrawerNav.Navigator initialRouteName={items[0].name} screenOptions={options}>
        {items ?
                        items.map((item, index) => (<DrawerNav.Screen key={(item === null || item === void 0 ? void 0 : item.id) ? item.id : index} options={{ headerShown: item === null || item === void 0 ? void 0 : item.showDefaultHeader }} name={item.name} component={item.screen}/>))
                        :
                            <>
          <DrawerNav.Screen name="Home" component={Home}/>
          <DrawerNav.Screen name="About" component={About}/>
          <DrawerNav.Screen name="Contact" component={Contact}/>
        </>}
      </DrawerNav.Navigator>}
    </NavigationContainer>);
};
export default Drawer;