diff --git a/src/app/assets/floodZonesAssets/floodZones-logo.svg b/src/app/assets/floodZonesAssets/floodZones-logo.svg
index 293e168..0196166 100644
--- a/src/app/assets/floodZonesAssets/floodZones-logo.svg
+++ b/src/app/assets/floodZonesAssets/floodZones-logo.svg
@@ -1,8 +1 @@
-
-
+
\ No newline at end of file
diff --git a/src/app/assets/pluviometer/pluviometer-logo.svg b/src/app/assets/pluviometer/pluviometer-logo.svg
index 6181c15..33f9df4 100644
--- a/src/app/assets/pluviometer/pluviometer-logo.svg
+++ b/src/app/assets/pluviometer/pluviometer-logo.svg
@@ -1,6 +1 @@
-
+
\ No newline at end of file
diff --git a/src/app/assets/rain/rain-icon.svg b/src/app/assets/rain/rain-icon.svg
index e0a1f1f..a9816d1 100644
--- a/src/app/assets/rain/rain-icon.svg
+++ b/src/app/assets/rain/rain-icon.svg
@@ -1,46 +1 @@
-
+
\ No newline at end of file
diff --git a/src/app/assets/river/river-logo.svg b/src/app/assets/river/river-logo.svg
index ff960b1..6f98dc9 100644
--- a/src/app/assets/river/river-logo.svg
+++ b/src/app/assets/river/river-logo.svg
@@ -1,5 +1 @@
-
+
\ No newline at end of file
diff --git a/src/app/components/SvgLabeledButton.js b/src/app/components/SvgLabeledButton.js
new file mode 100644
index 0000000..8de9175
--- /dev/null
+++ b/src/app/components/SvgLabeledButton.js
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight } from "react-native";
+import colors from "../config/colors";
+import { scaleDimsFromWidth } from "../config/dimensions";
+import {Shadow} from "react-native-shadow-2";
+
+export default function SvgLabeledButton({
+ SvgImage,
+ label,
+ onPress,
+ style = {},
+ width = 95,
+ height = 95,
+ isToggle = false,
+ normalBgcolor = colors.white,
+ toggledBgColor = colors.toggle,
+}) {
+ const dims = scaleDimsFromWidth(width, height, 16);
+ return (
+
+
+
+
+
+
+
+
+ {label}
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ overflow: "hidden",
+ borderColor: colors.primary,
+ backgroundColor: colors.primary,
+ borderWidth: 6,
+ borderRadius: 6,
+ width: 125,
+ height: 125,
+ },
+ innerContainer: {
+ overflow: "hidden",
+ flex: 1,
+ borderWidth: 6,
+ borderRadius: 6,
+ alignItems: "center",
+ justifyContent: "center",
+
+ },
+ label: {
+ paddingTop: 5,
+ textAlign: "center",
+ color: colors.primary,
+ backgroundColor: "transparent",
+ fontSize: 14,
+ fontWeight: "bold",
+ },
+});
diff --git a/src/app/config/colors.js b/src/app/config/colors.js
index 22fcddb..d6e9cf3 100644
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@@ -12,5 +12,6 @@ export default {
lightestGray: "#F0F0F0",
lightBlue: "#1976D2",
gold: "#ffd700",
+ toggle: "#e5eff4",
};
diff --git a/src/app/screens/SharingDataScreen.js b/src/app/screens/SharingDataScreen.js
index 7d95e63..294df99 100644
--- a/src/app/screens/SharingDataScreen.js
+++ b/src/app/screens/SharingDataScreen.js
@@ -1,11 +1,10 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
-import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
+import { TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
-import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg";
-
+import SvgLabeledButton from "../components/SvgLabeledButton";
//1/3
function SharingDataScreen({ navigation }) {
@@ -18,43 +17,45 @@ function SharingDataScreen({ navigation }) {
- navigation.navigate("FloodSharingData")}
- >
-
-
+ />
+
- navigation.navigate("RainSharingData")}
- >
-
-
+ SvgImage={assets.rainLevel.RainIcon}
+ />
- navigation.navigate("PluviometerSharingData")}
- >
-
-
+ SvgImage={assets.PluviometerIcon}/>
- navigation.navigate("RiverFloodData")}
- >
-
-
+ SvgImage={assets.riverLevel.RiverIcon}/>