creating navigation to pluviometer register screen

src/app/navigation/AccountNavigator.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import AccountScreen from "../screens/AccountScreen";
+import PluviometerRegisterScreen from '../screens/PluviometerRegisterScreen';
+import MapFormScreen from "../screens/MapFormScreen";
 
 const Stack = createStackNavigator();
 
 const AccountNavigator = () => (
-  <Stack.Navigator>
+  <Stack.Navigator initialRouteName="Perfil">
     <Stack.Screen
       name="Perfil"
       component={AccountScreen}
@@ -16,6 +18,27 @@ const AccountNavigator = () => (
         },
       }}
     />
+
+    <Stack.Screen
+      name="PluviometerRegister"
+      component={PluviometerRegisterScreen}
+      options={{
+        title: "PluviometerRegister",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
+    <Stack.Screen
+      name="FormMap"
+      component={MapFormScreen}
+      options={{
+        title: "Voltar",
+        headerStyle: {
+          backgroundColor: "white",
+        },
+      }}
+    />
   </Stack.Navigator>
 );
 

src/app/screens/AccountScreen.js

@@ -1,11 +1,20 @@
 import React, { useContext } from "react";
-import { Text, Button } from "react-native";
+import { Text, Button, Image, View } from "react-native";
 import Screen from "../components/Screen";
 import InDevelopment from "../components/InDevelopment";
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import assets from "../config/assets";
+
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
+import colors from "../config/colors";
+
+
 
 function handleLogOut(setUser) {
+
+
   setUser(null);
   authStorage.removeToken();
 }
@@ -13,21 +22,48 @@ function handleLogOut(setUser) {
 function AccountScreen(props) {
   const { user, setUser } = useContext(AuthContext);
 
+  const dims = scaleDimsFromWidth(93, 106, 35);
+
   return (
     <Screen
       style={{
         padding: 10,
+        fleex: 1,
       }}
     >
       <Text>{user.name}</Text>
       <Text>{user.email}</Text>
-      <Button
-        style={{ paddingTop: 10 }}
-        title="Logout"
-        onPress={() => {
-          handleLogOut(setUser);
-        }}
-      />
+
+      <TouchableOpacity onPress={()=> props.navigation.navigate("PluviometerRegister")}>
+        <View style={{
+          flexDirection: "row",
+          justifyContent: "flex-start",
+          alignContent: "center",
+          paddingTop: 40
+        }}>
+          <Image
+            style={{ width: 28 }}
+            resizeMode="contain"
+            source={require("../assets/pluviometer/pluviometro.png")}
+          />
+          <View style={{ justifyContent: "center" }}>
+            <Text style={{
+              fontSize: dimensions.text.default,
+              fontWeight: "bold"
+            }}>
+              Cadastrar Pluviômetro
+              </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+      <View style={{ paddingTop: 40 }}>
+        <Button
+          title="Logout"
+          onPress={() => {
+            handleLogOut(setUser);
+          }}
+        />
+      </View>
 
       {/* <InDevelopment /> */}
     </Screen>

src/app/screens/PluviometerRegisterScreen.js

@@ -13,6 +13,7 @@ import moment from "moment";
 import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { EventLocationContext } from "../context/EventLocationContext";
 import SchoolPicker from "../components/SchoolPicker";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 
 
@@ -59,48 +60,59 @@ function PluviometerRegisterScreen(props) {
                     <View style={{ flex: 0.10 }}>
                         <Text style={styles.title}>Cadastro do Pluviômetro</Text>
                     </View>
+
                     {/* Escola: */}
-                    <View style={{ flex: 0.30 }}>
+                    <View style={{ flex: 0.25, marginTop: 5}}>
                         <Text style={styles.label}>Escola: </Text>
                         <SchoolPicker
                             itemSelected={(value) => setSchool(value)} />
                     </View>
+
                     <View style={{
-                        flex: 0.60, flexDirection: "column",
-                        justifyContent: "space-between"
+                        flex: 0.60, flexDirection: "column"
                     }}>
-                        <ScrollView  contentContainerStyle={{ flexGrow: 1,flexDirection: "column",
-                        justifyContent: "space-between" }}>
+                        <ScrollView contentContainerStyle={{
+                            flexGrow: 1
+                        }}>
+                            <View style={{
+                                flex: 1,
+                                flexDirection: "column",
+                                justifyContent: "space-between"
+                            }}>
+                                {/*Local do pluvioômetro:*/}
+                                <View style={{ flex: 1 }}>
+                                    <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+                                        <View style={{ flex: 1 }}>
+                                            <Text style={styles.label}>Endereço do pluviômetro: </Text>
+                                            <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
+                                        </View>
+                                    </TouchableOpacity>
+                                </View>
 
-                            {/*Local do pluvioômetro:*/}
-                            <View style={{ flex: 1 }}>
-                                <Text style={styles.label}>Endereço do pluviômetro: </Text>
-                                <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
-                            </View>
-
-                            {/*Data de cadastro:*/}
-                            <View style={{ flex: 1 }}>
-                                <Text style={{
-                                    fontSize: dimensions.text.secondary,
-                                    fontWeight: "bold",
-                                    textAlign: "left",
-                                    color: colors.lightBlue, marginBottom: 10
-                                }}>Data do cadastro: </Text>
-                                <FormDatePicker
-                                    disabled={true}
-                                    textStyle={{
-                                        borderColor: colors.gray,
-                                        borderWidth: 3,
-                                    }}
-                                    subtitle=" "
-                                    defaultDate={new Date()}
-                                    onDateChange={(value) => setDateTime(value)}
-                                    onTimeChange={(value) => setTime(value)}
-                                />
-                            </View>
+                                {/*Data de cadastro:*/}
+                                <View style={{ flex: 1 }}>
+                                    <Text style={{
+                                        fontSize: dimensions.text.secondary,
+                                        fontWeight: "bold",
+                                        textAlign: "left",
+                                        color: colors.lightBlue,
+                                    }}>Data do cadastro: </Text>
+                                    <FormDatePicker
+                                        disabled={true}
+                                        textStyle={{
+                                            borderColor: colors.gray,
+                                            borderWidth: 3,
+                                        }}
+                                        subtitle=" "
+                                        defaultDate={new Date()}
+                                        onDateChange={(value) => setDateTime(value)}
+                                        onTimeChange={(value) => setTime(value)}
+                                    />
+                                </View>
 
-                            <View style={{ flex: 0.10, marginTop:15 }}>
-                                <SubmitButton title="Cadastrar" alignContent="flex-end" />
+                                <View style={{ flex: 0.05, marginTop: 15 }}>
+                                    <SubmitButton title="Cadastrar" alignContent="flex-end" />
+                                </View>
                             </View>
                         </ScrollView>
                     </View>