some layout improvements

src/app/components/ImageInput.js

@@ -48,7 +48,7 @@ function ImageInput({ imageUri, onChangeImage }) {
         {!imageUri && (
           <MaterialCommunityIcons
             color={colors.medium}
-            name="camera"
+            name="camera-plus"
             size={40}
           />
         )}

src/app/components/forms/FormImagePicker.js

@@ -3,6 +3,7 @@ import { useFormikContext } from "formik";
 
 import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
+import { View, Text, StyleSheet } from "react-native";
 
 function FormImagePicker({ name }) {
   const { errors, setFieldValue, touched, values } = useFormikContext();
@@ -20,15 +21,27 @@ function FormImagePicker({ name }) {
   };
 
   return (
-    <>
+    <View>
+      <Text style={styles.labelStyle}>Imagens: </Text>
       <ImageInputList
         imageUris={imageUris}
         onAddImage={handleAdd}
         onRemoveImage={handleRemove}
       />
       <ErrorMessage error={errors[name]} visible={touched[name]} />
-    </>
+    </View>
   );
 }
 
+const styles = StyleSheet.create({
+  labelStyle: {
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: "#1976D2",
+    marginBottom: 5,
+    marginTop: 15,
+  },
+});
+
 export default FormImagePicker;

src/app/screens/PluviometerSharingDataScreen.js

@@ -128,8 +128,7 @@ function PluviometerSharingDataScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 10,
-    width: "100%",
+    padding: 10,
   },
   image: {
     width: 85,

src/app/screens/RainSharingDataScreen.js

@@ -40,115 +40,115 @@ function RainSharingDataScreen(props) {
         Chuva
       </Text>
       <ScrollView style={styles.container}>
-      <Form
-        initialValues={{
-          images: [],
-        }}
-        onSubmit={(values) => {
-          insertRainData({ ...values, rain, location });
-          showMessage({
-            message: "Informação enviada!",
-            duration: 1950,
-            icon: "success",
-            type: "success",
-            onPress: () => {
-            },
-          });
-          props.navigation.goBack(null);
-        }}
-        validationSchema={validationSchema}
-      >
-        <View>
-          <View
-            style={{ flexDirection: "row", justifyContent: "space-around" }}
-          >
-            <TouchableNativeFeedback onPress={() => setRain(0)}>
-              <View
-                borderWidth={rain == 0 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/sem_chuva.png")}
-                />
-                <Text style={styles.text}>Sem chuva</Text>
-              </View>
-            </TouchableNativeFeedback>
+        <Form
+          initialValues={{
+            images: [],
+          }}
+          onSubmit={(values) => {
+            insertRainData({ ...values, rain, location });
+            showMessage({
+              message: "Informação enviada!",
+              duration: 1950,
+              icon: "success",
+              type: "success",
+              onPress: () => {
+              },
+            });
+            props.navigation.goBack(null);
+          }}
+          validationSchema={validationSchema}
+        >
+          <View>
+            <View
+              style={{ flexDirection: "row", justifyContent: "space-around" }}
+            >
+              <TouchableNativeFeedback onPress={() => setRain(0)}>
+                <View
+                  borderWidth={rain == 0 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/sem_chuva.png")}
+                  />
+                  <Text style={styles.text}>Sem chuva</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRain(1)}>
-              <View
-                borderWidth={rain == 1 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/chuva_peq.png")}
-                />
-                <Text style={styles.text}>Chuva fraca</Text>
-              </View>
-            </TouchableNativeFeedback>
+              <TouchableNativeFeedback onPress={() => setRain(1)}>
+                <View
+                  borderWidth={rain == 1 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/chuva_fraca.png")}
+                  />
+                  <Text style={styles.text}>Chuva fraca</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRain(2)}>
-              <View
-                borderWidth={rain == 2 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/chuva_peq.png")}
-                />
-                <Text style={styles.text}>Chuva{"\n"}moderada</Text>
-              </View>
-            </TouchableNativeFeedback>
-          </View>
+              <TouchableNativeFeedback onPress={() => setRain(2)}>
+                <View
+                  borderWidth={rain == 2 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/chuva_peq.png")}
+                  />
+                  <Text style={styles.text}>Chuva{"\n"}moderada</Text>
+                </View>
+              </TouchableNativeFeedback>
+            </View>
 
-          <View
-            style={{ flexDirection: "row", justifyContent: "space-around" }}
-          >
-            <TouchableNativeFeedback onPress={() => setRain(3)}>
-              <View
-                borderWidth={rain == 3 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/chuva_forte.png")}
-                />
-                <Text style={styles.text}>Chuva forte</Text>
-              </View>
-            </TouchableNativeFeedback>
+            <View
+              style={{ flexDirection: "row", justifyContent: "space-around" }}
+            >
+              <TouchableNativeFeedback onPress={() => setRain(3)}>
+                <View
+                  borderWidth={rain == 3 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/chuva_forte.png")}
+                  />
+                  <Text style={styles.text}>Chuva forte</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRain(4)}>
-              <View
-                borderWidth={rain == 4 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/chuva_muito_forte.png")}
-                />
-                <Text style={styles.text}>Chuva muito{"\n"}forte</Text>
-              </View>
-            </TouchableNativeFeedback>
+              <TouchableNativeFeedback onPress={() => setRain(4)}>
+                <View
+                  borderWidth={rain == 4 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/chuva_muito_forte.png")}
+                  />
+                  <Text style={styles.text}>Chuva muito{"\n"}forte</Text>
+                </View>
+              </TouchableNativeFeedback>
 
-            <TouchableNativeFeedback onPress={() => setRain(5)}>
-              <View
-                borderWidth={rain == 5 ? borderWidth : 0}
-                style={styles.img_block}
-              >
-                <Image
-                  style={styles.floodingLogo}
-                  source={require("../assets/chuva_pancadas.png")}
-                />
-                <Text style={styles.text}>Pancada de{"\n"}chuva</Text>
-              </View>
-            </TouchableNativeFeedback>
+              <TouchableNativeFeedback onPress={() => setRain(5)}>
+                <View
+                  borderWidth={rain == 5 ? borderWidth : 0}
+                  style={styles.img_block}
+                >
+                  <Image
+                    style={styles.floodingLogo}
+                    source={require("../assets/chuva_pancadas.png")}
+                  />
+                  <Text style={styles.text}>Pancada de{"\n"}chuva</Text>
+                </View>
+              </TouchableNativeFeedback>
+            </View>
           </View>
-        </View>
-        <FormImagePicker backgroundColor="#1976D2" name="images" />
+          <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
-      </Form>
+          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+        </Form>
       </ScrollView>
     </Screen>
   );
@@ -156,7 +156,7 @@ function RainSharingDataScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 10,
+    padding: 10,
   },
   img_block: {
     borderRadius: 5,

src/app/screens/RiverFloodSharingDataScreen.js

@@ -39,7 +39,7 @@ function RiverFloodSharingDataScreen(props) {
       <KeyboardAwareScrollView
       resetScrollToCoords={{ x: 0, y: 0 }}
       contentContainerStyle={styles.container}
-      scrollEnabled={false}>
+      scrollEnabled={true}>
       <Form
         initialValues={{
           images: [],
@@ -88,7 +88,7 @@ function RiverFloodSharingDataScreen(props) {
           </View>
 
           <View
-            style={{ flexDirection: "row", justifyContent: "space-around" }}
+            style={{ marginTop: 10, flexDirection: "row", justifyContent: "space-around" }}
           >
             <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
               <View
@@ -117,13 +117,10 @@ function RiverFloodSharingDataScreen(props) {
             </TouchableNativeFeedback>
           </View>
         </View>
+        
         <FormImagePicker backgroundColor="#1976D2" name="images" />
 
-        <SubmitButton
-          title="Enviar"
-          backgroundColor={colors.primary}
-          onPress={() => props.navigation.pop()}
-        />
+        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
       </KeyboardAwareScrollView>
     </Screen>

src/app/screens/SharingFloodZonesScreen.js

@@ -116,7 +116,7 @@ function SharingFloodZonesScreen(props) {
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: 10,
+    padding: 10,
   },
 
   header: {