New buttons i nsharing flood zones screen

src/app/components/SvgLabeledButton.js

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
-import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight } from "react-native";
+import React from "react";
+import { StyleSheet, View, Text, TouchableHighlight, TouchableNativeFeedback } from "react-native";
 import colors from "../config/colors";
 import { scaleDimsFromWidth } from "../config/dimensions";
-import {Shadow} from "react-native-shadow-2";
+import { Shadow } from "react-native-shadow-2";
 
 export default function SvgLabeledButton({
   SvgImage,
@@ -16,34 +16,32 @@ export default function SvgLabeledButton({
   toggledBgColor = colors.toggle,
 }) {
   const dims = scaleDimsFromWidth(width, height, 16);
-  return (   
-
+  return (
     <Shadow
-      viewStyle={[{width: 125, height: 125}, style]}
-        offset={[0, 4]}
-        distance={4}
-        radius={4}
-        startColor="rgba(0, 0, 0, 0.25)"
-        paintInside={true}
-      >
-    <TouchableHighlight onPress={onPress}>
-   
-      <View style={styles.container}>
-        <View
-          style={[
-            styles.innerContainer,
-            {
-              backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
-              borderColor: isToggle ? toggledBgColor : normalBgcolor,
-            },
-          ]}
-        >
-          <SvgImage {...dims} />
+      viewStyle={[{ width: 130, height: 130 }, style]}
+      offset={[0, 4]}
+      distance={4}
+      radius={4}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
+      <TouchableNativeFeedback onPress={onPress}>
+        <View style={styles.container}>
+          <View
+            style={[
+              styles.innerContainer,
+              {
+                backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
+                borderColor: isToggle ? toggledBgColor : normalBgcolor,
+              },
+            ]}
+          >
+            <SvgImage {...dims} />
 
-          <Text style={styles.label}>{label}</Text>
+            <Text style={styles.label}>{label}</Text>
+          </View>
         </View>
-      </View>
-    </TouchableHighlight>
+      </TouchableNativeFeedback>
     </Shadow>
   );
 }
@@ -55,8 +53,8 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary,
     borderWidth: 6,
     borderRadius: 6,
-    width: 125,
-    height: 125,
+    width: 130,
+    height: 130,
   },
   innerContainer: {
     overflow: "hidden",
@@ -65,7 +63,6 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     alignItems: "center",
     justifyContent: "center",
-    
   },
   label: {
     paddingTop: 5,

src/app/config/assets.js

@@ -43,16 +43,14 @@ import PinRioExtravasado from "../assets/river/PinRioExtravasado";
 import PinRioCheio from "../assets/river/PinRioCheio";
 import PinPluviometroArt from "../assets/pluviometer/PinPluviometroArt";
 
+import FloodPassable from "../assets/floodZonesAssets/passable.svg";
+import FloodNotPassable from "../assets/floodZonesAssets/not_passable.svg";
+
 export default {
   floodZones: {
     FloodZonesIcon: FloodZones,
-    passable: require("../assets/floodZonesAssets/passable_icon.png"),
-    passable_toggle: require("../assets/floodZonesAssets/Transitavel_c.png"),
-
-    passable_2: require("../assets/floodZonesAssets/passable_2.png"),
-    notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
-    notPassable2: require("../assets/floodZonesAssets/notpassable_2_toggle.png"),
-    notPassable_toggle: require("../assets/floodZonesAssets/Intransitavel_c.png"),
+    passable: FloodPassable,
+    notPassable: FloodNotPassable,
   },
 
   riverLevel: {

src/app/screens/SharingFloodZonesScreen.js

@@ -7,25 +7,16 @@ import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
 import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
-import {
-  TouchableNativeFeedback,
-  TouchableOpacity,
-} from "react-native-gesture-handler";
+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 Screen from "../components/Screen";
 import assets from "../config/assets";
 import moment from "moment";
-import FormDatePicker from "../components/forms/FormDatePicker";
-import FormLocationPicker from "../components/forms/FormLocationPicker";
 import { EventLocationContext } from "../context/EventLocationContext";
 import PickEventDateLocation from "../components/PickEventDateLocation";
-
-/*function submitForm(props) {
-  console.log(props);
-  insertFloodZone(props);
-}*/
+import SvgLabeledButton from "../components/SvgLabeledButton";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
@@ -81,35 +72,20 @@ function SharingFloodZonesScreen(props) {
           validationSchema={validationSchema}
         >
           <View style={styles.imgs_container}>
-            <TouchableNativeFeedback onPress={() => setPassable(1)}>
-              <View style={{paddingRight: 17}}>
-                {passable == 1 ? (
-                  <Image
-                    source={assets.floodZones.passable_toggle}
-                    style={styles.image}
-                  />
-                ) : (
-                  <Image
-                    style={styles.image}
-                    source={assets.floodZones.passable_2}
-                  />
-                )}
-              </View>
-            </TouchableNativeFeedback>
-
-            <TouchableNativeFeedback onPress={() => setPassable(0)}>
-                {passable == 0 ? (
-                  <Image
-                    source={assets.floodZones.notPassable_toggle}
-                    style={styles.image}
-                  />
-                ) : (
-                  <Image
-                    style={styles.image}
-                    source={assets.floodZones.notPassable2}
-                  />
-                )}
-            </TouchableNativeFeedback>
+            <SvgLabeledButton
+              style={{marginRight: 17}}
+              label={"TRANSITÁVEL"}
+              isToggle={passable == 1}
+              SvgImage={assets.floodZones.passable}
+              onPress={() => setPassable(1)}
+            />
+
+            <SvgLabeledButton
+              onPress={() => setPassable(0)}
+              label={"INTRANSITÁVEL"}
+              isToggle={passable == 0}
+              SvgImage={assets.floodZones.notPassable}
+            />
           </View>
 
           {error && passable == -1 && (