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,14 +16,12 @@ 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 }}>
+    <View
+      paddingBottom={24}>
       <FormDatePicker
         textStyle={{
           borderColor: colors.gray,
@@ -34,11 +32,11 @@ export default function PickEventDateLocation({
         onTimeChange={(value) => setTime(value)}
       />
       </View>
-      {/*Local do evento:*/}
-      {location &&
+      {location && (
         <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
           <FormLocationPicker />
-      </TouchableOpacity>}
+        </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,9 +1,8 @@
 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";
 
@@ -12,57 +11,54 @@ function FormLocationPicker({ subtitle }) {
   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}
+            size={20}
             color="white"
-                        alignItems="center"
-                        alignContent="center"
           />
         </View>
+
         <View style={styles.adressText}>
-                    <Text style={{
+          <Text
+            style={{
               fontSize: dimensions.text.default,
-                    }}>
+            }}
+          >
             {local}
           </Text>
-                    <View>
-                        <Text style={{ color: colors.primary, height: 50 }}>
-                            {(subtitle ? subtitle : "Defina o local no mapa" )}
+          <Text style={{ color: colors.primary}}>
+            {subtitle ? subtitle : "Defina o local no mapa"}
           </Text>
         </View>
-                </View>
-            </View>
+
       </View>
   );
 }
 
 const styles = StyleSheet.create({
   location: {
-        //flex: 1,
+    flex: 1,
     width: "100%",
     flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        // backgroundColor: colors.secondary,
+    alignContent: "space-around",
+    justifyContent: "flex-start",
   },
+
   adressText: {
-        flex: 0.90,
     height: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-        paddingLeft: 5,
+    paddingLeft: 24,
   },
+
   mapIcon: {
     backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
+    width: 40,
+    height: 40,
+    justifyContent: "center",
     alignItems: "center",
     borderRadius: 5,
-        flex: 0.10,
   },
 });
 

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>
+          <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"
           />
-          </View>
 
           <FormImagePicker
             backgroundColor={colors.primary}
@@ -85,14 +86,6 @@ function PluviometerSharingDataScreen(props) {
             styles={{ width: 50 }}
           />
 
-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
           <PickEventDateLocation
             setDate={setDateTime}
             setTime={setTime}
@@ -100,9 +93,8 @@ function PluviometerSharingDataScreen(props) {
             location={false}
           />
 
-          </View>
-          <View style={{ flex: 1 }}>
           <Text style={styles.labelStyle}>Comentário:</Text>
+
           <FormField
             maxLength={255}
             multiline
@@ -110,9 +102,10 @@ function PluviometerSharingDataScreen(props) {
             numberOfLines={3}
             placeholder="Escreva um comentário (Opcional)..."
           />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
           </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)..."
           />
 
+          <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,10 +84,21 @@ function RiverFloodSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <View style={{paddingHorizontal: 16}}>
+          <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={styles.img_block}>
+                  <View style={{ paddingRight: 16 }}>
                     {riverScale == 0 ? (
                       <assets.riverLevel.LowToggle {...dims} />
                     ) : (
@@ -90,17 +108,18 @@ function RiverFloodSharingDataScreen(props) {
                 </TouchableNativeFeedback>
 
                 <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
-                <View style={styles.img_block}>
                   {riverScale == 1 ? (
                     <assets.riverLevel.NormalToggle {...dims} />
                   ) : (
                     <assets.riverLevel.Normal {...dims} />
                   )}
-                </View>
                 </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>
               </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>
+
+          <View paddingVertical={24}>
             <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          </View>
         </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",
@@ -169,6 +183,8 @@ const styles = StyleSheet.create({
   },
   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)..."
           />
+
+          <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,
   },