added dropdown,user icon and user status

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -16,6 +16,7 @@ import { RootState } from "../../features/redux/Store/Store";
 import LogoutIcon from "../../icons/LogoutIcon/LogoutIcon";
 import { clear } from "../../features/redux/slices/AuthSlice/AuthSlice";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import UserIcon from "../../icons/UserIcon/UserIcon";
 
 export default function CustomDrawerContent(props: {}) {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -103,7 +104,7 @@ export default function CustomDrawerContent(props: {}) {
             navigation.navigate("UserInfo");
           }}
         >
-          <HomeIcon size={32} />
+          <UserIcon size={32} />
           <Text style={styles.text_white_medium}>UserInfo</Text>
         </DrawerButton>
         {/*

src/routes/UserInfo/UserInfo.tsx

@@ -22,13 +22,16 @@ import { ScrollView } from "react-native-gesture-handler";
 import Select, { SelectConfig, SelectItem } from '@redmin_delishaj/react-native-select';
 import DropDownPicker from 'react-native-dropdown-picker'
 import SelectDropdown from 'react-native-select-dropdown'
-import ImagePicker from 'react-native-image-picker';
+import DropdownIcon from "../../icons/DropdownIcon/DropdownIcon";
 
 export default function UserInfo() {
   const navigation = useNavigation<RootDrawerParamList>();
   const [isEditable, setIsEditable] = useState(false);
-  const options = ["Prog1", "Prog2", "Networking", "Database"];
-
+  const options = ["", "", "", ""];
+  const [isActive, setIsActive] = useState(false);
+  const toggleUserActive = () => {
+    setIsActive(!isActive);
+  };
   //const dispatch = useDispatch();
  // const creds = useSelector((state: RootState) => state.auth.creds);
   const [user, setUser] = useState({
@@ -41,11 +44,14 @@ export default function UserInfo() {
   return (
     <ScrollView style={styles.background}>
       <AnimatedContainer>
-       <Text style={{...styles. text_white_medium, ...{fontSize: 32}}}></Text>
+       <Text style={{...styles.text_white_medium, ...{fontSize: 32}}}>Kurt Toledo</Text>
       <View>  
-        <Text style ={styles. text_white_medium} >Kurt Toledo</Text>
-        <Text style ={styles. text_white_small} >Student</Text>
-        <Image source={require("./image/3135715.png")} style={styles.profile} />
+      <Image source={require("./image/3135715.png")} style={styles.profile} />
+      <TouchableOpacity onPress={toggleUserActive} style={styles.button}>
+        <Text style={[styles.text, isActive ? styles.activeText : styles.inactiveText]}>
+          Student {isActive ? 'Active' : 'Inactive'}
+        </Text>
+      </TouchableOpacity>
         </View>
         <View
           style={{
@@ -161,7 +167,7 @@ export default function UserInfo() {
         onSelect={(selectedItem, index) =>{
           console.log(selectedItem, index)
         }}
-        renderDropdownIcon={() =><SignupIcon size={32} />
+        renderDropdownIcon={() =><DropdownIcon size={32} />
 
         }
         buttonTextStyle={{

src/styles.tsx

@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
   profile: {
     height: 80,
     width: 80, 
-    marginLeft: 10,
+    alignSelf: 'center',
   }, 
   input: {
     height: 40,
@@ -129,7 +129,17 @@ const styles = StyleSheet.create({
     fontSize: font_sizes.small,
     fontWeight: "bold", 
   }, 
- 
+  button: {
+    padding: 10,
+    backgroundColor: colors.blue_2,
+    borderRadius: 5,
+  },
+  activeText: {
+    color: 'green',
+  },
+  inactiveText: {
+    color: 'white',
+  },
 
 });