Added react navigation drawer, initial template pages, and drawer sidebar design

App.tsx

@@ -1,20 +1,28 @@
-import { StatusBar } from "expo-status-bar";
+import "react-native-gesture-handler";
-import { StyleSheet, Text, View } from "react-native";
+import { NavigationContainer } from "@react-navigation/native";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+
+import CustomDrawerContent from "./src/components/DrawerSettings/CustomDrawerContent";
+import DrawerScreenSettings from "./src/components/DrawerSettings/DrawerScreenSettings";
+
+import Home from "./src/routes/Home/Home";
+import Login from "./src/routes/Login/Login";
+import Register from "./src/routes/Register/Register";
+
+const Drawer = createDrawerNavigator();
 
 export default function App() {
   return (
-    <View style={styles.container}>
+    <NavigationContainer>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Drawer.Navigator
-      <StatusBar style="auto" />
+        initialRouteName="Home"
-    </View>
+        drawerContent={CustomDrawerContent}
+        screenOptions={DrawerScreenSettings}
+      >
+        <Drawer.Screen name="Home" component={Home} />
+        <Drawer.Screen name="Login" component={Login} />
+        <Drawer.Screen name="Register" component={Register} />
+      </Drawer.Navigator>
+    </NavigationContainer>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

babel.config.js

@@ -2,5 +2,8 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin',
+    ]
   };
 };

package-lock.json

@@ -8,12 +8,17 @@
       "name": "stude_frontend",
       "version": "1.0.0",
       "dependencies": {
+        "@react-navigation/drawer": "^6.6.3",
+        "@react-navigation/native-stack": "^6.9.13",
         "expo": "~48.0.18",
         "expo-status-bar": "~1.4.4",
         "react": "18.2.0",
         "react-native": "0.71.8",
+        "react-native-gesture-handler": "~2.9.0",
+        "react-native-reanimated": "~2.14.4",
         "react-native-safe-area-context": "4.5.0",
-        "react-native-screens": "~3.20.0"
+        "react-native-screens": "~3.20.0",
+        "react-native-svg": "13.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -1348,6 +1353,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.22.5.tgz",
+      "integrity": "sha512-iDhx9ARkXq4vhZ2CYOSnQXkmxkDgosLi3J8Z17mKz7LyzthtkdVchLD7WZ3aXeCuvJDOW3+1I5TpJmwIbF9MKQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
@@ -1949,6 +1968,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -4896,6 +4926,124 @@
       "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
       "integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
     },
+    "node_modules/@react-navigation/core": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz",
+      "integrity": "sha512-G9GH7bP9x0qqupxZnkSftnkn4JoXancElTvFc8FVGfEvxnxP+gBo3wqcknyBi7M5Vad4qecsYjCOa9wqsftv9g==",
+      "peer": true,
+      "dependencies": {
+        "@react-navigation/routers": "^6.1.9",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "peer": true
+    },
+    "node_modules/@react-navigation/drawer": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.6.3.tgz",
+      "integrity": "sha512-oQzHqH6svtSIun6+rikQtku6ye2CyyxT4xf3RQLVsBvK7+g4tDdKKLcjgoJmuT1zBZC3SSu3wNeqp8cg4cr2PQ==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.18",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-reanimated": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "1.3.18",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.18.tgz",
+      "integrity": "sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.7.tgz",
+      "integrity": "sha512-W6E3+AtTombMucCRo6q7vPmluq8hSjS+IxfazJ/SokOe7ChJX7eLvvralIsJkjFj3iWV1KgOSnHxa6hdiFasBw==",
+      "peer": true,
+      "dependencies": {
+        "@react-navigation/core": "^6.4.9",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native-stack": {
+      "version": "6.9.13",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.13.tgz",
+      "integrity": "sha512-ejlepMrvFneewL+XlXHHhn+6y3lwvavM4/R7XwBV0XJxCymujexK+7Vkg7UcvJ1lx4CRhOcyBSNfGmdNIHREyQ==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.18",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -4944,6 +5092,11 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.41",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
+      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -5548,6 +5701,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/bplist-creator": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
@@ -6106,6 +6264,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6119,6 +6289,31 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/colorette": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
@@ -6348,6 +6543,52 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -6549,6 +6790,57 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6580,6 +6872,17 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/env-editor": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz",
@@ -7118,6 +7421,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "peer": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
@@ -7213,6 +7522,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -7698,6 +8016,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -9166,6 +9497,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -9290,6 +9626,11 @@
       "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
       "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10467,6 +10808,24 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -10626,6 +10985,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -11320,6 +11690,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "peer": true,
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -11497,11 +11885,46 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz",
+      "integrity": "sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gradle-plugin": {
       "version": "0.71.19",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz",
       "integrity": "sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ=="
     },
+    "node_modules/react-native-reanimated": {
+      "version": "2.14.4",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz",
+      "integrity": "sha512-DquSbl7P8j4SAmc+kRdd75Ianm8G+IYQ9T4AQ6lrpLVeDkhZmjWI0wkutKWnp6L7c5XNVUrFDUf69dwETLCItQ==",
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^1.7.0",
+        "invariant": "^2.2.4",
+        "lodash.isequal": "^4.5.0",
+        "setimmediate": "^1.0.5",
+        "string-hash-64": "^1.0.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",
@@ -11524,6 +11947,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.4.0.tgz",
+      "integrity": "sha512-B3TwK+H0+JuRhYPzF21AgqMt4fjhCwDZ9QUtwNstT5XcslJBXC0FoTkdZo8IEb1Sv4suSqhZwlAY6lwOv3tHag==",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native/node_modules/promise": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
@@ -12100,6 +12536,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -12369,6 +12818,15 @@
         "node": "*"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -12543,6 +13001,15 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -12551,6 +13018,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/string-hash-64": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
+      "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -13323,6 +13795,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
+      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "peer": true,
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

package.json

@@ -9,12 +9,17 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/drawer": "^6.6.3",
+    "@react-navigation/native-stack": "^6.9.13",
     "expo": "~48.0.18",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
     "react-native": "0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
-    "react-native-safe-area-context": "4.5.0"
+    "react-native-svg": "13.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/Button/DrawerButton.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Text, Pressable, GestureResponderEvent } from "react-native";
+import styles from "../../styles";
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+}
+
+export default function DrawerButton(props: props) {
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_template,
+        ...{ backgroundColor: props.color, width: "95%" },
+      }}
+    >
+      {props.children}
+    </Pressable>
+  );
+}

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { DrawerContentScrollView } from "@react-navigation/drawer";
+import { useNavigation } from "@react-navigation/native";
+import { Text, View } from "react-native";
+import { colors } from "../../styles";
+import styles from "../../styles";
+
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import AppIcon from "../../icons/AppIcon/AppIcon";
+import HomeIcon from "../../icons/HomeIcon/HomeIcon";
+import LoginIcon from "../../icons/LoginIcon/LoginIcon";
+import SignupIcon from "../../icons/SignupIcon/SignupIcon";
+import DrawerButton from "../Button/DrawerButton";
+
+export default function CustomDrawerContent(props: {}) {
+  const navigation = useNavigation<RootDrawerParamList>();
+  return (
+    <DrawerContentScrollView {...props}>
+      <View
+        style={{
+          ...styles.flex_row,
+          ...{ justifyContent: "center" },
+        }}
+      >
+        <AppIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Stud-E</Text>
+      </View>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Home");
+        }}
+      >
+        <HomeIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Home</Text>
+      </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Login");
+        }}
+      >
+        <LoginIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Login</Text>
+      </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Register");
+        }}
+      >
+        <SignupIcon size={32} color={colors.icon_color} />
+        <Text style={styles.text_white_medium}>Register</Text>
+      </DrawerButton>
+    </DrawerContentScrollView>
+  );
+}

src/components/DrawerSettings/DrawerScreenSettings.tsx

@@ -0,0 +1,31 @@
+import type { DrawerNavigationOptions } from "@react-navigation/drawer";
+import { View } from "react-native";
+import { colors } from "../../styles";
+import { font_sizes } from "../../styles";
+import AppIcon from "../../icons/AppIcon/AppIcon";
+
+const DrawerScreenSettings: DrawerNavigationOptions = {
+  headerTitleStyle: {
+    color: colors.text_default,
+    fontSize: font_sizes.medium,
+  },
+  unmountOnBlur: true,
+  headerStyle: { backgroundColor: colors.blue_3 },
+  headerTintColor: colors.text_default,
+  drawerType: "slide",
+  drawerLabelStyle: {
+    color: colors.text_default,
+  },
+  drawerStyle: {
+    backgroundColor: colors.blue_3,
+    width: 260,
+  },
+  headerRight: () => (
+    <View
+      style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
+    >
+      <AppIcon size={32} color={colors.icon_color} />
+    </View>
+  ),
+};
+export default DrawerScreenSettings;

src/icons/AddIcon/AddIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function AddIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></Path>
+        <Path d="M9 12l6 0"></Path>
+        <Path d="M12 9l0 6"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/AppIcon/AppIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function AppIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        fill={props.color}
+        height={props.size + "px"}
+        width={props.size + "px"}
+        viewBox="0 0 375.775 375.775"
+      >
+        <Path d="M187.886,375.775c-16.216,0-29.409-13.193-29.409-29.411s13.193-29.412,29.409-29.412c16.218,0,29.412,13.194,29.412,29.412 S204.104,375.775,187.886,375.775z M187.886,332.952c-7.394,0-13.409,6.017-13.409,13.412c0,7.395,6.015,13.411,13.409,13.411 c7.395,0,13.412-6.017,13.412-13.411C201.298,338.969,195.281,332.952,187.886,332.952z M244.851,342.665 c-3.207,0-6.233-1.941-7.461-5.11c-1.597-4.12,0.449-8.754,4.568-10.351c40.127-15.554,71.73-47.612,86.706-87.957 c1.537-4.142,6.142-6.253,10.284-4.716s6.253,6.142,4.716,10.284c-16.568,44.633-51.531,80.101-95.924,97.307 C246.79,342.49,245.812,342.665,244.851,342.665z M130.671,342.665c-0.961,0-1.939-0.174-2.889-0.543 c-44.393-17.206-79.356-52.674-95.925-97.307c-1.538-4.143,0.574-8.746,4.716-10.284c4.144-1.538,8.746,0.573,10.284,4.716 c14.977,40.345,46.58,72.403,86.707,87.957c4.12,1.597,6.165,6.23,4.568,10.351C136.904,340.724,133.877,342.665,130.671,342.665z M196.589,305.682h-17.403c-25.12,0-36.188-20.112-42.33-35.241l-2.277-5.612c-1.661-4.095,0.312-8.76,4.406-10.421 c4.095-1.662,8.759,0.312,10.42,4.405l2.276,5.612c3.44,8.475,7.034,14.579,11.16,18.661l18.583-25.466 c1.506-2.063,3.907-3.284,6.462-3.284c2.555,0,4.956,1.22,6.462,3.284l18.585,25.465c4.126-4.082,7.719-10.187,11.159-18.662 l2.277-5.611c1.661-4.095,6.327-6.064,10.421-4.404c4.094,1.662,6.066,6.327,4.404,10.422l-2.277,5.611 C232.778,285.568,221.71,305.682,196.589,305.682z M177.857,289.652c0.438,0.02,0.88,0.029,1.329,0.029h17.402 c0.45,0,0.892-0.01,1.331-0.029l-10.031-13.745L177.857,289.652z M113.951,241.785c-1.002,0-2.02-0.189-3.005-0.589l-5.611-2.277 c-15.129-6.142-35.242-17.21-35.242-42.33v-17.401c0-25.12,20.113-36.189,35.241-42.33l5.612-2.278 c4.092-1.661,8.759,0.311,10.421,4.404c1.662,4.095-0.31,8.76-4.404,10.422l-5.611,2.277c-8.475,3.439-14.579,7.032-18.662,11.158 l25.467,18.585c2.064,1.506,3.284,3.907,3.284,6.462s-1.22,4.956-3.284,6.462l-25.467,18.584c4.082,4.126,10.187,7.72,18.662,11.159 l5.611,2.277c4.094,1.662,6.066,6.327,4.404,10.422C120.105,239.9,117.111,241.785,113.951,241.785z M86.123,177.855 c-0.02,0.438-0.03,0.881-0.03,1.33v17.403c0,0.449,0.01,0.893,0.03,1.33l13.747-10.031L86.123,177.855z M261.823,241.785 c-3.161,0-6.154-1.885-7.416-4.994c-1.661-4.094,0.311-8.76,4.405-10.421l5.612-2.277c8.475-3.44,14.579-7.033,18.661-11.159 l-25.467-18.584c-2.064-1.506-3.284-3.907-3.284-6.462s1.22-4.956,3.284-6.462l25.466-18.585 c-4.082-4.125-10.187-7.719-18.661-11.158l-5.611-2.277c-4.094-1.661-6.066-6.327-4.405-10.421s6.328-6.064,10.421-4.405 l5.612,2.277c15.129,6.142,35.242,17.21,35.242,42.329v17.403c0,25.12-20.112,36.188-35.241,42.329l-5.613,2.278 C263.843,241.596,262.825,241.785,261.823,241.785z M275.906,187.888l13.746,10.031c0.02-0.438,0.03-0.881,0.03-1.33v-17.401 c0-0.449-0.01-0.894-0.03-1.332L275.906,187.888z M346.363,217.299c-16.217,0-29.411-13.193-29.411-29.41 c0-16.218,13.194-29.412,29.411-29.412c16.218,0,29.412,13.194,29.412,29.412C375.775,204.105,362.581,217.299,346.363,217.299z M346.363,174.477c-7.395,0-13.411,6.017-13.411,13.412c0,7.395,6.016,13.41,13.411,13.41c7.395,0,13.412-6.016,13.412-13.41 C359.775,180.493,353.758,174.477,346.363,174.477z M29.411,217.299c-16.217,0-29.41-13.193-29.41-29.41 c0-16.218,13.193-29.412,29.41-29.412c16.217,0,29.411,13.194,29.411,29.412C58.822,204.105,45.628,217.299,29.411,217.299z M29.411,174.477c-7.395,0-13.41,6.017-13.41,13.412c0,7.395,6.016,13.41,13.41,13.41c7.395,0,13.411-6.016,13.411-13.41 C42.822,180.493,36.806,174.477,29.411,174.477z M336.165,140.768c-3.249,0-6.304-1.993-7.501-5.218 c-14.976-40.345-46.579-72.403-86.706-87.957c-4.12-1.597-6.165-6.23-4.568-10.351c1.596-4.119,6.231-6.168,10.351-4.567 c44.393,17.206,79.355,52.673,95.924,97.307c1.538,4.143-0.574,8.747-4.716,10.284C338.03,140.606,337.089,140.768,336.165,140.768z M39.356,140.768c-0.925,0-1.865-0.161-2.783-0.502c-4.142-1.538-6.253-6.143-4.716-10.284 c16.569-44.634,51.532-80.101,95.925-97.307c4.119-1.596,8.753,0.448,10.351,4.567c1.597,4.12-0.449,8.754-4.568,10.351 c-40.126,15.554-71.73,47.612-86.707,87.957C45.66,138.773,42.604,140.768,39.356,140.768z M141.99,121.957 c-1.001,0-2.02-0.189-3.004-0.589c-4.094-1.661-6.067-6.326-4.406-10.421l2.276-5.611c6.142-15.13,17.211-35.243,42.33-35.243 h17.402c25.121,0,36.189,20.113,42.33,35.242l2.277,5.611c1.662,4.095-0.31,8.76-4.404,10.422c-4.096,1.659-8.76-0.312-10.421-4.404 l-2.277-5.611c-3.44-8.476-7.033-14.58-11.159-18.663l-18.585,25.466c-1.506,2.063-3.907,3.284-6.462,3.284l0,0 c-2.555,0-4.957-1.221-6.462-3.284l-18.583-25.466c-4.126,4.082-7.72,10.188-11.16,18.663l-2.276,5.61 C148.145,120.071,145.15,121.957,141.99,121.957z M177.857,86.122l10.031,13.746l10.031-13.746c-0.438-0.02-0.881-0.029-1.33-0.029 h-17.403C178.737,86.093,178.294,86.103,177.857,86.122z M187.886,58.822c-16.216,0-29.409-13.193-29.409-29.411S171.67,0,187.886,0 c16.218,0,29.412,13.193,29.412,29.411S204.104,58.822,187.886,58.822z M187.886,16c-7.394,0-13.409,6.017-13.409,13.411 s6.015,13.411,13.409,13.411c7.395,0,13.412-6.017,13.412-13.411S195.281,16,187.886,16z"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/HomeIcon/HomeIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function HomeIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M5 12l-2 0l9 -9l9 9l-2 0"></Path>
+        <Path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></Path>
+        <Path d="M10 12h4v4h-4z"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/LoginIcon/LoginIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function LoginIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
+        <Path d="M20 12h-13l3 -3m0 6l-3 -3"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/LogoutIcon/LogoutIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function LogoutIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
+        <Path d="M7 12h14l-3 -3m0 6l3 -3"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/SignupIcon/SignupIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function SignupIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
+        <Path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
+        <Path d="M16 11h6m-3 -3v6"></Path>
+      </Svg>
+    </>
+  );
+}

src/icons/UserIcon/UserIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "../../interfaces/Interfaces";
+
+import { Svg, Path } from "react-native-svg";
+
+export default function UserIcon(props: IconProps) {
+  return (
+    <>
+      <Svg
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
+        <Path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
+        <Path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
+      </Svg>
+    </>
+  );
+}

src/interfaces/Interfaces.tsx

@@ -0,0 +1,41 @@
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+export interface RootDrawerParamList {
+  navigate: any;
+}
+
+// Redux Interfaces
+export interface LoginState {
+  Login: { logged_in: boolean };
+}
+
+export interface LoggedInUserState {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
+
+// API Interfaces
+
+export interface RegistrationParams {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ActivationParams {
+  uid: string;
+  token: string;
+}

src/routes/Home/Home.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import styles from "../../styles";
+import { font_sizes } from "../../styles";
+import { View, Text } from "react-native";
+
+export default function Home() {
+  return (
+    <View style={styles.background}>
+      <Text
+        style={{
+          fontSize: font_sizes.large,
+          color: "white",
+          textAlign: "center",
+        }}
+      >
+        Template Homepage
+      </Text>
+    </View>
+  );
+}

src/routes/Login/Login.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import styles from "../../styles";
+import { font_sizes } from "../../styles";
+import { View, Text } from "react-native";
+
+export default function Login() {
+  return (
+    <View style={styles.background}>
+      <Text
+        style={{
+          fontSize: font_sizes.large,
+          color: "white",
+          textAlign: "center",
+        }}
+      >
+        Template Login Page
+      </Text>
+    </View>
+  );
+}

src/routes/Register/Register.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import styles from "../../styles";
+import { font_sizes } from "../../styles";
+import { View, Text } from "react-native";
+
+export default function Register() {
+  return (
+    <View style={styles.background}>
+      <Text
+        style={{
+          fontSize: font_sizes.large,
+          color: "white",
+          textAlign: "center",
+        }}
+      >
+        Template Register Page
+      </Text>
+    </View>
+  );
+}

src/styles.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet } from "react-native";
+
+export const colors = {
+  orange_1: "#FFBC72",
+  orange_2: "#FFE2C1",
+  orange_3: "#C07624",
+  blue_1: "#4C87A1",
+  blue_2: "#77ACC3",
+  blue_3: "#1B5D79",
+  text_default: "white",
+  icon_color: "white",
+};
+
+export const font_sizes = {
+  tiny: 12,
+  small: 16,
+  medium: 24,
+  large: 36,
+  xl: 48,
+};
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: colors.orange_1,
+    height: "100%",
+    width: "100%",
+  },
+  flex_row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  flex_column: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  text_white_tiny: {
+    color: colors.text_default,
+    fontSize: font_sizes.tiny,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_small: {
+    color: colors.text_default,
+    fontSize: font_sizes.small,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_medium: {
+    color: colors.text_default,
+    fontSize: font_sizes.medium,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_large: {
+    color: colors.text_default,
+    fontSize: font_sizes.large,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  text_white_xl: {
+    color: colors.text_default,
+    fontSize: font_sizes.xl,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  button_template: {
+    justifyContent: "flex-start",
+    alignSelf: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    margin: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+});
+
+export default styles;