Changing icons in sharing river data to new layout

src/app/screens/RiverFloodSharingDataScreen.js

@@ -1,37 +1,27 @@
 import React, { useEffect, useState, useContext } from "react";
-import { StyleSheet, View, TouchableOpacity, PixelRatio } from "react-native";
+import { StyleSheet, View } 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 } from "react-native";
+import { Text } from "react-native";
 import colors from "../config/colors";
-import { TouchableNativeFeedback } from "react-native-gesture-handler";
 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, dimensions } from "../config/dimensions";
+import { dimensions } from "../config/dimensions";
 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";
+import SvgLabeledButton from "../components/SvgLabeledButton";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
   description: Yup.string().label("Description"),
 });
 
-const borderWidth = 4;
-
 function RiverFloodSharingDataScreen(props) {
   const [riverScale, setRiverScale] = useState(-1);
 
@@ -48,8 +38,6 @@ function RiverFloodSharingDataScreen(props) {
   const [date, setDate] = useState(moment());
   const [time, setTime] = useState(moment());
 
-  const dims = { width: 105, height: 105 }; //scaleDimsFromWidth(80, 80, 26);
-
   return (
     <Screen style={styles.container}>
       <KeyboardAwareScrollView
@@ -97,44 +85,38 @@ function RiverFloodSharingDataScreen(props) {
               paddingBottom={16}
             >
               <View style={styles.imgs_row}>
-                <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
-                  <View style={{ paddingRight: 16 }}>
-                    {riverScale == 0 ? (
-                      <assets.riverLevel.LowToggle {...dims} />
-                    ) : (
-                      <assets.riverLevel.Low {...dims} />
-                    )}
-                  </View>
-                </TouchableNativeFeedback>
-
-                <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
-                  {riverScale == 1 ? (
-                    <assets.riverLevel.NormalToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.Normal {...dims} />
-                  )}
-                </TouchableNativeFeedback>
+                <SvgLabeledButton
+                  style={{ marginRight: 17 }}
+                  onPress={() => setRiverScale(0)}
+                  SvgImage={assets.riverLevel.Low}
+                  label={"BAIXO"}
+                  isToggle={riverScale == 0}
+                />
+
+                <SvgLabeledButton
+                  onPress={() => setRiverScale(1)}
+                  SvgImage={assets.riverLevel.Normal}
+                  label={"NORMAL"}
+                  isToggle={riverScale == 1}
+                />
               </View>
             </View>
 
             <View flexDirection="row" justifyContent="center">
-              <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
-                <View style={{ paddingRight: 16 }}>
-                  {riverScale == 2 ? (
-                    <assets.riverLevel.HighToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.High {...dims} />
-                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
-                {riverScale == 3 ? (
-                  <assets.riverLevel.FloodingToggle {...dims} />
-                ) : (
-                  <assets.riverLevel.Flooding {...dims} />
-                )}
-              </TouchableNativeFeedback>
+              <SvgLabeledButton
+                style={{ marginRight: 17 }}
+                onPress={() => setRiverScale(2)}
+                SvgImage={assets.riverLevel.High}
+                label={"ALTO"}
+                isToggle={riverScale == 2}
+              />
+
+              <SvgLabeledButton
+                onPress={() => setRiverScale(3)}
+                SvgImage={assets.riverLevel.High}
+                label={"INUNDAR"}
+                isToggle={riverScale == 3}
+              />
             </View>
           </View>
 
@@ -150,15 +132,15 @@ function RiverFloodSharingDataScreen(props) {
             navigation={props.navigation}
           />
 
-            <Text style={styles.labelStyle}>Comentário:</Text>
+          <Text style={styles.labelStyle}>Comentário:</Text>
 
-            <FormField
-              maxLength={255}
-              multiline
-              name="description"
-              numberOfLines={3}
-              placeholder="Escreva um comentário (Opcional)..."
-            />
+          <FormField
+            maxLength={255}
+            multiline
+            name="description"
+            numberOfLines={3}
+            placeholder="Escreva um comentário (Opcional)..."
+          />
 
           <View paddingVertical={24}>
             <SubmitButton title="Enviar" backgroundColor={colors.primary} />