Expo _layout.js drawer displays components

I have created a React Native Expo app with the following file structure

myApp
---- app/
-------- _layout.js
-------- screens/
-------- components/

In my _layout file, I have added all of the screens to the drawer:

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Drawer } from "expo-router/drawer";

export default function Layout() {
    return (
        <GestureHandlerRootView style = {{ "flex": 1 }}>
            <Drawer screenOptions = {{ HEADER-AND-DRAWER-STYLE }}>
                <Drawer.Screen name = "index" options = {{ "drawerLabel": "Home", "title": "Home" }} />
                <Drawer.Screen name = "screens/screen1/screen1" options = {{ "drawerLabel": "Screen 1", "title": "Screen 1" }} />
                <Drawer.Screen name = "screens/screen2/screen2" options = {{ "drawerLabel": "Create Exercise", "title": "Create Exercise" }} />
        </GestureHandlerRootView>
    );
}

This has created a drawer navigator with the screens: Screen 1 and Screen 2. The links lead to the correct screen.

However, all of the directories in the components/ directory are also added to the drawer, with the path as the text displayed.

How can I remove these links from the drawer so that only the links defined inside the _layout file are displayed in the drawer?

Solution

Add "drawerItemStyle": { "display": "none" } to the Drawer tag.

Add "drawerItemStyle": { "display": "flex" } to each Drawer.Screen tag you want to display in the drawer.

The complete code will be:

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Drawer } from "expo-router/drawer";

export default function Layout() {
    return (
        <GestureHandlerRootView style = {{ "flex": 1 }}>
            <Drawer screenOptions = {{ "drawerItemStyle": { "display": "none" } }}>
                <Drawer.Screen name = "index" options = {{ "drawerLabel": "Home", "title": "Home", "drawerItemStyle": { "display": "flex" } }} />
                <Drawer.Screen name = "screens/screen1/screen1" options = {{ "drawerLabel": "Screen 1", "title": "Screen 1", "drawerItemStyle": { "display": "flex" } }} />
                <Drawer.Screen name = "screens/screen2/screen2" options = {{ "drawerLabel": "Create Exercise", "title": "Create Exercise", "drawerItemStyle": { "display": "flex" } }} />
        </GestureHandlerRootView>
    );
}