Making some components width/height flexible depending on phone screen

size and a scale arg.

src/app/config/dimensions.js

@@ -0,0 +1,24 @@
+import { Dimensions } from "react-native";
+
+const screen_width = Dimensions.get("window").width;
+
+/* imageScaleToSize (iw, ih, scale_w)
+ * function for scaling images dinamically based on screen width
+ *
+ * iw: actual image width,
+ * ih: actual image height,
+ * scale_w: scale ratio of the image width.
+ *
+ * if scale_w is 50, then the returned value for width would
+ * be 50% of the screen width
+ *
+ * returns:
+ *
+ */
+function scaleDimsFromWidth(iw, ih, scale_w) {
+  const sw = (scale_w / 100.0) * screen_width;
+  const sh = ih * (sw / iw);
+  return { width: sw, height: sh };
+}
+
+export { screen_width, scaleDimsFromWidth };

src/app/screens/RainSharingDataScreen.js

@@ -2,11 +2,7 @@ import React, { useState } from "react";
 import { StyleSheet, View, ScrollView } from "react-native";
 import * as Yup from "yup";
 
-import {
-  Form,
-  FormPicker as Picker,
-  SubmitButton,
-} from "../components/forms";
+import { Form, FormPicker as Picker, SubmitButton } from "../components/forms";
 import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
@@ -15,6 +11,7 @@ import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
+import { scaleDimsFromWidth } from "../config/dimensions";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
@@ -51,17 +48,14 @@ function RainSharingDataScreen(props) {
               duration: 1950,
               icon: "success",
               type: "success",
-              onPress: () => {
-              },
+              onPress: () => {},
             });
             props.navigation.goBack(null);
           }}
           validationSchema={validationSchema}
         >
           <View>
-            <View
-              style={{ flexDirection: "row", justifyContent: "space-around" }}
-            >
+            <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(0)}>
                 <View
                   borderWidth={rain == 0 ? borderWidth : 0}
@@ -97,14 +91,12 @@ function RainSharingDataScreen(props) {
                     style={styles.floodingLogo}
                     source={require("../assets/chuva_peq.png")}
                   />
-                  <Text style={styles.text}>Chuva{"\n"}moderada</Text>
+                  <Text style={styles.text}>Chuva moderada</Text>
                 </View>
               </TouchableNativeFeedback>
             </View>
 
-            <View
-              style={{ flexDirection: "row", justifyContent: "space-around" }}
-            >
+            <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(3)}>
                 <View
                   borderWidth={rain == 3 ? borderWidth : 0}
@@ -127,7 +119,7 @@ function RainSharingDataScreen(props) {
                     style={styles.floodingLogo}
                     source={require("../assets/chuva_muito_forte.png")}
                   />
-                  <Text style={styles.text}>Chuva muito{"\n"}forte</Text>
+                  <Text style={styles.text}>Chuva muito forte</Text>
                 </View>
               </TouchableNativeFeedback>
 
@@ -140,7 +132,7 @@ function RainSharingDataScreen(props) {
                     style={styles.floodingLogo}
                     source={require("../assets/chuva_pancadas.png")}
                   />
-                  <Text style={styles.text}>Pancada de{"\n"}chuva</Text>
+                  <Text style={styles.text}>Pancada de chuva</Text>
                 </View>
               </TouchableNativeFeedback>
             </View>
@@ -154,6 +146,8 @@ function RainSharingDataScreen(props) {
   );
 }
 
+const dims = scaleDimsFromWidth(85, 85, 25);
+
 const styles = StyleSheet.create({
   container: {
     padding: 10,
@@ -164,11 +158,15 @@ const styles = StyleSheet.create({
     borderStyle: "dotted",
     borderColor: colors.primary,
     alignItems: "center",
-    width: 110,
+    width: dims.width,
   },
   floodingLogo: {
-    width: 85,
-    height: 85,
+    width: dims.width * 0.8,
+    height: dims.height * 0.8,
+  },
+  imgs_row: {
+    flexDirection: "row",
+    justifyContent: "space-around",
   },
   text: {
     fontSize: 14,

src/app/screens/SharingFloodZonesScreen.js

@@ -1,21 +1,16 @@
 import React, { useState } from "react";
-import { Dimensions } from "react-native";
-import {
-  StyleSheet,
-  Text,
-  Image,
-  View,
-} from "react-native";
+import { StyleSheet, Text, Image, View } from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
+import { scaleDimsFromWidth } from "../config/dimensions";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertFloodZone } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import Screen from "../components/Screen";
 
 function submitForm(props) {
@@ -30,9 +25,6 @@ const validationSchema = Yup.object().shape({
     .required("Por favor, forneça uma descrição"),
 });
 
-const screen_width = Dimensions.get("window").width;
-const borderWidth = 3;
-
 function SharingFloodZonesScreen(props) {
   const [passable, setPassable] = useState(0);
   const location = useLocation();
@@ -43,7 +35,7 @@ function SharingFloodZonesScreen(props) {
         style={{
           fontSize: 18,
           fontWeight: "bold",
-          color: "#1976D2",
+          color: colors.primary,
           textAlign: "center",
           marginBottom: 30,
         }}
@@ -51,68 +43,70 @@ function SharingFloodZonesScreen(props) {
         Pontos de alagamento
       </Text>
       <KeyboardAwareScrollView
-      resetScrollToCoords={{ x: 0, y: 0 }}
-      contentContainerStyle={styles.container}
-      scrollEnabled={true}>
-      <Form
-        initialValues={{
-          images: [],
-          description: "",
-        }}
-        onSubmit={(values) => {
-          submitForm({ ...values, passable, location });
-          showMessage({
-            message: "Informação enviada!",
-            duration: 1950,
-            icon: "success",
-            type: "success",
-          });
-          props.navigation.goBack(null);
-        }}
-        validationSchema={validationSchema}
+        resetScrollToCoords={{ x: 0, y: 0 }}
+        contentContainerStyle={styles.container}
+        scrollEnabled={true}
       >
-        <View style={styles.imgs_container}>
-          <TouchableNativeFeedback onPress={() => setPassable(1)}>
-            <View
-              style={styles.img_block}
-              borderWidth={passable == 1 ? borderWidth : 0}
-            >
-              <Image
-                style={styles.image}
-                source={require("../assets/floodZonesAssets/passable_icon.png")}
-              />
-              <Text style={styles.text}>Transitável</Text>
-            </View>
-          </TouchableNativeFeedback>
+        <Form
+          initialValues={{
+            images: [],
+            description: "",
+          }}
+          onSubmit={(values) => {
+            submitForm({ ...values, passable, location });
+            showMessage({
+              message: "Informação enviada!",
+              duration: 1950,
+              icon: "success",
+              type: "success",
+            });
+            props.navigation.goBack(null);
+          }}
+          validationSchema={validationSchema}
+        >
+          <View style={styles.imgs_container}>
+            <TouchableNativeFeedback onPress={() => setPassable(1)}>
+              <View
+                style={styles.img_block}
+                borderWidth={passable == 1 ? borderWidth : 0}
+              >
+                <Image
+                  style={styles.image}
+                  source={require("../assets/floodZonesAssets/passable_icon.png")}
+                />
+                <Text style={styles.text}>Transitável</Text>
+              </View>
+            </TouchableNativeFeedback>
 
-          <TouchableNativeFeedback onPress={() => setPassable(0)}>
-            <View
-              style={styles.img_block}
-              borderWidth={passable == 0 ? borderWidth : 0}
-            >
-              <Image
-                style={styles.image}
-                source={require("../assets/floodZonesAssets/not_passable_icon.png")}
-              />
-              <Text style={styles.text}>Intransitável</Text>
-            </View>
-          </TouchableNativeFeedback>
-        </View>
+            <TouchableNativeFeedback onPress={() => setPassable(0)}>
+              <View
+                style={styles.img_block}
+                borderWidth={passable == 0 ? borderWidth : 0}
+              >
+                <Image
+                  style={styles.image}
+                  source={require("../assets/floodZonesAssets/not_passable_icon.png")}
+                />
+                <Text style={styles.text}>Intransitável</Text>
+              </View>
+            </TouchableNativeFeedback>
+          </View>
 
-        <FormImagePicker name="images" height={10} />
-        <FormField
-          maxLength={255}
-          multiline
-          name="description"
-          numberOfLines={3}
-          placeholder="Descrição"
-        />
-        <SubmitButton title="Enviar" backgroundColor={colors.primary} />
-      </Form>
+          <FormImagePicker name="images" height={10} />
+          <FormField
+            maxLength={255}
+            multiline
+            name="description"
+            numberOfLines={3}
+            placeholder="Descrição"
+          />
+          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+        </Form>
       </KeyboardAwareScrollView>
     </Screen>
   );
 }
+const borderWidth = 3;
 
 const styles = StyleSheet.create({
   container: {
@@ -125,12 +119,10 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
   image: {
-    width: 150,
-    height: 80,
+    ...scaleDimsFromWidth(150, 80, 35.0),
     resizeMode: "contain",
   },
   img_block: {
-    height: 120,
     padding: 10,
     borderRadius: 5,
     borderStyle: "dotted",
@@ -140,9 +132,9 @@ const styles = StyleSheet.create({
   },
   imgs_container: {
     alignSelf: "center",
-    width: screen_width,
+    flexGrow: 1,
     flexDirection: "row",
-    justifyContent: "center",
+    justifyContent: "space-between",
   },
 
   text: {