Fixing all alignments in forms to new prototype

src/app/components/ImageInput.js

@@ -241,11 +241,11 @@ const styles = StyleSheet.create({
     height: 35,
   },
   addBtnContainer: {
-    padding: 16,
-    elevation: 40,
-    marginVertical: 24,
+    paddingHorizontal: 16,
+    paddingTop: 24,
     width: "100%",
   },
+
   addBtn: {
     justifyContent: "center",
     flexDirection: "row",

src/app/components/ImageInputList.js

@@ -31,6 +31,7 @@ function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
 const styles = StyleSheet.create({
   container: {
     flexDirection: "row",
+    paddingHorizontal: 16,
   },
   image: {
     marginRight: 10,

src/app/components/PickEventDateLocation.js

@@ -16,29 +16,27 @@ export default function PickEventDateLocation({
     <View
       style={{
         flex: 1,
+        paddingTop: 24,
         paddingHorizontal: 16,
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignContent: "flex-start",
       }}
     >
-      {/*Data da coleta:*/}
-      <View style={{ flex: 0.1 }}>
-        <FormDatePicker
-          textStyle={{
-            borderColor: colors.gray,
-            borderWidth: 3,
-          }}
-          defaultDate={new Date()}
-          onDateChange={(value) => setDate(value)}
-          onTimeChange={(value) => setTime(value)}
-        />
+    <View
+      paddingBottom={24}>
+      <FormDatePicker
+        textStyle={{
+          borderColor: colors.gray,
+          borderWidth: 3,
+        }}
+        defaultDate={new Date()}
+        onDateChange={(value) => setDate(value)}
+        onTimeChange={(value) => setTime(value)}
+      />
       </View>
-      {/*Local do evento:*/}
-      {location &&
-      <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
-        <FormLocationPicker />
-      </TouchableOpacity>}
+      {location && (
+        <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
+          <FormLocationPicker />
+        </TouchableOpacity>
+      )}
     </View>
   );
 }

src/app/components/TextInput.js

@@ -8,7 +8,7 @@ import {Shadow} from "react-native-shadow-2";
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
   return (
     <Shadow
-      viewStyle={{ width: width}}
+      viewStyle={{ width: width, height: otherProps.numberOfLines * 20}}
       offset={[0, 4]}
       distance={4}
       radius={4}
@@ -40,8 +40,7 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     borderColor: colors.medium,
     borderWidth: 1,
-    padding: 10,
-    flexDirection: "row",
+    padding: 5,
   },
   icon: {
     marginRight: 10,

src/app/components/forms/FormDatePicker.js

@@ -95,18 +95,18 @@ const FormDatePicker = (props) => {
     <TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
       <View
         style={{
+          flex: 1,
           width: "100%",
           flexDirection: "row",
-          alignItems: "flex-start",
-          justifyContent: "space-between",
+          alignItems: "center",
+          justifyContent: "flex-start",
         }}
       >
         <View style={styles.dateIcon}>
           <MaterialCommunityIcons
             name="calendar-today"
-            size={30}
+            size={20}
             color="white"
-            alignItems="center"
           />
         </View>
         <View style={styles.dateInput}>
@@ -206,18 +206,18 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   dateInput: {
-    flex: 0.9,
+    paddingLeft: 16,
     height: "100%",
     flexDirection: "column",
     justifyContent: "center",
   },
   dateIcon: {
     backgroundColor: colors.primary,
-    padding: 8,
-    width: 20,
+    width: 40,
+    height: 40,
     alignItems: "center",
+    justifyContent: "center",
     borderRadius: 5,
-    flex: 0.1,
   },
 });
 

src/app/components/forms/FormLocationPicker.js

@@ -1,69 +1,65 @@
 import React, { useContext } from "react";
-import { StyleSheet, Text, View, PixelRatio } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
-import EventLocationInput from "../EventLocationInput";
 import { dimensions } from "../../config/dimensions";
 import { EventLocationContext } from "../../context/EventLocationContext";
 
 function FormLocationPicker({ subtitle }) {
-    const context = useContext(EventLocationContext);
-    const local = context.eventLocation.toString();
+  const context = useContext(EventLocationContext);
+  const local = context.eventLocation.toString();
 
-    return (
-        <View style={{ marginTop: 10, width: "100%" }}>
-            <View style={styles.location}>
-                <View style={styles.mapIcon}>
-                    <MaterialIcons
-                        name="location-on"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
-                    />
-                </View>
-                <View style={styles.adressText}>
-                    <Text style={{
-                        fontSize: dimensions.text.default,
-                    }}>
-                        {local}
-                    </Text>
-                    <View>
-                        <Text style={{ color: colors.primary, height: 50 }}>
-                            {(subtitle ? subtitle : "Defina o local no mapa" )}
-                </Text>
-                    </View>
-                </View>
-            </View>
+  return (
+      <View style={styles.location}>
+
+        <View style={styles.mapIcon}>
+          <MaterialIcons
+            name="location-on"
+            size={20}
+            color="white"
+          />
+        </View>
+
+        <View style={styles.adressText}>
+          <Text
+            style={{
+              fontSize: dimensions.text.default,
+            }}
+          >
+            {local}
+          </Text>
+          <Text style={{ color: colors.primary}}>
+            {subtitle ? subtitle : "Defina o local no mapa"}
+          </Text>
         </View>
-    );
+
+      </View>
+  );
 }
 
 const styles = StyleSheet.create({
-    location: {
-        //flex: 1,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        // backgroundColor: colors.secondary,
-    },
-    adressText: {
-        flex: 0.90,
-        height: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-        paddingLeft: 5,
-    },
-    mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-    },
+  location: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "row",
+    alignContent: "space-around",
+    justifyContent: "flex-start",
+  },
+
+  adressText: {
+    height: "100%",
+    paddingLeft: 24,
+  },
+
+  mapIcon: {
+    backgroundColor: colors.primary,
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 5,
+  },
 });
 
 export default FormLocationPicker;

src/app/screens/PluviometerSharingDataScreen.js

@@ -69,15 +69,16 @@ function PluviometerSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View style={{ flex: 1 }}>
-            <Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
-            <FormField
-              keyboardType="decimal-pad"
-              maxLength={200}
-              name="pluviometer"
-              placeholder="Digite a quantidade de chuva"
-            />
-          </View>
+          <Text style={{...styles.labelStyle, paddingTop: 24 }}>Quantidade de chuva (mm):</Text>
+           
+
+          <FormField
+            keyboardType="decimal-pad"
+            maxLength={200}
+            numberOfLines={2}
+            name="pluviometer"
+            placeholder="Digite a quantidade de chuva"
+          />
 
           <FormImagePicker
             backgroundColor={colors.primary}
@@ -85,34 +86,26 @@ function PluviometerSharingDataScreen(props) {
             styles={{ width: 50 }}
           />
 
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
           <PickEventDateLocation
             setDate={setDateTime}
             setTime={setTime}
             navigation={props.navigation}
             location={false}
-            />
+          />
 
+          <Text style={styles.labelStyle}>Comentário:</Text>
+
+          <FormField
+            maxLength={255}
+            multiline
+            name="description"
+            numberOfLines={3}
+            placeholder="Escreva um comentário (Opcional)..."
+          />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
           </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.labelStyle}>Comentário:</Text>
-            <FormField
-              maxLength={255}
-              multiline
-              name="description"
-              numberOfLines={3}
-              placeholder="Escreva um comentário (Opcional)..."
-            />
-          </View>
-          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
-          <View style={{ flex: 1 }}></View>
         </Form>
       </ScrollView>
     </Screen>
@@ -131,6 +124,7 @@ const styles = StyleSheet.create({
   },
   labelStyle: {
     paddingHorizontal: 16,
+    paddingBottom: 12,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/RainSharingDataScreen.js

@@ -72,11 +72,12 @@ function RainSharingDataScreen(props) {
           <View
             style={{
               paddingHorizontal: 16,
+              paddingTop: 16,
             }}
           >
-            <View style={styles.imgs_row}>
+            <View  flexDirection="row" justifyContent="center" paddingBottom={16}>
               <TouchableNativeFeedback onPress={() => setRain(0)}>
-                <View style={styles.img_block}>
+                <View style={{paddingRight: 16}}>
                   {rain == 0 ? (
                     <assets.rainLevel.Rain_0_5_Toggle {...dims} />
                   ) : (
@@ -86,17 +87,17 @@ function RainSharingDataScreen(props) {
               </TouchableNativeFeedback>
 
               <TouchableNativeFeedback onPress={() => setRain(1)}>
-                <View style={styles.img_block}>
                   {rain == 1 ? (
                     <assets.rainLevel.Rain_1_5_Toggle {...dims} />
                   ) : (
                     <assets.rainLevel.Rain_1_5 {...dims} />
                   )}
-                </View>
               </TouchableNativeFeedback>
+            </View>
 
+            <View flexDirection="row" justifyContent="center">
               <TouchableNativeFeedback onPress={() => setRain(2)}>
-                <View style={styles.img_block}>
+                <View style={{paddingRight: 16}}>
                   {rain == 2 ? (
                     <assets.rainLevel.Rain_2_5_Toggle {...dims} />
                   ) : (
@@ -104,27 +105,13 @@ function RainSharingDataScreen(props) {
                   )}
                 </View>
               </TouchableNativeFeedback>
-            </View>
 
-            <View flexDirection="row" justifyContent="center">
               <TouchableNativeFeedback onPress={() => setRain(3)}>
-                <View style={styles.img_block}>
                   {rain == 3 ? (
                     <assets.rainLevel.Rain_3_5_Toggle {...dims} />
                   ) : (
                     <assets.rainLevel.Rain_3_5 {...dims} />
                   )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRain(4)}>
-                <View style={styles.img_block}>
-                  {rain == 4 ? (
-                    <assets.rainLevel.Rain_4_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_4_5 {...dims} />
-                  )}
-                </View>
               </TouchableNativeFeedback>
             </View>
           </View>
@@ -151,7 +138,9 @@ function RainSharingDataScreen(props) {
             placeholder="Escreva um comentário (Opcional)..."
           />
 
-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          </View>
         </Form>
       </ScrollView>
     </Screen>
@@ -163,12 +152,12 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
   },
   img_block: {
-    flex: 1,
-    borderRadius: 5,
-    borderStyle: "dotted",
-    borderColor: colors.white,
-    borderWidth: borderWidth,
-    alignItems: "center",
+    // flex: 1,
+    // borderRadius: 5,
+    // borderStyle: "dotted",
+    // borderColor: colors.white,
+    // borderWidth: borderWidth,
+    // alignItems: "center",
   },
   imgs_row: {
     flexDirection: "row",
@@ -180,6 +169,8 @@ const styles = StyleSheet.create({
   },
   labelStyle: {
     paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/RiverFloodSharingDataScreen.js

@@ -48,7 +48,7 @@ function RiverFloodSharingDataScreen(props) {
   const [date, setDate] = useState(moment());
   const [time, setTime] = useState(moment());
 
-  const dims = scaleDimsFromWidth(80, 80, 20);
+  const dims = { width: 105, height: 105 }; //scaleDimsFromWidth(80, 80, 26);
 
   return (
     <Screen style={styles.container}>
@@ -66,7 +66,14 @@ function RiverFloodSharingDataScreen(props) {
               setError(true);
               return;
             }
-            insertRiverData({ ...values, riverScale, location, date, time, address });
+            insertRiverData({
+              ...values,
+              riverScale,
+              location,
+              date,
+              time,
+              address,
+            });
             showMessage({
               message: "Informação enviada!",
               duration: 1950,
@@ -77,30 +84,42 @@ function RiverFloodSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View style={{paddingHorizontal: 16}}>
-            <View style={styles.imgs_row}>
-              <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
-                <View style={styles.img_block}>
-                  {riverScale == 0 ? (
-                    <assets.riverLevel.LowToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.Low {...dims} />
-                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
-                <View style={styles.img_block}>
+          <View
+            style={{
+              paddingHorizontal: 16,
+              paddingTop: 16,
+              flexDirection: "column",
+            }}
+          >
+            <View
+              flexDirection="row"
+              justifyContent="center"
+              paddingBottom={16}
+            >
+              <View style={styles.imgs_row}>
+                <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
+                  <View style={{ paddingRight: 16 }}>
+                    {riverScale == 0 ? (
+                      <assets.riverLevel.LowToggle {...dims} />
+                    ) : (
+                      <assets.riverLevel.Low {...dims} />
+                    )}
+                  </View>
+                </TouchableNativeFeedback>
+
+                <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
                   {riverScale == 1 ? (
                     <assets.riverLevel.NormalToggle {...dims} />
                   ) : (
                     <assets.riverLevel.Normal {...dims} />
                   )}
-                </View>
-              </TouchableNativeFeedback>
+                </TouchableNativeFeedback>
+              </View>
+            </View>
 
+            <View flexDirection="row" justifyContent="center">
               <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
-                <View style={styles.img_block}>
+                <View style={{ paddingRight: 16 }}>
                   {riverScale == 2 ? (
                     <assets.riverLevel.HighToggle {...dims} />
                   ) : (
@@ -110,13 +129,11 @@ function RiverFloodSharingDataScreen(props) {
               </TouchableNativeFeedback>
 
               <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
-                <View style={styles.img_block}>
-                  {riverScale == 3 ? (
-                    <assets.riverLevel.FloodingToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.Flooding {...dims} />
-                  )}
-                </View>
+                {riverScale == 3 ? (
+                  <assets.riverLevel.FloodingToggle {...dims} />
+                ) : (
+                  <assets.riverLevel.Flooding {...dims} />
+                )}
               </TouchableNativeFeedback>
             </View>
           </View>
@@ -126,13 +143,15 @@ function RiverFloodSharingDataScreen(props) {
           )}
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
+
           <PickEventDateLocation
             setDate={setDate}
             setTime={setTime}
-            navigation={props.navigation}/>
+            navigation={props.navigation}
+          />
 
-          <View style={{ flex: 1 }}>
             <Text style={styles.labelStyle}>Comentário:</Text>
+
             <FormField
               maxLength={255}
               multiline
@@ -140,8 +159,10 @@ function RiverFloodSharingDataScreen(props) {
               numberOfLines={3}
               placeholder="Escreva um comentário (Opcional)..."
             />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
           </View>
-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
         </Form>
       </KeyboardAwareScrollView>
     </Screen>
@@ -152,13 +173,6 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
   },
-  img_block: {
-    borderRadius: 5,
-    borderStyle: "dotted",
-    borderColor: colors.white,
-    borderWidth: borderWidth,
-    alignItems: "center",
-  },
   imgs_row: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -166,9 +180,11 @@ const styles = StyleSheet.create({
   error_txt: {
     fontSize: 18,
     color: colors.danger,
-  },  
+  },
   labelStyle: {
     paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     textAlign: "left",

src/app/screens/SharingFloodZonesScreen.js

@@ -82,7 +82,7 @@ function SharingFloodZonesScreen(props) {
         >
           <View style={styles.imgs_container}>
             <TouchableNativeFeedback onPress={() => setPassable(1)}>
-              <View>
+              <View style={{paddingRight: 17}}>
                 {passable == 1 ? (
                   <Image
                     source={assets.floodZones.passable_toggle}
@@ -98,7 +98,6 @@ function SharingFloodZonesScreen(props) {
             </TouchableNativeFeedback>
 
             <TouchableNativeFeedback onPress={() => setPassable(0)}>
-              <View style={styles.img_block}>
                 {passable == 0 ? (
                   <Image
                     source={assets.floodZones.notPassable_toggle}
@@ -110,7 +109,6 @@ function SharingFloodZonesScreen(props) {
                     source={assets.floodZones.notPassable2}
                   />
                 )}
-              </View>
             </TouchableNativeFeedback>
           </View>
 
@@ -123,7 +121,8 @@ function SharingFloodZonesScreen(props) {
           <PickEventDateLocation
             setDate={setDate}
             setTime={setTime}
-            navigation={props.navigation}/>
+            navigation={props.navigation}
+          />
 
           <Text style={styles.labelStyle}>Comentário:</Text>
           <FormField
@@ -133,7 +132,10 @@ function SharingFloodZonesScreen(props) {
             numberOfLines={3}
             placeholder="Escreva um comentário (Opcional)..."
           />
-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          </View>
         </Form>
       </KeyboardAwareScrollView>
     </Screen>
@@ -144,7 +146,6 @@ const dims = scaleDimsFromWidth(93, 106, 30.0);
 
 const styles = StyleSheet.create({
   container: {
-    // padding: 17,
     backgroundColor: colors.white,
   },
 
@@ -161,10 +162,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   imgs_container: {
+    paddingTop: 16,
     flexDirection: "row",
-    justifyContent: "space-evenly",
+    justifyContent: "center",
   },
-
   text: {
     paddingTop: 5,
     fontSize: dimensions.text.default,
@@ -178,6 +179,8 @@ const styles = StyleSheet.create({
     fontSize: dimensions.text.secondary,
     fontWeight: "bold",
     paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
     textAlign: "left",
     color: colors.lightBlue,
   },