From 77cd205448009d535203d66c964909d2addcd5ca Mon Sep 17 00:00:00 2001 From: AngelV3rgs Date: Sat, 8 Apr 2023 00:48:57 +0800 Subject: [PATCH] navigations and polished user info, home and add note screen --- App.tsx | 3 ++ package-lock.json | 19 +++++++++ package.json | 1 + src/Routes/AddNote/AddNote.tsx | 18 ++++++-- src/Routes/Home/Home.tsx | 22 ++++++---- src/Routes/Login/Login.tsx | 9 +++- src/Routes/UserInfo/UserInfo.tsx | 20 +++++++++ src/styles.tsx | 73 +++++++++++++++++++++++++++++--- 8 files changed, 144 insertions(+), 21 deletions(-) diff --git a/App.tsx b/App.tsx index afa01b4..1d7c21a 100644 --- a/App.tsx +++ b/App.tsx @@ -11,8 +11,10 @@ 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 ( @@ -26,6 +28,7 @@ export default function App() { + ); diff --git a/package-lock.json b/package-lock.json index 0582927..b489c0c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", + "@react-navigation/stack": "^6.3.16", "expo": "~48.0.5", "expo-linear-gradient": "^12.1.1", "expo-status-bar": "~1.4.4", @@ -4914,6 +4915,24 @@ "nanoid": "^3.1.23" } }, + "node_modules/@react-navigation/stack": { + "version": "6.3.16", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.16.tgz", + "integrity": "sha512-KTOn9cNuZ6p154Htbl2DiR95Wl+c7niLPRiGs7gjOkyVDGiaGQF9ODNQTYBDE1OxZGHe/EyYc6T2CbmiItLWDg==", + "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-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "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", diff --git a/package.json b/package.json index a04dd7b..e447dff 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@react-navigation/drawer": "^6.6.2", "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", + "@react-navigation/stack": "^6.3.16", "expo": "~48.0.5", "expo-linear-gradient": "^12.1.1", "expo-status-bar": "~1.4.4", diff --git a/src/Routes/AddNote/AddNote.tsx b/src/Routes/AddNote/AddNote.tsx index 59e7eb1..66a7e83 100644 --- a/src/Routes/AddNote/AddNote.tsx +++ b/src/Routes/AddNote/AddNote.tsx @@ -5,11 +5,14 @@ import Background from '../../Components/Background/Background'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useState } from "react"; import {TouchableOpacity,} from "react-native"; - +import { RootDrawerParamList } from "../../Interfaces/Interfaces"; +import { useNavigation } from "@react-navigation/native"; export default function AddNote() { const [addnote, setNote] = useState(""); + const [addtitle, setTitle] = useState(""); + const navigation = useNavigation(); return ( @@ -21,8 +24,8 @@ export default function AddNote() { style={styles.title} placeholder="Title" placeholderTextColor="white" - onChangeText={setNote} - value={addnote} + onChangeText={setTitle} + value={addtitle} /> @@ -31,13 +34,20 @@ export default function AddNote() { placeholder="Type here...." placeholderTextColor="white" onChangeText={setNote} - value={addnote} + value={addnote} /> SAVE + { + navigation.navigate("Home"); + }}> + CANCEL + + ); diff --git a/src/Routes/Home/Home.tsx b/src/Routes/Home/Home.tsx index bc00110..f94846f 100644 --- a/src/Routes/Home/Home.tsx +++ b/src/Routes/Home/Home.tsx @@ -2,10 +2,13 @@ import * as React from 'react'; import {View, Text} from 'react-native'; import styles from '../../styles'; import Background from '../../Components/Background/Background'; -import AddIcon from '../../Components/Icons/AddIcon/AddIcon'; +import { useNavigation } from "@react-navigation/native"; +import {TouchableOpacity,} from "react-native"; +import { RootDrawerParamList } from "../../Interfaces/Interfaces"; export default function Home() { - //const navigation = ({ navigation}: {navigation:any}) => { + const navigation = useNavigation(); + return ( Clip Notes @@ -16,13 +19,16 @@ export default function Home() { alignItems: 'center', justifyContent: 'center', }}> - - - - No notes yet... - + + { + navigation.navigate("Add Note"); + }}> + + + + New note... - + ); diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx index 4eaf0f9..37a45fa 100644 --- a/src/Routes/Login/Login.tsx +++ b/src/Routes/Login/Login.tsx @@ -6,12 +6,14 @@ import { SafeAreaView} from "react-native"; import { StatusBar } from "expo-status-bar"; import { useState } from "react"; import {TouchableOpacity,} from "react-native"; - +import { RootDrawerParamList } from "../../Interfaces/Interfaces"; +import { useNavigation } from "@react-navigation/native"; export default function Login() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); + const navigation = useNavigation(); return ( @@ -45,7 +47,10 @@ export default function Login() { LOGIN - + { + navigation.navigate("Register"); + }}> REGISTER diff --git a/src/Routes/UserInfo/UserInfo.tsx b/src/Routes/UserInfo/UserInfo.tsx index 06b5165..e755dba 100644 --- a/src/Routes/UserInfo/UserInfo.tsx +++ b/src/Routes/UserInfo/UserInfo.tsx @@ -4,15 +4,35 @@ import styles from '../../styles'; import Background from '../../Components/Background/Background'; import { SafeAreaView } from 'react-native-safe-area-context'; import UserIcon from '../../Components/Icons/UserIcon/UserIcon'; +import {TouchableOpacity, TextInput} from "react-native"; +import { useState } from "react"; export default function UserInfo() { + const [isEditable, setIsEditable] = useState(false); return ( USER INFO + + + + Username + + + + setIsEditable(!isEditable)} + > + {isEditable ? "Save" : "Edit Profile"} + + ); diff --git a/src/styles.tsx b/src/styles.tsx index bb9dcd2..ebacfbd 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -146,10 +146,6 @@ const styles = StyleSheet.create({ alignItems: 'flex-start', justifyContent: 'center', }, - addicon:{ - alignItems: 'center', - marginTop: 5, - }, no: { fontSize: 20, color: 'white', @@ -192,12 +188,21 @@ const styles = StyleSheet.create({ justifyContent: "center", }, savebtn:{ - width: "50%", + width: "40%", borderRadius: 25, - height: 50, + height: 40, alignItems: "center", justifyContent: "center", - marginTop: 40, + marginTop: 10, + backgroundColor: "green", + }, + cancelbtn:{ + width: "40%", + borderRadius: 25, + height: 40, + alignItems: "center", + justifyContent: "center", + marginTop: 10, backgroundColor: "green", }, savenote:{ @@ -205,6 +210,11 @@ const styles = StyleSheet.create({ fontWeight: 'bold', fontSize: 20, }, + cancel:{ + color: 'white', + fontWeight: 'bold', + fontSize: 20, + }, homecont:{ marginTop: 30, height: 150, @@ -214,6 +224,55 @@ const styles = StyleSheet.create({ alignItems: "center", justifyContent: "center", }, + newnote:{ + color: 'white', + fontWeight: 'bold', + fontSize: 50, + }, + // + form: { + flex: 1, + alignItems: "center", + }, + inputRow: { + width: "60%", + height: 50, + marginTop: 50, + marginLeft:10, + justifyContent: "center", + }, + label: { + marginBottom: 5, + marginLeft: 5, + fontSize: 20, + color: "white", + }, + disabledInput: { + backgroundColor: "white", + borderRadius: 10, + + }, + editButton: { + backgroundColor: "green", + width: "20%", + borderRadius: 25, + height: 40, + alignItems: "center", + justifyContent: "center", + marginTop: 20, + marginLeft: 20 + }, + buttonText:{ + color: "white", + }, + inputUser:{ + marginLeft: 10, + height: 40, + width: "100%", + color: "black", + backgroundColor: "white", + borderRadius: 10, + } }); export default styles;