Fixing some broken svg images and updating Rain forms to toggle assets

src/app/config/assets.js

@@ -17,6 +17,11 @@ import RainLow from "../assets/rain/chuva_fraca.svg";
 import RainMedium from "../assets/rain/chuva_moderada.svg";
 import RainHigh from "../assets/rain/chuva_forte.svg";
 import RainVeryHigh from "../assets/rain/chuva_muito_forte.svg";
+import RainNotToggle from "../assets/rain/sem_chuva_toggle.svg";
+import RainLowToggle from "../assets/rain/chuva_fraca_toggle.svg";
+import RainMediumToggle from "../assets/rain/chuva_moderada_toggle.svg";
+import RainHighToggle from "../assets/rain/chuva_forte_toggle.svg";
+import RainVeryHighToggle from "../assets/rain/chuva_muito_forte_toggle.svg";
 
 export default {
   floodZones: {
@@ -52,14 +57,24 @@ export default {
     RainIcon: RainIcon,
     rain_0_5: require("../assets/rain/sem_chuva.png"),
     Rain_0_5: RainNot,
+    Rain_0_5_Toggle: RainNotToggle,
+
     rain_1_5: require("../assets/rain/chuva_fraca.png"),
     Rain_1_5: RainLow,
+    Rain_1_5_Toggle: RainLowToggle,
+
     rain_2_5: require("../assets/rain/chuva_peq.png"),
     Rain_2_5: RainMedium,
+    Rain_2_5_Toggle: RainMediumToggle,
+
     rain_3_5: require("../assets/rain/chuva_forte.png"),
     Rain_3_5: RainHigh,
+    Rain_3_5_Toggle: RainHighToggle,
+
     rain_4_5: require("../assets/rain/chuva_muito_forte.png"),
     Rain_4_5: RainVeryHigh,
+    Rain_4_5_Toggle: RainVeryHighToggle,
+
     rain_5_5: require("../assets/rain/chuva_pancadas.png"),
   },
   pluviometer: require("../assets/pluviometer/diario_pluviometrico.png"),

src/app/screens/RainSharingDataScreen.js

@@ -2,16 +2,10 @@ import React, { useContext, useEffect, useState } from "react";
 import { StyleSheet, View, ScrollView } from "react-native";
 import * as Yup from "yup";
 
-import {
-  Form,
-  FormPicker as Picker,
-  SubmitButton,
-  FormField,
-} from "../components/forms";
+import { Form, SubmitButton, FormField } from "../components/forms";
 import Screen from "../components/Screen";
 import FormImagePicker from "../components/forms/FormImagePicker";
-import useLocation from "../hooks/useLocation";
-import { Image, Text, TouchableOpacity } from "react-native";
+import { Text, TouchableOpacity } from "react-native";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
@@ -74,64 +68,56 @@ function RainSharingDataScreen(props) {
           <View>
             <View style={styles.imgs_row}>
               <TouchableNativeFeedback onPress={() => setRain(0)}>
-                <View
-                  borderColor={rain == 0 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <assets.rainLevel.Rain_0_5 {...dims} />
+                <View style={styles.img_block}>
+                  {rain == 0 ? (
+                    <assets.rainLevel.Rain_0_5_Toggle {...dims} />
+                  ) : (
+                    <assets.rainLevel.Rain_0_5 {...dims} />
+                  )}
                 </View>
               </TouchableNativeFeedback>
 
               <TouchableNativeFeedback onPress={() => setRain(1)}>
-                <View
-                  borderColor={rain == 1 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <assets.rainLevel.Rain_1_5 {...dims} />
+                <View style={styles.img_block}>
+                  {rain == 1 ? (
+                    <assets.rainLevel.Rain_1_5_Toggle {...dims} />
+                  ) : (
+                    <assets.rainLevel.Rain_1_5 {...dims} />
+                  )}
                 </View>
               </TouchableNativeFeedback>
 
               <TouchableNativeFeedback onPress={() => setRain(2)}>
-                <View
-                  borderColor={rain == 2 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <assets.rainLevel.Rain_2_5 {...dims} />
+                <View style={styles.img_block}>
+                  {rain == 2 ? (
+                    <assets.rainLevel.Rain_2_5_Toggle {...dims} />
+                  ) : (
+                    <assets.rainLevel.Rain_2_5 {...dims} />
+                  )}
                 </View>
               </TouchableNativeFeedback>
             </View>
 
             <View flexDirection="row" justifyContent="center">
               <TouchableNativeFeedback onPress={() => setRain(3)}>
-                <View
-                  borderColor={rain == 3 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <assets.rainLevel.Rain_3_5 {...dims} />
+                <View style={styles.img_block}>
+                  {rain == 3 ? (
+                    <assets.rainLevel.Rain_3_5_Toggle {...dims} />
+                  ) : (
+                    <assets.rainLevel.Rain_3_5 {...dims} />
+                  )}
                 </View>
               </TouchableNativeFeedback>
 
               <TouchableNativeFeedback onPress={() => setRain(4)}>
-                <View
-                  borderColor={rain == 4 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <assets.rainLevel.Rain_4_5 {...dims} />
+                <View style={styles.img_block}>
+                  {rain == 4 ? (
+                    <assets.rainLevel.Rain_4_5_Toggle {...dims} />
+                  ) : (
+                    <assets.rainLevel.Rain_4_5 {...dims} />
+                  )}
                 </View>
               </TouchableNativeFeedback>
-
-              {/*<TouchableNativeFeedback onPress={() => setRain(5)}>
-                <View
-                  borderColor={rain == 5 ? colors.primary : colors.white}
-                  style={styles.img_block}
-                >
-                  <Image
-                    style={styles.floodingLogo}
-                    source={assets.rainLevel.rain_5_5}
-                  />
-                  <Text style={styles.text}>Pancada de chuva</Text>
-                </View>
-              </TouchableNativeFeedback>*/}
             </View>
           </View>
 
@@ -203,7 +189,6 @@ const styles = StyleSheet.create({
     borderWidth: borderWidth,
     alignItems: "center",
   },
-
   imgs_row: {
     flexDirection: "row",
     justifyContent: "space-between",