improving alignment between components on form screens

src/app/screens/RainSharingDataScreen.js

@@ -38,7 +38,7 @@ function RainSharingDataScreen(props) {
       >
         Chuva
       </Text>
-      <ScrollView style={styles.container}>
+      <ScrollView>
         <Form
           initialValues={{
             images: [],
@@ -159,7 +159,7 @@ function RainSharingDataScreen(props) {
   );
 }
 
-const dims = scaleDimsFromWidth(85, 85, 25);
+const dims = scaleDimsFromWidth(85, 85, 27);
 
 const styles = StyleSheet.create({
   container: {
@@ -167,6 +167,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
   },
   img_block: {
+    flex: 1,
     borderRadius: 5,
     padding: 10,
     borderStyle: "dotted",
@@ -181,7 +182,7 @@ const styles = StyleSheet.create({
   },
   imgs_row: {
     flexDirection: "row",
-    justifyContent: "space-around",
+    justifyContent: "space-between",
   },
   text: {
     fontSize: 14,

src/app/screens/RiverFloodSharingDataScreen.js

@@ -40,7 +40,6 @@ function RiverFloodSharingDataScreen(props) {
       </Text>
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
-        contentContainerStyle={styles.container}
         scrollEnabled={true}
       >
         <Form
@@ -64,9 +63,7 @@ function RiverFloodSharingDataScreen(props) {
           validationSchema={validationSchema}
         >
           <View>
-            <View
-              style={{ flexDirection: "row", justifyContent: "space-around" }}
-            >
+            <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
                 <View
                   borderColor={riverScale == 0 ? colors.primary : colors.white}
@@ -94,13 +91,7 @@ function RiverFloodSharingDataScreen(props) {
               </TouchableNativeFeedback>
             </View>
 
-            <View
-              style={{
-                marginTop: 10,
-                flexDirection: "row",
-                justifyContent: "space-around",
-              }}
-            >
+            <View style={{ ...styles.imgs_row, marginTop: 10 }}>
               <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
                 <View
                   borderColor={riverScale == 2 ? colors.primary : colors.white}
@@ -160,6 +151,10 @@ const styles = StyleSheet.create({
     width: 85,
     height: 85,
   },
+  imgs_row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
   text: {
     fontSize: 14,
     textAlign: "center",

src/app/screens/SharingFloodZonesScreen.js

@@ -44,7 +44,6 @@ function SharingFloodZonesScreen(props) {
       </Text>
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
-        contentContainerStyle={styles.container}
         scrollEnabled={true}
       >
         <Form
@@ -115,6 +114,7 @@ function SharingFloodZonesScreen(props) {
   );
 }
 const borderWidth = 4;
+const dims = scaleDimsFromWidth(150, 80, 42.0);
 
 const styles = StyleSheet.create({
   container: {
@@ -128,21 +128,20 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   image: {
-    ...scaleDimsFromWidth(150, 80, 35.0),
+    width: dims.width * 0.9,
+    height: dims.height * 0.9,
     resizeMode: "contain",
   },
   img_block: {
-    padding: 10,
     borderRadius: 5,
+    padding: 10,
     borderStyle: "dotted",
     borderColor: colors.white,
     borderWidth: borderWidth,
-    justifyContent: "center",
     alignItems: "center",
+    width: dims.width,
   },
   imgs_container: {
-    alignSelf: "center",
-    flexGrow: 1,
     flexDirection: "row",
     justifyContent: "space-between",
   },