mirror of
https://github.com/lemeow125/Reactnative-notesapp.git
synced 2024-11-16 22:19:26 +08:00
Added pages and basic drawer
This commit is contained in:
parent
4755f592c2
commit
95255a49c1
22 changed files with 1085 additions and 17 deletions
42
App.tsx
42
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 (
|
||||
<View style={styles.container}>
|
||||
<Text>Open up App.tsx to start working on your app!</Text>
|
||||
<StatusBar style="auto" />
|
||||
</View>
|
||||
<NavigationContainer>
|
||||
<Drawer.Navigator
|
||||
initialRouteName="Home"
|
||||
drawerContent={CustomDrawerContent}
|
||||
screenOptions={DrawerScreenSettings}
|
||||
>
|
||||
<Drawer.Screen name="Home" component={Home} />
|
||||
<Drawer.Screen name="Add Note" component={AddNote} />
|
||||
<Drawer.Screen name="User Info" component={UserInfo} />
|
||||
<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',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -2,5 +2,8 @@ module.exports = function(api) {
|
|||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
plugins:[
|
||||
'react-native-reanimated/plugin',
|
||||
]
|
||||
};
|
||||
};
|
||||
|
|
485
package-lock.json
generated
485
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
16
src/Components/Background/Background.tsx
Normal file
16
src/Components/Background/Background.tsx
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
88
src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx
Normal file
88
src/Components/Buttons/ButtonAlignLeft/ButtonAlignLeft.tsx
Normal file
|
@ -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 (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#bc231e',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Yellow':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#e2b465',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Green':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#0dbc6a',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Blue':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{
|
||||
backgroundColor: '#005997',
|
||||
width: props.width,
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e'},
|
||||
}}>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>
|
||||
Invalid button color specified
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
72
src/Components/Buttons/ButtonCentered/ButtonCentered.tsx
Normal file
72
src/Components/Buttons/ButtonCentered/ButtonCentered.tsx
Normal file
|
@ -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 (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Yellow':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#e2b465', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Green':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#0dbc6a', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
case 'Blue':
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#005997', width: props.width},
|
||||
}}>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_generic,
|
||||
...{backgroundColor: '#bc231e'},
|
||||
}}>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>
|
||||
Invalid button color specified
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
|
@ -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<RootDrawerParamList>();
|
||||
const width = 224;
|
||||
return (
|
||||
<DrawerContentScrollView {...props}>
|
||||
<View
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ justifyContent: "center" },
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
}
|
|
@ -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;
|
26
src/Components/Icons/AddIcon/AddIcon.tsx
Normal file
26
src/Components/Icons/AddIcon/AddIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
27
src/Components/Icons/AppIcon/AppIcon.tsx
Normal file
27
src/Components/Icons/AppIcon/AppIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
26
src/Components/Icons/HomeIcon/HomeIcon.tsx
Normal file
26
src/Components/Icons/HomeIcon/HomeIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
25
src/Components/Icons/LoginIcon/LoginIcon.tsx
Normal file
25
src/Components/Icons/LoginIcon/LoginIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
26
src/Components/Icons/SignupIcon/SignupIcon.tsx
Normal file
26
src/Components/Icons/SignupIcon/SignupIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
25
src/Components/Icons/UserIcon/UserIcon.tsx
Normal file
25
src/Components/Icons/UserIcon/UserIcon.tsx
Normal file
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
8
src/Interfaces/Interfaces.tsx
Normal file
8
src/Interfaces/Interfaces.tsx
Normal file
|
@ -0,0 +1,8 @@
|
|||
export interface IconProps {
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface RootDrawerParamList {
|
||||
navigate: any;
|
||||
}
|
12
src/Routes/AddNote/AddNote.tsx
Normal file
12
src/Routes/AddNote/AddNote.tsx
Normal file
|
@ -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 (
|
||||
<Background>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
|
||||
</Background>
|
||||
);
|
||||
}
|
25
src/Routes/Home/Home.tsx
Normal file
25
src/Routes/Home/Home.tsx
Normal file
|
@ -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 (
|
||||
<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>
|
||||
);
|
||||
}
|
12
src/Routes/Login/Login.tsx
Normal file
12
src/Routes/Login/Login.tsx
Normal file
|
@ -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 (
|
||||
<Background>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
|
||||
</Background>
|
||||
);
|
||||
}
|
12
src/Routes/Register/Register.tsx
Normal file
12
src/Routes/Register/Register.tsx
Normal file
|
@ -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 (
|
||||
<Background>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>Register</Text>
|
||||
</Background>
|
||||
);
|
||||
}
|
12
src/Routes/UserInfo/UserInfo.tsx
Normal file
12
src/Routes/UserInfo/UserInfo.tsx
Normal file
|
@ -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 (
|
||||
<Background>
|
||||
<Text style={{...styles.text_white, ...{fontSize: 32}}}>UserInfo</Text>
|
||||
</Background>
|
||||
);
|
||||
}
|
35
src/styles.tsx
Normal file
35
src/styles.tsx
Normal file
|
@ -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;
|
Loading…
Reference in a new issue