diff --git a/package-lock.json b/package-lock.json index 07e39bc..0582927 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,15 +10,20 @@ "dependencies": { "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", + "@react-navigation/native-stack": "^6.9.12", "expo": "~48.0.5", + "expo-linear-gradient": "^12.1.1", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.3", "react-native-gesture-handler": "~2.9.0", + "react-native-paper": "^5.4.0", + "react-native-pell-rich-editor": "^1.8.8", "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" + "react-native-svg": "13.4.0", + "react-native-webview": "^11.26.1" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -1806,6 +1811,18 @@ "node": ">=6.9.0" } }, + "node_modules/@callstack/react-theme-provider": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz", + "integrity": "sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==", + "dependencies": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", @@ -4862,6 +4879,22 @@ "react-native": "*" } }, + "node_modules/@react-navigation/native-stack": { + "version": "6.9.12", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.12.tgz", + "integrity": "sha512-kS2zXCWP0Rgt7uWaCUKrRl7U2U1Gp19rM1kyRY2YzBPXhWGVPjQ2ygBp88CTQzjgy8M07H/79jvGiZ0mlEJI+g==", + "dependencies": { + "@react-navigation/elements": "^1.3.17", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/native/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -7083,6 +7116,14 @@ "expo": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "12.1.1", + "resolved": "https://registry.npmjs.org/expo-linear-gradient/-/expo-linear-gradient-12.1.1.tgz", + "integrity": "sha512-W5WV9+SOlRSog/SLvDbpd0L/7g8WzoOKDE4WHv5wNk6m9iM1K0eAuP+MC+8JzVXoZOOj9OPuh9rkZ4KCzTOM1A==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-modules-autolinking": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.1.2.tgz", @@ -11720,6 +11761,40 @@ "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-paper": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.4.0.tgz", + "integrity": "sha512-f1etvm1RZakDH/oKUNH5BSFBysip3dv++Wr63Ng2p0YfG/iH4rzeQ5DVhksHObnIFWPFHRkrPsqcisaUlkl0oA==", + "dependencies": { + "@callstack/react-theme-provider": "^3.0.8", + "color": "^3.1.2", + "use-event-callback": "^0.1.0" + }, + "peerDependencies": { + "react": "*", + "react-native": "*", + "react-native-safe-area-context": "*", + "react-native-vector-icons": "*" + } + }, + "node_modules/react-native-paper/node_modules/color": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", + "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", + "dependencies": { + "color-convert": "^1.9.3", + "color-string": "^1.6.0" + } + }, + "node_modules/react-native-pell-rich-editor": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/react-native-pell-rich-editor/-/react-native-pell-rich-editor-1.8.8.tgz", + "integrity": "sha512-pPpj3rVEbmOcGbUMiutuQhpxp5HzOQlhVGhZ6B7aWlsliWWDtsi+lu3RXNV+g62PcQ07qDDtZwKOx1fSzff6HQ==", + "peerDependencies": { + "react-native": ">=0.50.0", + "react-native-webview": ">=7.5.2" + } + }, "node_modules/react-native-reanimated": { "version": "2.14.4", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz", @@ -11774,6 +11849,100 @@ "react-native": "*" } }, + "node_modules/react-native-vector-icons": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.2.0.tgz", + "integrity": "sha512-wKYLaFuQST/chH3AJRjmOLoLy3JEs1JR6zMNgTaemFpNoXs0ztRnTxcxFD9xhX7cJe1/zoN5BpQYe7kL0m5yyA==", + "peer": true, + "dependencies": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "bin": { + "fa5-upgrade": "bin/fa5-upgrade.sh", + "generate-icon": "bin/generate-icon.js" + } + }, + "node_modules/react-native-vector-icons/node_modules/cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "peer": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "node_modules/react-native-vector-icons/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "peer": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/react-native-vector-icons/node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "peer": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "peer": true, + "dependencies": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-vector-icons/node_modules/yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "peer": true, + "engines": { + "node": ">=10" + } + }, + "node_modules/react-native-webview": { + "version": "11.26.1", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.26.1.tgz", + "integrity": "sha512-hC7BkxOpf+z0UKhxFSFTPAM4shQzYmZHoELa6/8a/MspcjEP7ukYKpuSUTLDywQditT8yI9idfcKvfZDKQExGw==", + "dependencies": { + "escape-string-regexp": "2.0.0", + "invariant": "2.2.4" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, + "node_modules/react-native-webview/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "engines": { + "node": ">=8" + } + }, "node_modules/react-native/node_modules/promise": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz", @@ -13594,6 +13763,14 @@ "node": ">=0.10.0" } }, + "node_modules/use-event-callback": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/use-event-callback/-/use-event-callback-0.1.0.tgz", + "integrity": "sha512-5fTzY5UEXHMK5UR0NRkUz6TPfWmmX9fO8Tx3SnHrfMPdrQ7Rna0gDBy0r56SP68TwsP9DgwSBzeysCu3A/Z2NA==", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/use-latest-callback": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.5.tgz", diff --git a/package.json b/package.json index 0f97232..a04dd7b 100644 --- a/package.json +++ b/package.json @@ -11,15 +11,20 @@ "dependencies": { "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", + "@react-navigation/native-stack": "^6.9.12", "expo": "~48.0.5", + "expo-linear-gradient": "^12.1.1", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.3", "react-native-gesture-handler": "~2.9.0", + "react-native-paper": "^5.4.0", + "react-native-pell-rich-editor": "^1.8.8", "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" + "react-native-svg": "13.4.0", + "react-native-webview": "^11.26.1" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/src/Components/Background/Background.tsx b/src/Components/Background/Background.tsx index b8052ee..5fd8665 100644 --- a/src/Components/Background/Background.tsx +++ b/src/Components/Background/Background.tsx @@ -2,15 +2,17 @@ import * as React from "react"; import { View } from "react-native"; import styles from "../../styles"; + export interface props { - children: React.ReactNode; + children: React.ReactNode; } export default function Background(props: props) { return ( + - + {props.children} - + ); } diff --git a/src/Routes/AddNote/AddNote.tsx b/src/Routes/AddNote/AddNote.tsx index 5a3a3f2..59e7eb1 100644 --- a/src/Routes/AddNote/AddNote.tsx +++ b/src/Routes/AddNote/AddNote.tsx @@ -1,12 +1,44 @@ import * as React from 'react'; -import {View, Text} from 'react-native'; +import {View, Text, TextInput} from 'react-native'; import styles from '../../styles'; import Background from '../../Components/Background/Background'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { useState } from "react"; +import {TouchableOpacity,} from "react-native"; + export default function AddNote() { + const [addnote, setNote] = useState(""); + + return ( Add Note + + + + + + + + + + SAVE + + + ); } diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx index d7280d1..bc00110 100644 --- a/src/Routes/Home/Home.tsx +++ b/src/Routes/Home/Home.tsx @@ -2,11 +2,13 @@ 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'; +import AddIcon from '../../Components/Icons/AddIcon/AddIcon'; export default function Home() { + //const navigation = ({ navigation}: {navigation:any}) => { return ( + Clip Notes - - - Clip Notes - - + + + + No notes yet... + + + ); } diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index a70ad64..4eaf0f9 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -8,7 +8,6 @@ import { useState } from "react"; import {TouchableOpacity,} from "react-native"; - export default function Login() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); @@ -17,7 +16,7 @@ export default function Login() { - + Login to Clip Notes @@ -29,7 +28,6 @@ export default function Login() { value={username} /> - - UserInfo + + + + USER INFO + + ); } diff --git a/src/styles.tsx b/src/styles.tsx index 4b059d6..bb9dcd2 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -1,11 +1,13 @@ import {StyleSheet} from 'react-native'; + const styles = StyleSheet.create({ background: { - backgroundColor: '#002d4c', height: '100%', width: '100%', + backgroundColor:'#002d4d', + position: 'absolute', }, text_white: { color: 'white', @@ -44,7 +46,6 @@ const styles = StyleSheet.create({ width: "70%", height: 45, marginBottom: 20, - }, TextInput: { color: 'white', @@ -103,6 +104,116 @@ const styles = StyleSheet.create({ marginBottom: 30, color: 'white', }, + box:{ + width: '100%', + height: 200, + }, + userinfocont:{ + marginTop: 10, + marginLeft: 50, + height: 80, + width: 300, + borderRadius: 25, + backgroundColor: 'orange', + alignItems: "center", + justifyContent: "center", + }, + userlabel:{ + fontWeight: 'bold', + fontSize: 25, + marginBottom: 10, + color: 'white', + }, + addnote:{ + marginLeft: 180, + width: "10%", + borderRadius: 25, + height: 30, + alignItems: "center", + justifyContent: "center", + backgroundColor: "lightgreen", + }, + addtext:{ + fontSize: 20, + color: 'white', + }, + addnotescont:{ + marginTop: 20, + marginLeft: 20, + height: 200, + width: 350, + backgroundColor: 'blue', + alignItems: 'flex-start', + justifyContent: 'center', + }, + addicon:{ + alignItems: 'center', + marginTop: 5, + }, + no: { + fontSize: 20, + color: 'white', + marginTop: 20, + alignItems: 'center' + }, + typehere:{ + backgroundColor: "black", + borderRadius: 10, + width: "75%", + height: 300, + marginTop: 20, + }, + typeinput: { + color: 'white', + flex: 1, + paddingBottom: 250, + marginLeft: 5, + }, + title:{ + color: 'white', + flex: 1, + marginLeft: 5, + }, + tle:{ + backgroundColor: "black", + borderRadius: 10, + width: "80%", + height: 40, + marginTop: 20, + }, + addnotecont:{ + marginTop: 30, + marginLeft: 22, + height: 500, + width: 350, + borderRadius: 25, + backgroundColor: '#7cb9e8', + alignItems: "center", + justifyContent: "center", + }, + savebtn:{ + width: "50%", + borderRadius: 25, + height: 50, + alignItems: "center", + justifyContent: "center", + marginTop: 40, + backgroundColor: "green", + }, + savenote:{ + color: 'white', + fontWeight: 'bold', + fontSize: 20, + }, + homecont:{ + marginTop: 30, + height: 150, + width: 350, + borderRadius: 25, + backgroundColor: '#7cb9e8', + alignItems: "center", + justifyContent: "center", + }, }); export default styles;