Fixing spacing and default message when institution type is "Nenhuma"

src/app/screens/PluviometerRegisterScreen.js

@@ -2,8 +2,7 @@ import React, { useState, useContext } from "react";
 import { MaterialIcons } from "@expo/vector-icons";
 import { StyleSheet, Text, View } from "react-native";
 import { Form, SubmitButton } from "../components/forms";
-import { showMessage } from "react-native-flash-message";
-import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
+import { dimensions } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
@@ -16,7 +15,6 @@ import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleI
 import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
 import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";
 
-const dims = scaleDimsFromWidth(85, 85, 25);
 
 function Institution({ user }) {
   const institutionMap = {
@@ -24,11 +22,11 @@ function Institution({ user }) {
     D: "Defesa Civil",
     N: "Não governamental",
     O: "Outra",
-    N: "Nenhuma",
+    X: "Nenhuma",
   };
 
   return (
-    <View style={{ marginBottom: 24, flex: 1 }}>
+    <View style={{ marginBottom: 24 }}>
       <Text style={styles.labelTipoInst}>Tipo de instituição: </Text>
       <View style={{ flexDirection: "row", marginTop: 16 }}>
         <FontAwesome5 name="university" size={30} color={colors.primary} />
@@ -133,7 +131,7 @@ function PluvDateTimePicker({
   pluviometer,
 }) {
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{height: 58}}>
       {!pluviometer && (
         <FormDatePicker
           onDateChange={onDateChange}
@@ -218,64 +216,55 @@ function PluviometerRegisterScreen(props) {
         <View
           style={{
             padding: 6,
-            flex: 1,
-            flexDirection: "column",
-            justifyContent: "space-evenly",
           }}
         >
-          <View style={{ flex: 0.05 }}>
-            <Text style={styles.title}>{user.pluviometer? "Dados do Pluviômetro" : "Cadastro do Pluviômetro"}</Text>
-          </View>
-          <View style={{ flex: 0.95, justifyContent: "space-between" }}>
-            <View style={{ flex: 0.19 }}>
-              <Text
-                style={{
-                  marginTop: 24,
-                  marginBottom: 16,
-                  fontSize: dimensions.text.secondary,
-                  fontWeight: "bold",
-                  textAlign: "left",
-                  color: colors.secondary,
-                }}
-              >
-                Data do cadastro:
-              </Text>
+          <Text style={styles.title}>
+            {user.pluviometer
+              ? "Dados do Pluviômetro"
+              : "Cadastro do Pluviômetro"}
+          </Text>
 
-              <PluvDateTimePicker
-                onDateChange={(value) => setDate(value)}
-                onTimeChange={(value) => setTime(value)}
-                date={date}
-                time={time}
-                formTypeFace={"pluviometerRegister"}
-                pluviometer={user.pluviometer}
-              />
-            </View>
-            <View style={{ flex: 0.19 }}>
-              <Text style={styles.label}>Endereço do pluviômetro*: </Text>
 
-              <View marginBottom={24}>
-                <LocationPicker
-                  navigation={props.navigation}
-                  location={location}
-                  setLocationAddr={setLocationAddr}
-                  setGeoLocation={setCoordinates}
-                  pluviometer={user.pluviometer}
-                />
-              </View>
-            </View>
-            <View style={{ flex: 0.38 }}>
-              <Institution user={user} />
-            </View>
-            <View style={{ flex: 0.19 }}>
-              {!user.pluviometer && (
-                <SubmitButton
-                  style={{ alignSelf: "" }}
-                  title="Cadastrar"
-                  paddingHorizontal={0}
-                />
-              )}
-            </View>
+          <Text
+            style={{
+              marginTop: 24,
+              marginBottom: 16,
+              fontSize: dimensions.text.secondary,
+              fontWeight: "bold",
+              textAlign: "left",
+              color: colors.secondary,
+            }}
+          >
+            Data do cadastro:
+          </Text>
+
+          <PluvDateTimePicker
+            onDateChange={(value) => setDate(value)}
+            onTimeChange={(value) => setTime(value)}
+            date={date}
+            time={time}
+            formTypeFace={"pluviometerRegister"}
+            pluviometer={user.pluviometer}
+          />
+
+
+          <Text style={styles.label}>Endereço do pluviômetro*: </Text>
+
+          <View marginBottom={24} marginTop={12}>
+            <LocationPicker
+              navigation={props.navigation}
+              location={location}
+              setLocationAddr={setLocationAddr}
+              setGeoLocation={setCoordinates}
+              pluviometer={user.pluviometer}
+            />
           </View>
+
+          <Institution user={user} />
+
+          {!user.pluviometer && (
+            <SubmitButton title="Cadastrar" paddingHorizontal={0} />
+          )}
         </View>
       </Form>
     </View>
@@ -283,12 +272,6 @@ function PluviometerRegisterScreen(props) {
 }
 
 const styles = StyleSheet.create({
-  image: {
-    width: dims.width * 0.8,
-    height: dims.height * 0.8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
   label: {
     fontSize: dimensions.text.secondary,
     marginBottom: 12,
@@ -316,17 +299,12 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   title: {
-    //   marginVertical: 24,
     fontSize: 18,
     fontWeight: "bold",
     textAlign: "center",
     color: colors.primary,
   },
-  date: {
-    paddingLeft: 12,
-    flexDirection: "column",
-    justifyContent: "center",
-  },
+
 });
 
 export default PluviometerRegisterScreen;