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,
         }}
@@ -53,7 +45,8 @@ function SharingFloodZonesScreen(props) {
       <KeyboardAwareScrollView
         resetScrollToCoords={{ x: 0, y: 0 }}
         contentContainerStyle={styles.container}
-      scrollEnabled={true}>
+        scrollEnabled={true}
+      >
         <Form
           initialValues={{
             images: [],
@@ -113,6 +106,7 @@ function SharingFloodZonesScreen(props) {
     </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: {