Added pages and drawer

App.tsx

@@ -1,118 +1,26 @@
-/**
+import 'react-native-gesture-handler';
- * Sample React Native App
+import {NavigationContainer} from '@react-navigation/native';
- * https://github.com/facebook/react-native
+import {createDrawerNavigator} from '@react-navigation/drawer';
- *
- * @format
- */
 
-import React from 'react';
+import Home from './src/Routes/Home/Home';
-import type {PropsWithChildren} from 'react';
+import UserInfo from './src/Routes/UserInfo/UserInfo';
-import {
+import AddNote from './src/Routes/AddNote/AddNote';
-  SafeAreaView,
+import CustomDrawerContent from './src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent';
-  ScrollView,
+import DrawerScreenSettings from './src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings';
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 
-import {
+const Drawer = createDrawerNavigator();
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
 
-type SectionProps = PropsWithChildren<{
+export default function App() {
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
   return (
-    <View style={styles.sectionContainer}>
+    <NavigationContainer>
-      <Text
+      <Drawer.Navigator
-        style={[
+        initialRouteName="Home"
-          styles.sectionTitle,
+        drawerContent={CustomDrawerContent}
-          {
+        screenOptions={DrawerScreenSettings}>
-            color: isDarkMode ? Colors.white : Colors.black,
+        <Drawer.Screen name="Home" component={Home} />
-          },
+        <Drawer.Screen name="Add Note" component={AddNote} />
-        ]}>
+        <Drawer.Screen name="User Info" component={UserInfo} />
-        {title}
+      </Drawer.Navigator>
-      </Text>
+    </NavigationContainer>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
   );
 }
-
-function App(): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;

babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins:[
+    'react-native-reanimated/plugin',
+  ],
 };

package-lock.json

@@ -8,11 +8,15 @@
       "name": "reactnative_notes",
       "version": "0.0.1",
       "dependencies": {
+        "@react-navigation/drawer": "^6.6.2",
         "@react-navigation/native": "^6.1.6",
         "react": "18.2.0",
         "react-native": "0.71.3",
+        "react-native-gesture-handler": "^2.9.0",
+        "react-native-reanimated": "^3.0.1",
         "react-native-safe-area-context": "^4.5.0",
-        "react-native-screens": "^3.20.0"
+        "react-native-screens": "^3.20.0",
+        "react-native-svg": "^13.8.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0",
@@ -1326,6 +1330,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz",
+      "integrity": "sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-super": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
@@ -1843,6 +1861,17 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "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/@eslint/eslintrc": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz",
@@ -4646,6 +4675,36 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/@react-navigation/drawer": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.6.2.tgz",
+      "integrity": "sha512-6qt4guBdz7bkdo/8BLSCcFNdQdSPYyNn05D9cD+VCY3mGThSiD8bRiP9ju+64im7LsSU+bNWXaP8RxA/FtTVQg==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.17",
+        "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.17",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
+      "integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA==",
+      "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.6",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
@@ -4775,6 +4834,11 @@
         "@types/node": "*"
       }
     },
+    "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",
@@ -5797,6 +5861,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "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/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6198,6 +6267,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",
@@ -6211,6 +6292,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",
@@ -6402,6 +6508,44 @@
         "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-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.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -6579,6 +6723,57 @@
         "node": ">=6.0.0"
       }
     },
+    "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.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "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",
@@ -6622,6 +6817,17 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -8303,6 +8509,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/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -10943,14 +11162,18 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "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.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -11206,6 +11429,11 @@
         "node": ">=0.10.0"
       }
     },
+    "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/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -12447,6 +12675,17 @@
         "node": ">=8"
       }
     },
+    "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",
@@ -13297,11 +13536,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.15",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz",
       "integrity": "sha512-7S3pAuPaQJlhax6EZ4JMsDNpj05TfuzX9gPgWLrFfAIWIFLuJ6aDQYAZy2TEI9QJALPoWrj8LWaqP/DGYh14pw=="
     },
+    "node_modules/react-native-reanimated": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.0.1.tgz",
+      "integrity": "sha512-zesX0VwzqUjcD6aY+jlDLqZWMn/nUx8RfIRHUMEn0NzcFHXk3TnMkWL2K/gx4k6NOMhtaBAx866ShRtR+i1hgQ==",
+      "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",
@@ -13324,6 +13598,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.8.0.tgz",
+      "integrity": "sha512-G8Mx6W86da+vFimZBJvA93POw8yz0fgDS5biy6oIjMWVJVQSDzCyzwO/zY0yuZmCDhKSZzogl5m0wXXvW2OcTA==",
+      "dependencies": {
+        "css-select": "^5.1.0",
+        "css-tree": "^1.1.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native/node_modules/@jest/types": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
@@ -13923,6 +14210,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -13987,6 +14279,19 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "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",
@@ -14428,6 +14733,11 @@
         }
       ]
     },
+    "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-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",

package.json

@@ -10,11 +10,15 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "react": "18.2.0",
     "react-native": "0.71.3",
+    "react-native-gesture-handler": "^2.9.0",
+    "react-native-reanimated": "^3.0.1",
     "react-native-safe-area-context": "^4.5.0",
-    "react-native-screens": "^3.20.0"
+    "react-native-screens": "^3.20.0",
+    "react-native-svg": "^13.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/Components/Background/Background.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { View } from "react-native";
+import styles from "../../styles";
+
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Background(props: props) {
+  return (
+    <View style={styles.background}>
+      <View style={{ margin: 8 }} />
+      {props.children}
+    </View>
+  );
+}

src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Text, View, Pressable, GestureResponderEvent } from "react-native";
+import { StyleSheet } from "react-native";
+import styles from "../../../styles";
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+  width: number;
+}
+
+export default function ButtonAlignLeft(props: props) {
+  switch (props.color) {
+    case "Red":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{
+              backgroundColor: "#bc231e",
+              width: props.width,
+              justifyContent: "flex-start",
+            },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Yellow":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{
+              backgroundColor: "#e2b465",
+              width: props.width,
+              justifyContent: "flex-start",
+            },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Green":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{
+              backgroundColor: "#0dbc6a",
+              width: props.width,
+              justifyContent: "flex-start",
+            },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Blue":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{
+              backgroundColor: "#005997",
+              width: props.width,
+              justifyContent: "flex-start",
+            },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+  }
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_baseline,
+        ...{ backgroundColor: "#bc231e" },
+      }}
+    >
+      <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+        Invalid button color specified
+      </Text>
+    </Pressable>
+  );
+}

src/Components/Buttons/ButtonCentered/ButtonCentered.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Text, View, Pressable, GestureResponderEvent } from "react-native";
+import { StyleSheet } from "react-native";
+import styles from "../../../styles";
+
+export interface props {
+  children: React.ReactNode;
+  onPress: (event: GestureResponderEvent) => void;
+  color: string;
+  width: number;
+}
+
+export default function ButtonCentered(props: props) {
+  switch (props.color) {
+    case "Red":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#bc231e", width: props.width },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Yellow":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#e2b465", width: props.width },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Green":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#0dbc6a", width: props.width },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+    case "Blue":
+      return (
+        <Pressable
+          onPress={props.onPress}
+          style={{
+            ...styles.button_baseline,
+            ...{ backgroundColor: "#005997", width: props.width },
+          }}
+        >
+          {props.children}
+        </Pressable>
+      );
+  }
+  return (
+    <Pressable
+      onPress={props.onPress}
+      style={{
+        ...styles.button_baseline,
+        ...{ backgroundColor: "#bc231e" },
+      }}
+    >
+      <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+        Invalid button color specified
+      </Text>
+    </Pressable>
+  );
+}

src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import {DrawerContentScrollView} from '@react-navigation/drawer';
+import {useNavigation} from '@react-navigation/native';
+import {Text, View} from 'react-native';
+import ButtonAlignLeft from '../../../Buttons/ButtonAlignLeft/ButtonAlignLeft';
+import styles from '../../../../styles';
+
+import {RootDrawerParamList} from '../../../../Interfaces/Interfaces';
+
+import AddIcon from '../../../Icons/AddIcon/AddIcon';
+import HomeIcon from '../../../Icons/HomeIcon/HomeIcon';
+import LoginIcon from '../../../Icons/LoginIcon/LoginIcon';
+import SignupIcon from '../../../Icons/SignupIcon/SignupIcon';
+import UserIcon from '../../../Icons/UserIcon/UserIcon';
+import AppIcon from '../../../Icons/AppIcon/AppIcon';
+
+export default function CustomDrawerContent(props: {}) {
+  const navigation = useNavigation<RootDrawerParamList>();
+  let width = 224;
+  return (
+    <DrawerContentScrollView {...props}>
+      <View>
+        <View style={{...styles.flex_row, ...{marginLeft: 16}}}>
+          <AppIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+            Clip Notes
+          </Text>
+        </View>
+        <ButtonAlignLeft
+          color="Blue"
+          width={width}
+          onPress={() => {
+            navigation.navigate('Home');
+          }}>
+          <HomeIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>Home</Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Green"
+          width={width}
+          onPress={() => {
+            navigation.navigate('Add Note');
+          }}>
+          <AddIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+            Add Note
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Green"
+          width={width}
+          onPress={() => {
+            navigation.navigate('Login');
+          }}>
+          <LoginIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Yellow"
+          width={width}
+          onPress={() => {
+            navigation.navigate('User Info');
+          }}>
+          <UserIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+            User Info
+          </Text>
+        </ButtonAlignLeft>
+        <ButtonAlignLeft
+          color="Yellow"
+          width={width}
+          onPress={() => {
+            navigation.navigate('Register');
+          }}>
+          <SignupIcon size={32} color="white" />
+          <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+            Register
+          </Text>
+        </ButtonAlignLeft>
+      </View>
+    </DrawerContentScrollView>
+  );
+}

src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx

@@ -0,0 +1,25 @@
+import { View, Image, Text } from "react-native";
+import type { DrawerNavigationOptions } from "@react-navigation/drawer";
+import AppIcon from "../../Icons/AppIcon/AppIcon";
+const DrawerScreenSettings: DrawerNavigationOptions = {
+  headerTitleStyle: { color: "white", fontSize: 26 },
+  unmountOnBlur: true,
+  headerStyle: { backgroundColor: "#0087e4" },
+  headerTintColor: "white",
+  drawerType: "slide",
+  drawerLabelStyle: {
+    color: "white",
+  },
+  drawerStyle: {
+    backgroundColor: "#002d4d",
+    width: 260,
+  },
+  headerRight: () => (
+    <View
+      style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
+    >
+      <AppIcon size={32} color="white" />
+    </View>
+  ),
+};
+export default DrawerScreenSettings;

src/Components/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/Components/Icons/AppIcon/AppIcon.tsx

@@ -0,0 +1,27 @@
+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
+        width={props.size + "px"}
+        height={props.size + "px"}
+        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 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></Path>
+        <Path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></Path>
+        <Path d="M9 12h6"></Path>
+        <Path d="M9 16h6"></Path>
+      </Svg>
+    </>
+  );
+}

src/Components/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/Components/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/Components/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/Components/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,8 @@
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+export interface RootDrawerParamList {
+  navigate: any;
+}

src/Routes/AddNote/AddNote.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import styles from "../../styles";
+import Background from "../../Components/Background/Background";
+
+export interface props {}
+
+export default function AddNote(props: props) {
+  return (
+    <Background>
+      <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+        Add Note
+      </Text>
+    </Background>
+  );
+}

src/Routes/Home/Home.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import {View, Text} from 'react-native';
+import styles from '../../styles';
+import Background from '../../Components/Background/Background';
+import {useNavigation} from '@react-navigation/native';
+import {RootDrawerParamList} from '../../Interfaces/Interfaces';
+import AppIcon from '../../Components/Icons/AppIcon/AppIcon';
+import Button from '../../Components/Buttons/ButtonCentered/ButtonCentered';
+import HomeIcon from '../../Components/Icons/HomeIcon/HomeIcon';
+import AddIcon from '../../Components/Icons/AddIcon/AddIcon';
+import UserIcon from '../../Components/Icons/UserIcon/UserIcon';
+import LoginIcon from '../../Components/Icons/LoginIcon/LoginIcon';
+import SignupIcon from '../../Components/Icons/SignupIcon/SignupIcon';
+
+export interface props {}
+
+export default function Home(props: props) {
+  const navigation = useNavigation<RootDrawerParamList>();
+  return (
+    <Background>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+        <AppIcon size={64} color="white" />
+        <Text style={{...styles.text_white, ...{fontSize: 32}}}>
+          Clip Notes
+        </Text>
+      </View>
+      <View style={{margin: 16}} />
+    </Background>
+  );
+}

src/Routes/UserInfo/UserInfo.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import styles from "../../styles";
+import Background from "../../Components/Background/Background";
+
+export interface props {}
+
+export default function UserInfo(props: props) {
+  return (
+    <Background>
+      <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
+        UserInfo
+      </Text>
+    </Background>
+  );
+}

src/styles.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet } from "react-native";
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: "#002d4c",
+    height: "100%",
+    width: "100%",
+  },
+  text_white: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  button_baseline: {
+    justifyContent: "center",
+    alignSelf: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    margin: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+  flex_row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  flex_column: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+});
+
+export default styles;