Added Drawer to app.js allowing the ability to switch between module crudler and user crudler

App.js

@@ -8,80 +8,82 @@ import UserModifyScreen from "./src/components/screens/UserModifyScreen";
 import UserViewScreen from "./src/components/screens/UserViewScreen";
 import UserAddScreen from "./src/components/screens/UserAddScreen";
 import UserListScreen from "./src/components/screens/UserListScreen";
-import { createDrawerNavigator } from '@react-navigation/drawer';
+import {createDrawerNavigator} from '@react-navigation/drawer';
 
 const Drawer = createDrawerNavigator();
 const Stack = createNativeStackNavigator();
 
-export const App = () => {
+const ModuleStack = () => (
-//   Initialisation -------------
-//   State ----------------------
-//   Handlers -------------------
-//   View -----------------------
-    return (
-        <NavigationContainer>
     <Stack.Navigator
         initialRouteName='ModuleListScreen'
         screenOptions={{
-                    headerStyle: {backgroundColor: "black"},
+            headerShown: false  // Hide stack headers
-                    headerTintColor: "white"
         }}
     >
         <Stack.Screen
             name="ModuleListScreen"
             component={ModuleListScreen}
-                    options={{title: 'List Modules'}}
         />
-
         <Stack.Screen
             name="ModuleAddScreen"
             component={ModuleAddScreen}
-                    options={{title: 'Add Modules'}}
         />
-
         <Stack.Screen
             name="ModuleViewScreen"
             component={ModuleViewScreen}
-                    options={{title: 'View Modules'}}
         />
-
         <Stack.Screen
             name="ModuleModifyScreen"
             component={ModuleModifyScreen}
-                    options={{title: 'Modify Modules'}}
         />
+    </Stack.Navigator>
+);
 
-                {/*USERS SECTION BELOW*/}
+const UserStack = () => (
-
+    <Stack.Navigator
+        screenOptions={{
+            headerShown: false  // Hide stack headers
+        }}
+    >
         <Stack.Screen
             name="UserListScreen"
             component={UserListScreen}
-                    options={{title: 'List Users'}}
         />
-
         <Stack.Screen
             name="UserAddScreen"
             component={UserAddScreen}
-                    options={{title: 'Add Users'}}
         />
-
         <Stack.Screen
             name="UserViewScreen"
             component={UserViewScreen}
-                    options={{title: 'View Users'}}
         />
-
         <Stack.Screen
             name="UserModifyScreen"
             component={UserModifyScreen}
-                    options={{title: 'Modify Users'}}
         />
-
-
     </Stack.Navigator>
+);
+
+export const App = () => {
+    return (
+        <NavigationContainer>
+            <Drawer.Navigator
+                screenOptions={{
+                    headerStyle: {backgroundColor: "black"},
+                    headerTintColor: "white"
+                }}
+            >
+                <Drawer.Screen
+                    name="Module Crudler"
+                    component={ModuleStack}
+                />
+                <Drawer.Screen
+                    name="User Crudler"
+                    component={UserStack}
+                />
+            </Drawer.Navigator>
         </NavigationContainer>
-    )
+    );
-        ;
 };
 
 export default App;