Image responsiveness in forms menu and river flooding

src/app/screens/RiverFloodSharingDataScreen.js

@@ -13,6 +13,7 @@ import { insertRiverData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import assets from "../config/assets";
+import { scaleDimsFromWidth } from "../config/dimensions";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -133,6 +134,8 @@ function RiverFloodSharingDataScreen(props) {
   );
 }
 
+const dims = scaleDimsFromWidth(85, 85, 42);
+
 const styles = StyleSheet.create({
   container: {
     padding: 10,
@@ -145,11 +148,11 @@ const styles = StyleSheet.create({
     borderColor: colors.white,
     borderWidth: borderWidth,
     alignItems: "center",
-    width: 130,
+    width: dims.width,
   },
   floodingLogo: {
-    width: 85,
-    height: 85,
+    width: dims.width * 0.8,
+    height: dims.height * 0.8,
   },
   imgs_row: {
     flexDirection: "row",

src/app/screens/SharingDataScreen.js

@@ -2,7 +2,9 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 
 import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
-import assets from "../config/assets"
+import assets from "../config/assets";
+import { scaleDimsFromWidth } from "../config/dimensions";
+
 //1/3
 
 function SharingDataScreen({ navigation }) {
@@ -14,10 +16,7 @@ function SharingDataScreen({ navigation }) {
             style={{ alignItems: "center" }}
             onPress={() => navigation.navigate("FloodSharingData")}
           >
-            <Image
-              style={styles.floodingLogo}
-              source={assets.floodZones.floodIcon}
-            />
+            <Image style={styles.icon} source={assets.floodZones.floodIcon} />
             <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
           </TouchableOpacity>
 
@@ -25,10 +24,7 @@ function SharingDataScreen({ navigation }) {
             style={{ alignItems: "center" }}
             onPress={() => navigation.navigate("RainSharingData")}
           >
-            <Image
-              style={styles.floodingLogo}
-              source={assets.rainLevel.rain_2_5}
-            />
+            <Image style={styles.icon} source={assets.rainLevel.rain_logo} />
             <Text style={styles.text}>Chuva</Text>
           </TouchableOpacity>
         </View>
@@ -38,7 +34,7 @@ function SharingDataScreen({ navigation }) {
             style={{ alignItems: "center" }}
             onPress={() => navigation.navigate("PluviometerSharingData")}
           >
-            <Image style={styles.floodingLogo} source={assets.pluviometer} />
+            <Image style={styles.icon} source={assets.pluviometer} />
             <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
           </TouchableOpacity>
 
@@ -46,10 +42,7 @@ function SharingDataScreen({ navigation }) {
             style={{ alignItems: "center" }}
             onPress={() => navigation.navigate("RiverFloodData")}
           >
-            <Image
-              style={styles.floodingLogo}
-              source={assets.riverLevel.riverIcon}
-            />
+            <Image style={styles.icon} source={assets.riverLevel.riverIcon} />
             <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
           </TouchableOpacity>
         </View>
@@ -58,32 +51,24 @@ function SharingDataScreen({ navigation }) {
   );
 }
 
+const dims = scaleDimsFromWidth(248, 251, 35);
+
 const styles = StyleSheet.create({
   text: {
     fontSize: 14,
     textAlign: "center",
     marginTop: 10,
   },
-  rainLogo: {
-    width: 110,
-    height: 100,
-    margin: 30,
-  },
-  floodingLogo: {
-    width: 85,
-    height: 85,
-    marginTop: 70,
+  icon: {
+    width: dims.width * 0.8,
+    height: dims.height * 0.8,
+    marginTop: 30,
   },
+
   container: {
     paddingHorizontal: 10,
-    paddingBottom: 10,
-    flex: 1
-
+    flex: 1,
   },
 });
 
-
-
-
-
 export default SharingDataScreen;