From 95255a49c14807102f0881578b54e8a030cfcba4 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 5 Mar 2023 21:37:52 +0800 Subject: [PATCH] Added pages and basic drawer --- App.tsx | 42 +- babel.config.js | 3 + package-lock.json | 485 +++++++++++++++++- package.json | 9 +- src/Components/Background/Background.tsx | 16 + .../ButtonAlignLeft/ButtonAlignLeft.tsx | 88 ++++ .../Buttons/ButtonCentered/ButtonCentered.tsx | 72 +++ .../CustomDrawerContent.tsx | 91 ++++ .../DrawerScreenSettings.tsx | 25 + src/Components/Icons/AddIcon/AddIcon.tsx | 26 + src/Components/Icons/AppIcon/AppIcon.tsx | 27 + src/Components/Icons/HomeIcon/HomeIcon.tsx | 26 + src/Components/Icons/LoginIcon/LoginIcon.tsx | 25 + .../Icons/SignupIcon/SignupIcon.tsx | 26 + src/Components/Icons/UserIcon/UserIcon.tsx | 25 + src/Interfaces/Interfaces.tsx | 8 + src/Routes/AddNote/AddNote.tsx | 12 + src/Routes/Home/Home.tsx | 25 + src/Routes/Login/Login.tsx | 12 + src/Routes/Register/Register.tsx | 12 + src/Routes/UserInfo/UserInfo.tsx | 12 + src/styles.tsx | 35 ++ 22 files changed, 1085 insertions(+), 17 deletions(-) create mode 100644 src/Components/Background/Background.tsx create mode 100644 src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx create mode 100644 src/Components/Buttons/ButtonCentered/ButtonCentered.tsx create mode 100644 src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx create mode 100644 src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx create mode 100644 src/Components/Icons/AddIcon/AddIcon.tsx create mode 100644 src/Components/Icons/AppIcon/AppIcon.tsx create mode 100644 src/Components/Icons/HomeIcon/HomeIcon.tsx create mode 100644 src/Components/Icons/LoginIcon/LoginIcon.tsx create mode 100644 src/Components/Icons/SignupIcon/SignupIcon.tsx create mode 100644 src/Components/Icons/UserIcon/UserIcon.tsx create mode 100644 src/Interfaces/Interfaces.tsx create mode 100644 src/Routes/AddNote/AddNote.tsx create mode 100644 src/Routes/Home/Home.tsx create mode 100644 src/Routes/Login/Login.tsx create mode 100644 src/Routes/Register/Register.tsx create mode 100644 src/Routes/UserInfo/UserInfo.tsx create mode 100644 src/styles.tsx diff --git a/App.tsx b/App.tsx index 0329d0c..afa01b4 100644 --- a/App.tsx +++ b/App.tsx @@ -1,20 +1,32 @@ -import { StatusBar } from 'expo-status-bar'; -import { StyleSheet, Text, View } from 'react-native'; +import "react-native-gesture-handler"; +import { NavigationContainer } from "@react-navigation/native"; +import { createDrawerNavigator } from "@react-navigation/drawer"; + +import CustomDrawerContent from "./src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent"; +import DrawerScreenSettings from "./src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings"; + +import Home from "./src/Routes/Home/Home"; +import UserInfo from "./src/Routes/UserInfo/UserInfo"; +import AddNote from "./src/Routes/AddNote/AddNote"; +import Login from "./src/Routes/Login/Login"; +import Register from "./src/Routes/Register/Register"; + +const Drawer = createDrawerNavigator(); export default function App() { return ( - - Open up App.tsx to start working on your app! - - + + + + + + + + + ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center', - }, -}); diff --git a/babel.config.js b/babel.config.js index 2900afe..edf8ee7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,5 +2,8 @@ module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], + plugins:[ + 'react-native-reanimated/plugin', + ] }; }; diff --git a/package-lock.json b/package-lock.json index 8e99d03..07e39bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,17 @@ "name": "reactnative-notes", "version": "1.0.0", "dependencies": { + "@react-navigation/drawer": "^6.6.2", + "@react-navigation/native": "^6.1.6", "expo": "~48.0.5", "expo-status-bar": "~1.4.4", "react": "18.2.0", - "react-native": "0.71.3" + "react-native": "0.71.3", + "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-svg": "13.4.0" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -1303,6 +1310,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", @@ -1785,6 +1806,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", @@ -4753,6 +4785,102 @@ "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.8", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz", + "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==", + "dependencies": { + "@react-navigation/routers": "^6.1.8", + "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==", + "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==" + }, + "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", + "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==", + "dependencies": { + "@react-navigation/core": "^6.4.8", + "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/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==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@react-navigation/routers": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz", + "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==", + "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", @@ -4801,6 +4929,11 @@ "@sinonjs/commons": "^2.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", @@ -5405,6 +5538,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", @@ -5955,6 +6093,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", @@ -5968,6 +6118,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", @@ -6216,6 +6391,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.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", @@ -6417,6 +6638,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.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", @@ -6448,6 +6720,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/env-editor": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/env-editor/-/env-editor-0.4.2.tgz", @@ -6986,6 +7269,11 @@ "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==" + }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -7075,6 +7363,14 @@ "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==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", @@ -7548,6 +7844,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", @@ -9011,6 +9320,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", @@ -9135,6 +9449,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", @@ -10311,6 +10630,17 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nanoid": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "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", @@ -10470,6 +10800,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", @@ -11164,6 +11505,23 @@ "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==", + "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", @@ -11264,6 +11622,17 @@ } } }, + "node_modules/react-freeze": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz", + "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -11330,11 +11699,81 @@ "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": "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", + "integrity": "sha512-0WORnk9SkREGUg2V7jHZbuN5x4vcxj/1B0QOcXJjdYWrzZHgLcUzYWWIUecUPJh747Mwjt/42RZDOaFn3L8kPQ==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-screens": { + "version": "3.20.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.20.0.tgz", + "integrity": "sha512-joWUKWAVHxymP3mL9gYApFHAsbd9L6ZcmpoZa6Sl3W/82bvvNVMqcfP7MeNqVCg73qZ8yL4fW+J/syusHleUgg==", + "dependencies": { + "react-freeze": "^1.0.0", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "react": "*", + "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", @@ -11903,6 +12342,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", @@ -12172,6 +12624,14 @@ "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==", + "engines": { + "node": ">=6" + } + }, "node_modules/split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -12346,6 +12806,14 @@ "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==", + "engines": { + "node": ">=4" + } + }, "node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -12354,6 +12822,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", @@ -13121,6 +13594,11 @@ "node": ">=0.10.0" } }, + "node_modules/use-latest-callback": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.5.tgz", + "integrity": "sha512-HtHatS2U4/h32NlkhupDsPlrbiD27gSH5swBdtXbCAlc6pfOFzaj0FehW/FO12rx8j2Vy4/lJScCiJyM01E+bQ==" + }, "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", @@ -13185,6 +13663,11 @@ "makeerror": "1.0.12" } }, + "node_modules/warn-once": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz", + "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==" + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index e16d27b..b7cf8f0 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,17 @@ "web": "expo start --web" }, "dependencies": { + "@react-navigation/drawer": "^6.6.2", + "@react-navigation/native": "^6.1.6", "expo": "~48.0.5", "expo-status-bar": "~1.4.4", "react": "18.2.0", - "react-native": "0.71.3" + "react-native": "0.71.3", + "react-native-safe-area-context": "4.5.0", + "react-native-screens": "~3.20.0", + "react-native-gesture-handler": "~2.9.0", + "react-native-reanimated": "~2.14.4", + "react-native-svg": "13.4.0" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/Components/Background/Background.tsx b/src/Components/Background/Background.tsx new file mode 100644 index 0000000..b8052ee --- /dev/null +++ b/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 ( + + + {props.children} + + ); +} diff --git a/src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx b/src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx new file mode 100644 index 0000000..013297d --- /dev/null +++ b/src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx @@ -0,0 +1,88 @@ +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 ( + + {props.children} + + ); + case 'Yellow': + return ( + + {props.children} + + ); + case 'Green': + return ( + + {props.children} + + ); + case 'Blue': + return ( + + {props.children} + + ); + } + return ( + + + Invalid button color specified + + + ); +} diff --git a/src/Components/Buttons/ButtonCentered/ButtonCentered.tsx b/src/Components/Buttons/ButtonCentered/ButtonCentered.tsx new file mode 100644 index 0000000..a240005 --- /dev/null +++ b/src/Components/Buttons/ButtonCentered/ButtonCentered.tsx @@ -0,0 +1,72 @@ +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 ( + + {props.children} + + ); + case 'Yellow': + return ( + + {props.children} + + ); + case 'Green': + return ( + + {props.children} + + ); + case 'Blue': + return ( + + {props.children} + + ); + } + return ( + + + Invalid button color specified + + + ); +} diff --git a/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx new file mode 100644 index 0000000..b104bc9 --- /dev/null +++ b/src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx @@ -0,0 +1,91 @@ +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(); + const width = 224; + return ( + + + + + Clip Notes + + + { + navigation.navigate("Home"); + }} + > + + Home + + { + navigation.navigate("Add Note"); + }} + > + + + Add Note + + + { + navigation.navigate("Login"); + }} + > + + Login + + { + navigation.navigate("User Info"); + }} + > + + + User Info + + + { + navigation.navigate("Register"); + }} + > + + + Register + + + + ); +} diff --git a/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx b/src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx new file mode 100644 index 0000000..541d342 --- /dev/null +++ b/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: () => ( + + + + ), +}; +export default DrawerScreenSettings; diff --git a/src/Components/Icons/AddIcon/AddIcon.tsx b/src/Components/Icons/AddIcon/AddIcon.tsx new file mode 100644 index 0000000..167179c --- /dev/null +++ b/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 ( + <> + + + + + + + + ); +} diff --git a/src/Components/Icons/AppIcon/AppIcon.tsx b/src/Components/Icons/AppIcon/AppIcon.tsx new file mode 100644 index 0000000..d635eac --- /dev/null +++ b/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 ( + <> + + + + + + + + + ); +} diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx new file mode 100644 index 0000000..0f8714b --- /dev/null +++ b/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 ( + <> + + + + + + + + ); +} diff --git a/src/Components/Icons/LoginIcon/LoginIcon.tsx b/src/Components/Icons/LoginIcon/LoginIcon.tsx new file mode 100644 index 0000000..d1cc4f1 --- /dev/null +++ b/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 ( + <> + + + + + + + ); +} diff --git a/src/Components/Icons/SignupIcon/SignupIcon.tsx b/src/Components/Icons/SignupIcon/SignupIcon.tsx new file mode 100644 index 0000000..0b49012 --- /dev/null +++ b/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 ( + <> + + + + + + + + ); +} diff --git a/src/Components/Icons/UserIcon/UserIcon.tsx b/src/Components/Icons/UserIcon/UserIcon.tsx new file mode 100644 index 0000000..539aaf1 --- /dev/null +++ b/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 ( + <> + + + + + + + ); +} diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx new file mode 100644 index 0000000..4630174 --- /dev/null +++ b/src/Interfaces/Interfaces.tsx @@ -0,0 +1,8 @@ +export interface IconProps { + size: number; + color: string; +} + +export interface RootDrawerParamList { + navigate: any; +} diff --git a/src/Routes/AddNote/AddNote.tsx b/src/Routes/AddNote/AddNote.tsx new file mode 100644 index 0000000..5a3a3f2 --- /dev/null +++ b/src/Routes/AddNote/AddNote.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {View, Text} from 'react-native'; +import styles from '../../styles'; +import Background from '../../Components/Background/Background'; + +export default function AddNote() { + return ( + + Add Note + + ); +} diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx new file mode 100644 index 0000000..d7280d1 --- /dev/null +++ b/src/Routes/Home/Home.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import {View, Text} from 'react-native'; +import styles from '../../styles'; +import Background from '../../Components/Background/Background'; +import AppIcon from '../../Components/Icons/AppIcon/AppIcon'; + +export default function Home() { + return ( + + + + + Clip Notes + + + + + ); +} diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx new file mode 100644 index 0000000..f51e7ef --- /dev/null +++ b/src/Routes/Login/Login.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {View, Text} from 'react-native'; +import styles from '../../styles'; +import Background from '../../Components/Background/Background'; + +export default function Login() { + return ( + + Login + + ); +} diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx new file mode 100644 index 0000000..198b2a6 --- /dev/null +++ b/src/Routes/Register/Register.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {View, Text} from 'react-native'; +import styles from '../../styles'; +import Background from '../../Components/Background/Background'; + +export default function Register() { + return ( + + Register + + ); +} diff --git a/src/Routes/UserInfo/UserInfo.tsx b/src/Routes/UserInfo/UserInfo.tsx new file mode 100644 index 0000000..0570bcb --- /dev/null +++ b/src/Routes/UserInfo/UserInfo.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {View, Text} from 'react-native'; +import styles from '../../styles'; +import Background from '../../Components/Background/Background'; + +export default function UserInfo() { + return ( + + UserInfo + + ); +} diff --git a/src/styles.tsx b/src/styles.tsx new file mode 100644 index 0000000..4b2caff --- /dev/null +++ b/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_generic: { + 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;