Adding new screens of Account screen options

src/app/navigation/AccountNavigator.js

@@ -3,6 +3,10 @@ import { createStackNavigator } from "@react-navigation/stack";
 import AccountScreen from "../screens/AccountScreen";
 import PluviometerRegisterScreen from '../screens/PluviometerRegisterScreen';
 import MapFormScreen from "../screens/MapFormScreen";
+import Abbout from "../screens/Abbout";
+import ActivateInstitution from "../screens/ActivateInstitution";
+import UpdatePassword from "../screens/UpdatePassword";
+import EditUserData from "../screens/EditUserData";
 
 const Stack = createStackNavigator();
 
@@ -29,6 +33,48 @@ const AccountNavigator = () => (
         },
       }}
     />
+    <Stack.Screen
+      name="Abbout"
+      component={Abbout}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    /> 
+    <Stack.Screen
+      name="ActivateInstitution"
+      component={ActivateInstitution}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    /> 
+    <Stack.Screen
+      name="UpdatePassword"
+      component={UpdatePassword}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
+    <Stack.Screen
+      name="EditUserData"
+      component={EditUserData}
+      options={{
+        title: "",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
+
+
     <Stack.Screen
       name="FormMap"
       component={MapFormScreen}

src/app/screens/Abbout.js

@@ -0,0 +1,10 @@
+import React from "react";
+import {View, Text} from "react-native";
+
+export default function Abbout(props) {
+  return (
+    <View>
+      <Text>Abbout</Text>
+    </View>
+  )
+}

src/app/screens/AccountScreen.js

@@ -1,13 +1,17 @@
 import React, { useContext } from "react";
-import { Text, Button, Image, View, StyleSheet } from "react-native";
+import {
+  Text,
+  Image,
+  View,
+  StyleSheet,
+  ScrollView,
+} from "react-native";
 import Screen from "../components/Screen";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import assets from "../config/assets";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-
-import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
+import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";
 import colors from "../config/colors";
 
 function handleLogOut(setUser) {
@@ -30,7 +34,7 @@ function UserHeader({ name, fone }) {
   );
 }
 
-function ProfileItensList({ icon, title, onPress }) {
+function ProfileItensList({ icon, IconProvider, title, onPress }) {
   return (
     <View>
       <View
@@ -41,9 +45,27 @@ function ProfileItensList({ icon, title, onPress }) {
       ></View>
 
       <TouchableOpacity onPress={onPress}>
-        <View style={{ marginVertical: 16, flexDirection: "row" }}>
-          <MaterialCommunityIcons name={icon} size={18} color={colors.dark} />
+        <View
+          style={{
+            marginVertical: 16,
+            flexDirection: "row",
+            alignItems: "center",
+          }}
+        >
+          <IconProvider name={icon} size={18} color={colors.dark} />
           <Text style={{ fontSize: 16, marginLeft: 16 }}>{title}</Text>
+          <View
+            style={{
+              alignItems: "flex-end",
+              flex: 1,
+            }}
+          >
+            <MaterialCommunityIcons
+              name={"chevron-right"}
+              size={20}
+              color={colors.dark}
+            />
+          </View>
         </View>
       </TouchableOpacity>
     </View>
@@ -55,41 +77,47 @@ function AccountScreen(props) {
   const profileItems = [
     {
       icon: "account",
+      IconProvider: MaterialCommunityIcons,
       title: "Editar Perfil",
       onPress: () => {
-        console.log("1");
+        props.navigation.navigate("EditUserData");
       },
     },
     {
       icon: "lock",
+      IconProvider: MaterialCommunityIcons,
       title: "Alterar senha",
       onPress: () => {
-        console.log("2");
+        props.navigation.navigate("UpdatePassword");
       },
     },
     {
       icon: "account",
+      IconProvider: MaterialCommunityIcons,
       title: "Cadastrar pluviômetro",
       onPress: () => {
-        console.log("3");
+        props.navigation.navigate("PluviometerRegister");
       },
     },
     {
-      icon: "account",
+      icon: "institution",
+      IconProvider: FontAwesome,
       title: "ATIVAR INSTITUIÇÃO",
       onPress: () => {
-        console.log("4");
+        props.navigation.navigate("ActivateInstitution");
       },
     },
     {
       icon: "information-outline",
+      IconProvider: MaterialCommunityIcons,
       title: "SOBRE O PROJETO",
       onPress: () => {
-        console.log("5");
+        props.navigation.navigate("Abbout");
       },
     },
     {
       icon: "logout",
+      IconProvider: MaterialCommunityIcons,
       title: "sair",
       onPress: () => {
         handleLogOut(setUser);
@@ -97,15 +125,18 @@ function AccountScreen(props) {
     },
     {
       icon: "trash-can",
+      IconProvider: MaterialCommunityIcons,
       title: "Desativar conta",
       onPress: () => {
         console.log("7");
       },
     },
   ];
-  console.log("a");
+
   return (
-    <Screen
+    <Screen>
+      <ScrollView>
+        <View
           style={{
             padding: 16,
           }}
@@ -113,18 +144,17 @@ function AccountScreen(props) {
           <UserHeader name={user.name} fone={user.email} image={"1"} />
 
           <View style={{ marginTop: 24 }}>
-        {profileItems.map(({ icon, title, onPress }) => (
-          <ProfileItensList icon={icon} title={title} onPress={onPress} />
+            {profileItems.map(({ icon, IconProvider, title, onPress }) => (
+              <ProfileItensList
+                icon={icon}
+                IconProvider={IconProvider}
+                title={title}
+                onPress={onPress}
+              />
             ))}
           </View>
-      <View style={{ paddingTop: 40 }}>
-        <Button
-          title="Logout"
-          onPress={() => {
-            handleLogOut(setUser);
-          }}
-        />
         </View>
+      </ScrollView>
     </Screen>
   );
 }

src/app/screens/ActivateInstitution.js

@@ -0,0 +1,10 @@
+import React from "react";
+import {View, Text} from "react-native";
+
+export default function ActivateInstitution(props) {
+  return (
+    <View>
+      <Text>Ativar instituição</Text>
+    </View>
+  )
+}

src/app/screens/EditUserData.js

@@ -0,0 +1,11 @@
+import React from "react";
+import {View, Text} from "react-native";
+
+export default function EditUserData(props) {
+  return (
+    <View>
+      <Text>Editar perfil</Text>
+    </View>
+  )
+}
+

src/app/screens/UpdatePassword.js

@@ -0,0 +1,11 @@
+import React from "react";
+import {View, Text} from "react-native";
+
+export default function UpdatePassword(props) {
+  return (
+    <View>
+      <Text>Alterar senha</Text>
+    </View>
+  )
+}
+