Changing buttons in rain sharing data to new layout changes

src/app/screens/RainSharingDataScreen.js

@@ -14,15 +14,14 @@ import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import assets from "../config/assets";
 import moment from "moment";
 import { EventLocationContext } from "../context/EventLocationContext";
-import { useIsFocused } from "@react-navigation/native";
 import PickEventDateLocation from "../components/PickEventDateLocation";
+import SvgLabeledButton from "../components/SvgLabeledButton";
 
 const validationSchema = Yup.object().shape({
   images: Yup.array(),
   description: Yup.string().label("Description"),
 });
 
-
 function RainSharingDataScreen(props) {
   const [rain, setRain] = useState(-1);
   const [error, setError] = useState(false);
@@ -71,44 +70,41 @@ function RainSharingDataScreen(props) {
               paddingTop: 16,
             }}
           >
-            <View  flexDirection="row" justifyContent="center" paddingBottom={16}>
-              <TouchableNativeFeedback onPress={() => setRain(0)}>
-                <View style={{paddingRight: 16}}>
-                  {rain == 0 ? (
-                    <assets.rainLevel.Rain_0_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_0_5 {...dims} />
-                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRain(1)}>
-                  {rain == 1 ? (
-                    <assets.rainLevel.Rain_1_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_1_5 {...dims} />
-                  )}
-              </TouchableNativeFeedback>
+            <View
+              flexDirection="row"
+              justifyContent="center"
+              paddingBottom={16}
+            >
+              <SvgLabeledButton
+                style={{ marginRight: 17 }}
+                onPress={() => setRain(0)}
+                SvgImage={assets.rainLevel.Rain_0_5}
+                label={"SEM CHUVA"}
+                isToggle={rain == 0}
+              />
+              <SvgLabeledButton
+                onPress={() => setRain(1)}
+                SvgImage={assets.rainLevel.Rain_1_5}
+                label={"CHUVA FRACA"}
+                isToggle={rain == 1}
+              />
             </View>
 
             <View flexDirection="row" justifyContent="center">
-              <TouchableNativeFeedback onPress={() => setRain(2)}>
-                <View style={{paddingRight: 16}}>
-                  {rain == 2 ? (
-                    <assets.rainLevel.Rain_2_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_2_5 {...dims} />
-                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRain(3)}>
-                  {rain == 3 ? (
-                    <assets.rainLevel.Rain_3_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_3_5 {...dims} />
-                  )}
-              </TouchableNativeFeedback>
+              <SvgLabeledButton
+                style={{ marginRight: 17 }}
+                onPress={() => setRain(2)}
+                SvgImage={assets.rainLevel.Rain_2_5}
+                label={"CHUVA MODERADA"}
+                isToggle={rain == 2}
+              />
+
+              <SvgLabeledButton
+                onPress={() => setRain(3)}
+                SvgImage={assets.rainLevel.Rain_3_5}
+                label={"CHUVA FORTE"}
+                isToggle={rain == 3}
+              />
             </View>
           </View>