Change rain icons in forms to svg

src/app/config/assets.js

@@ -6,6 +6,11 @@ import RiverFlood from "../assets/river-extravasado.svg";
 import RiverLow from "../assets/river_low.svg";
 import RiverHigh from "../assets/river_high.svg";
 import RiverNormal from "../assets/river_normal.svg";
+import RainNot from "../assets/sem_chuva.svg";
+import RainLow from "../assets/chuva_fraca.svg";
+import RainMedium from "../assets/chuva_moderada.svg";
+import RainHigh from "../assets/chuva_forte.svg";
+import RainVeryHigh from "../assets/chuva_muito_forte.svg";
 
 export default {
   floodZones: {
@@ -27,10 +32,15 @@ export default {
   rainLevel: {
     RainIcon: RainIcon,
     rain_0_5: require("../assets/sem_chuva.png"),
+    Rain_0_5: RainNot,
     rain_1_5: require("../assets/chuva_fraca.png"),
+    Rain_1_5: RainLow,
     rain_2_5: require("../assets/chuva_peq.png"),
+    Rain_2_5: RainMedium,
     rain_3_5: require("../assets/chuva_forte.png"),
+    Rain_3_5: RainHigh,
     rain_4_5: require("../assets/chuva_muito_forte.png"),
+    Rain_4_5: RainVeryHigh,
     rain_5_5: require("../assets/chuva_pancadas.png"),
   },
   pluviometer: require("../assets/diario_pluviometrico.png"),

src/app/screens/RainSharingDataScreen.js

@@ -37,6 +37,8 @@ function RainSharingDataScreen(props) {
   const [date, setDate] = useState(moment());
   const [time, setTime] = useState(moment());
 
+  const dims = scaleDimsFromWidth(85, 85, 27);
+
   return (
     <Screen style={styles.container}>
       <Text
@@ -79,11 +81,7 @@ function RainSharingDataScreen(props) {
                   borderColor={rain == 0 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_0_5}
-                  />
-                  <Text style={styles.text}>Sem chuva</Text>
+                  <assets.rainLevel.Rain_0_5 {...dims} />
                 </View>
               </TouchableNativeFeedback>
 
@@ -92,11 +90,7 @@ function RainSharingDataScreen(props) {
                   borderColor={rain == 1 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_1_5}
-                  />
-                  <Text style={styles.text}>Chuva fraca</Text>
+                  <assets.rainLevel.Rain_1_5 {...dims} />
                 </View>
               </TouchableNativeFeedback>
 
@@ -105,26 +99,18 @@ function RainSharingDataScreen(props) {
                   borderColor={rain == 2 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_2_5}
-                  />
-                  <Text style={styles.text}>Chuva moderada</Text>
+                  <assets.rainLevel.Rain_2_5 {...dims} />
                 </View>
               </TouchableNativeFeedback>
             </View>
 
-            <View style={styles.imgs_row}>
+            <View flexDirection="row" justifyContent="center">
               <TouchableNativeFeedback onPress={() => setRain(3)}>
                 <View
                   borderColor={rain == 3 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_3_5}
-                  />
-                  <Text style={styles.text}>Chuva forte</Text>
+                  <assets.rainLevel.Rain_3_5 {...dims} />
                 </View>
               </TouchableNativeFeedback>
 
@@ -133,15 +119,11 @@ function RainSharingDataScreen(props) {
                   borderColor={rain == 4 ? colors.primary : colors.white}
                   style={styles.img_block}
                 >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_4_5}
-                  />
-                  <Text style={styles.text}>Chuva muito forte</Text>
+                  <assets.rainLevel.Rain_4_5 {...dims} />
                 </View>
               </TouchableNativeFeedback>
 
-              <TouchableNativeFeedback onPress={() => setRain(5)}>
+              {/*<TouchableNativeFeedback onPress={() => setRain(5)}>
                 <View
                   borderColor={rain == 5 ? colors.primary : colors.white}
                   style={styles.img_block}
@@ -152,7 +134,7 @@ function RainSharingDataScreen(props) {
                   />
                   <Text style={styles.text}>Pancada de chuva</Text>
                 </View>
-              </TouchableNativeFeedback>
+              </TouchableNativeFeedback>*/}
             </View>
           </View>
 
@@ -162,9 +144,21 @@ function RainSharingDataScreen(props) {
 
           <FormImagePicker backgroundColor={colors.primary} name="images" />
 
-          <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
             {/*Data da coleta:*/}
-            <View style={{ flex: 0.48, borderRightColor: colors.cerulean, borderRightWidth: 1 }}>
+            <View
+              style={{
+                flex: 0.48,
+                borderRightColor: colors.primary,
+                borderRightWidth: 1,
+              }}
+            >
               <FormDatePicker
                 textStyle={{
                   borderColor: colors.gray,
@@ -177,7 +171,9 @@ function RainSharingDataScreen(props) {
             </View>
             {/*Local do evento:*/}
             <View style={{ flex: 0.48 }}>
-              <TouchableOpacity onPress={() => props.navigation.navigate("FormMap")}>
+              <TouchableOpacity
+                onPress={() => props.navigation.navigate("FormMap")}
+              >
                 <FormLocationPicker />
               </TouchableOpacity>
             </View>
@@ -197,8 +193,6 @@ function RainSharingDataScreen(props) {
   );
 }
 
-const dims = scaleDimsFromWidth(85, 85, 27);
-
 const styles = StyleSheet.create({
   container: {
     padding: 10,
@@ -207,26 +201,16 @@ const styles = StyleSheet.create({
   img_block: {
     flex: 1,
     borderRadius: 5,
-    padding: 10,
     borderStyle: "dotted",
     borderColor: colors.white,
     borderWidth: borderWidth,
     alignItems: "center",
-    width: dims.width,
-  },
-  floodingLogo: {
-    width: dims.width * 0.8,
-    height: dims.height * 0.8,
   },
+
   imgs_row: {
     flexDirection: "row",
     justifyContent: "space-between",
   },
-  text: {
-    fontSize: dimensions.text.default,
-    textAlign: "center",
-    marginTop: 10,
-  },
   error_txt: {
     fontSize: dimensions.text.default,
     color: colors.danger,