navigations and polished user info, home and add note screen

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 (
     <NavigationContainer>
@@ -26,6 +28,7 @@ export default function App() {
         <Drawer.Screen name="User Info" component={UserInfo} />
         <Drawer.Screen name="Login" component={Login} />
         <Drawer.Screen name="Register" component={Register} />
+        
       </Drawer.Navigator>
     </NavigationContainer>
   );

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",

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",

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<RootDrawerParamList>();
 
   return (
     <Background>
@@ -21,8 +24,8 @@ export default function AddNote() {
             style={styles.title}
             placeholder="Title"
             placeholderTextColor="white"
-            onChangeText={setNote} 
-            value={addnote}
+            onChangeText={setTitle} 
+            value={addtitle}
           />
         </View>   
         <View style={styles.typehere}> 
@@ -31,13 +34,20 @@ export default function AddNote() {
             placeholder="Type here...."
             placeholderTextColor="white"
             onChangeText={setNote} 
-            value={addnote}
+            value={addnote} 
           /> 
        </View>
       <TouchableOpacity style={styles.savebtn}>
       <Text style={styles.savenote}>SAVE</Text>
       </TouchableOpacity>
+      <TouchableOpacity style={styles.cancelbtn}
+       onPress={() => {
+        navigation.navigate("Home");  
+      }}>
+      <Text style={styles.cancel}>CANCEL</Text>
+      </TouchableOpacity>
       </View>
+      
       </SafeAreaView>
     </Background>
   );

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<RootDrawerParamList>();
+
   return (
     <Background>
       <Text style={{...styles.text_white, ...{fontSize: 25}}}>Clip Notes</Text>
@@ -16,13 +19,16 @@ export default function Home() {
           alignItems: 'center',
           justifyContent: 'center',
         }}>
-          <View style={styles.homecont}> 
-        <View style={styles.addicon}> 
-        <AddIcon size={32} color="white" />
-        <Text style={styles.no}>No notes yet...</Text>
-        </View>
+          <View style={styles.homecont}>
+          <TouchableOpacity     
+        onPress={() => {
+          navigation.navigate("Add Note");  
+        }}>
+          <Text style={styles.newnote}>+</Text>
+        </TouchableOpacity>
+        <Text style={styles.no}>New note...</Text>
       <View style={{margin: 16}} />
-      </View>
+       </View>
       </View>
     </Background>
   );

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<RootDrawerParamList>();
   return (
     <Background>
        <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
@@ -45,7 +47,10 @@ export default function Login() {
       <TouchableOpacity style={styles.loginBtn}>
       <Text style={styles.loginText}>LOGIN</Text>
       </TouchableOpacity>
-      <TouchableOpacity style={styles.registerbtn}>
+      <TouchableOpacity style={styles.registerbtn}
+      onPress={() => {
+        navigation.navigate("Register");  
+      }}>
       <Text style={styles.registertext}>REGISTER</Text>
       </TouchableOpacity>
       </View>

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 (
     <Background>
       <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
       <SafeAreaView>
       <View style={styles.userinfocont}>  
         <Text style ={styles.userlabel} > <UserIcon size={32} color="white"/> USER INFO</Text>
+
         </View>
+      <View style={styles.form}>
+        <View style={styles.inputRow}>
+          <Text style={styles.label}>Username</Text>
+          <TextInput
+            style={[styles.inputUser, !isEditable && styles.disabledInput]}
+            editable={isEditable}
+          />
+          
+        </View>
+        <TouchableOpacity
+          style={styles.editButton}
+          onPress={() => setIsEditable(!isEditable)}
+        >
+          <Text style={styles.buttonText}>{isEditable ? "Save" : "Edit Profile"}</Text>
+        </TouchableOpacity>
+      </View>
       </SafeAreaView>
     </Background>
   );

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;