added visual arrow when text is pressable

front/components/GtkUI/ElementTypes.tsx

@@ -1,5 +1,5 @@
-import { Select, Switch, Text } from "native-base";
-
+import { Select, Switch, Text, Icon, Row } from "native-base";
+import { MaterialIcons } from "@expo/vector-icons";
 export type ElementType = "custom" | "default" | "text" | "toggle" | "dropdown";
 
 export type DropdownOption = {
@@ -26,17 +26,33 @@ export type ElementDropdownProps = {
 };
 
 export const getElementTextNode = (
-	{ text }: ElementTextProps,
+	{ text, onPress }: ElementTextProps,
 	disabled: boolean
 ) => {
 	return (
-		<Text
+		<Row
 			style={{
-				opacity: disabled ? 0.4 : 0.6,
+				alignItems: "center",
 			}}
 		>
-			{text}
-		</Text>
+			<Text
+				style={{
+					opacity: disabled ? 0.4 : 0.6,
+				}}
+			>
+				{text}
+			</Text>
+			{onPress && (
+				<Icon
+					as={MaterialIcons}
+					name="keyboard-arrow-right"
+					size="xl"
+					style={{
+						opacity: disabled ? 0.4 : 0.6,
+					}}
+				/>
+			)}
+		</Row>
 	);
 };
 

front/views/settings/SettingsProfileView.tsx

@@ -85,6 +85,9 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 							title: "Username",
 							data: {
 								text: user.name,
+								onPress: () => {
+									console.log("Go to username settings");
+								},
 							},
 						},
 						{
@@ -97,6 +100,16 @@ const ProfileSettings = ({ navigation }: { navigation: any }) => {
 								},
 							},
 						},
+					]}
+				/>
+
+				<ElementList
+					style={{
+						marginTop: 20,
+						width: "90%",
+						maxWidth: 850,
+					}}
+					elements={[
 						{
 							type: "text",
 							title: "ID",